Merge branch 'master' of dev.sourcefabric.org:campcaster

Conflicts:
	public/css/styles.css
This commit is contained in:
mkonecny 2011-02-07 19:06:06 -05:00
commit 16bdfb7611
13 changed files with 180 additions and 185 deletions

View File

@ -7,11 +7,6 @@ class PlaylistController extends Zend_Controller_Action
public function init() public function init()
{ {
if(!Zend_Auth::getInstance()->hasIdentity())
{
$this->_redirect('login/index');
}
$ajaxContext = $this->_helper->getHelper('AjaxContext'); $ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('add-item', 'json') $ajaxContext->addActionContext('add-item', 'json')
->addActionContext('delete-item', 'json') ->addActionContext('delete-item', 'json')
@ -247,6 +242,7 @@ class PlaylistController extends Zend_Controller_Action
$this->view->pos = $pos; $this->view->pos = $pos;
$this->view->cueIn = $cues[0]; $this->view->cueIn = $cues[0];
$this->view->cueOut = $cues[1]; $this->view->cueOut = $cues[1];
$this->view->origLength = $cues[2];
$this->view->html = $this->view->render('playlist/set-cue.phtml'); $this->view->html = $this->view->render('playlist/set-cue.phtml');
} }
@ -266,12 +262,12 @@ class PlaylistController extends Zend_Controller_Action
return; return;
} }
$this->view->pos = $pos; $this->view->pos = intval($pos);
$fades = $pl->getFadeInfo($pos); $fades = $pl->getFadeInfo($pos+1);
$this->view->fadeIn = $fades[0]; $this->view->fadeIn = $fades[0];
$fades = $pl->getFadeInfo($pos-1); $fades = $pl->getFadeInfo($pos);
$this->view->fadeOut = $fades[1]; $this->view->fadeOut = $fades[1];
$this->view->html = $this->view->render('playlist/set-fade.phtml'); $this->view->html = $this->view->render('playlist/set-fade.phtml');
} }

View File

@ -582,8 +582,8 @@ class Playlist {
$sql = "SELECT INTERVAL '{$fadeIn}' > INTERVAL '{$clipLength}'"; $sql = "SELECT INTERVAL '{$fadeIn}' > INTERVAL '{$clipLength}'";
$r = $con->query($sql); $r = $con->query($sql);
if($r->fetchColumn(0)) { if($r->fetchColumn(0)) {
$errArray["error"]="Fade In can't be larger than overall playlength."; //"Fade In can't be larger than overall playlength.";
return $errArray; $fadeIn = $clipLength;
} }
$row->setDbFadein($fadeIn); $row->setDbFadein($fadeIn);
@ -593,8 +593,8 @@ class Playlist {
$sql = "SELECT INTERVAL '{$fadeOut}' > INTERVAL '{$clipLength}'"; $sql = "SELECT INTERVAL '{$fadeOut}' > INTERVAL '{$clipLength}'";
$r = $con->query($sql); $r = $con->query($sql);
if($r->fetchColumn(0)) { if($r->fetchColumn(0)) {
$errArray["error"]="Fade Out can't be larger than overall playlength."; //Fade Out can't be larger than overall playlength.";
return $errArray; $fadeOut = $clipLength;
} }
$row->setDbFadeout($fadeOut); $row->setDbFadeout($fadeOut);
@ -613,10 +613,12 @@ class Playlist {
->filterByDbPosition($pos) ->filterByDbPosition($pos)
->findOne(); ->findOne();
$file = $row->getCcFiles();
$origLength = $file->getDbLength();
$cueIn = $row->getDBCuein(); $cueIn = $row->getDBCuein();
$cueOut = $row->getDbCueout(); $cueOut = $row->getDbCueout();
return array($cueIn, $cueOut); return array($cueIn, $cueOut, $origLength);
} }
/** /**
@ -739,7 +741,6 @@ class Playlist {
$r = $con->query($sql); $r = $con->query($sql);
if($r->fetchColumn(0)){ if($r->fetchColumn(0)){
$fadeIn = $cliplength; $fadeIn = $cliplength;
$row->setDbFadein($fadeIn); $row->setDbFadein($fadeIn);
} }
@ -747,7 +748,6 @@ class Playlist {
$r = $con->query($sql); $r = $con->query($sql);
if($r->fetchColumn(0)){ if($r->fetchColumn(0)){
$fadeOut = $cliplength; $fadeOut = $cliplength;
$row->setDbFadein($fadeOut); $row->setDbFadein($fadeOut);
} }

View File

@ -10,16 +10,11 @@
<div class="clear"></div> <div class="clear"></div>
<div class="" style="clear:both; float:none; width:100%;"> <div class="" style="clear:both; float:none; width:100%;">
<ul id="spl_sortable"> <ul id="spl_sortable">
<?php if (count($this->pl->getContents())) : ?> <?php echo $this->render('playlist/update.phtml') ?>
<?php echo $this->partialLoop('playlist/sidebarcontent.phtml', $this->pl->getContents()); ?>
<?php else : ?>
<li class="spl_empty">Empty playlist</li>
<?php endif; ?>
</ul> </ul>
</div> </div>
<div id="spl_error" class="ui-state-error ui-corner-all" style="display: none"></div>
<?php else : ?> <?php else : ?>
<div>No open playlist</div> <div>No open playlist</div>
<?php endif; ?> <?php endif; ?>

View File

@ -1,6 +1,14 @@
<dl id="spl_cue_editor" class="inline-list"> <dl id="spl_cue_editor" class="inline-list">
<dt>Cue In:</dt> <dt>Cue In:</dt>
<dd id="spl_cue_in_<?php echo $this->pos; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->cueIn; ?></span></dd> <dd id="spl_cue_in_<?php echo $this->pos; ?>" class="spl_cue_in">
<span contenteditable="true" class="spl_text_input"><?php echo $this->cueIn; ?></span>
</dd>
<dd><span class="edit-error"></span></dd>
<dt>Cue Out:</dt> <dt>Cue Out:</dt>
<dd id="spl_cue_out_<?php echo $this->pos; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->cueOut; ?></span></dd> <dd id="spl_cue_out_<?php echo $this->pos; ?>" class="spl_cue_out">
<span contenteditable="true" class="spl_text_input"><?php echo $this->cueOut; ?></span>
</dd>
<dd><span class="edit-error"></span></dd>
<dt>Original Length:</dt>
<dd id="spl_original"><span><?php echo $this->origLength; ?></span></dd>
</dl> </dl>

View File

@ -1,6 +1,10 @@
<dl id="spl_editor" class="inline-list"> <dl id="spl_editor" class="inline-list">
<dt>Fade out:</dt> <dt>Fade out:</dt>
<dd id="spl_fade_out_<?php echo $this->pos -1; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span></dd> <dd id="spl_fade_out_<?php echo $this->pos; ?>" class="spl_fade_out">
<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span>
</dd>
<dt>Fade in:</dt> <dt>Fade in:</dt>
<dd id="spl_fade_in_<?php echo $this->pos; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span></dd> <dd id="spl_fade_in_<?php echo $this->pos + 1; ?>" class="spl_fade_in">
<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span>
</dd>
</dl> </dl>

View File

@ -1,21 +0,0 @@
<?php if($this->partialCounter-1 > 0): ?>
<!--<li id="crossfade_<?php echo $this->partialCounter-2 ?>-<?php echo $this->partialCounter-1 ?>" class="crossfade" style="display: none"></li>-->
<?php endif; ?>
<li class="ui-state-default" id="spl_<?php echo $this->partialCounter-1 ?>">
<a href="javascript:void(0);" class="big_play" onclick="audioPreview('<?php echo $this->CcFiles["gunid"].".".pathinfo($this->CcFiles["name"], PATHINFO_EXTENSION);?>', 'spl_<?php echo $this->partialCounter-1 ?>')"><span class="ui-icon ui-icon-play"></span></a>
<div class="text-row top">
<span class="spl_playlength"><?php echo $this->cliplength ?></span>
<span class="spl_title"><?php echo $this->CcFiles['track_title'] ?></span>
</div>
<div class="text-row">
<span class="spl_artist"><?php echo $this->CcFiles['artist_name'] ?></span>
</div>
<?php if($this->partialCounter-1 > 0): ?>
<div id="fade_<?php echo $this->partialCounter-1 ?>" class="spl_fade_control ui-state-default"></div>
<?php endif; ?>
<span class="ui-icon ui-icon-closethick"></span>
</li>
<!-- <li id="cues_<?php echo $this->partialCounter-1 ?>" class="crossfade" style="display: none"></li> -->

View File

@ -1,5 +1,36 @@
<?php if (count($this->pl->getContents())) : ?> <?php if (count($this->pl->getContents())) : ?>
<?php echo $this->partialLoop('playlist/sidebarcontent.phtml', $this->pl->getContents()); ?>
<?php $i = 0; ?>
<?php foreach($this->pl->getContents() as $item) : ?>
<li class="ui-state-default" id="spl_<?php echo $i ?>">
<div class="list-item-container">
<a href="javascript:void(0);" class="big_play"
onclick="audioPreview('<?php echo $item["CcFiles"]["gunid"].".".pathinfo($item["CcFiles"]["name"], PATHINFO_EXTENSION);?>',
'spl_<?php echo $i ?>')"><span class="ui-icon ui-icon-play"></span></a>
<div class="text-row top">
<span class="spl_playlength"><?php echo $item["cliplength"] ?></span>
<span class="spl_title"><?php echo $item["CcFiles"]['track_title'] ?></span>
</div>
<div class="text-row">
<span class="spl_artist"><?php echo $item["CcFiles"]['artist_name'] ?></span>
</div>
<?php if($i < count($this->pl->getContents()) -1): ?>
<div id="fade_<?php echo $i ?>" class="spl_fade_control ui-state-default"></div>
<?php endif; ?>
<span class="ui-icon ui-icon-closethick"></span>
</div>
<div id="cues_<?php echo $i ?>" class="cue-edit clearfix" style="display: none"></div>
<?php if($i < count($this->pl->getContents()) -1): ?>
<div id="crossfade_<?php echo $i ?>-<?php echo $i+1 ?>" class="crossfade clearfix" style="display: none"></div>
<?php endif; ?>
</li>
<?php $i = $i+1; ?>
<?php endforeach; ?>
<?php else : ?> <?php else : ?>
<li class="pl_empty">Empty playlist</li> <li class="spl_empty">Empty playlist</li>
<?php endif; ?> <?php endif; ?>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 949 B

View File

@ -1,28 +1,28 @@
/* /*
* Timepicker stylesheet * Timepicker stylesheet
* Highly inspired from datepicker * Highly inspired from datepicker
* FG - Nov 2010 - Web3R * FG - Nov 2010 - Web3R
* *
* version 0.0.3 : Fixed some settings, more dynamic * version 0.0.3 : Fixed some settings, more dynamic
* version 0.0.4 : Removed width:100% on tables * version 0.0.4 : Removed width:100% on tables
*/ */
.ui-timepicker-inline { display: inline } .ui-timepicker-inline { display: inline }
#ui-timepicker-div { padding: 0.2em; z-index: 5 !important } #ui-timepicker-div { padding: 0.2em; z-index: 10 !important }
.ui-timepicker-table { display: inline-table } .ui-timepicker-table { display: inline-table }
.ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; } .ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; }
.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em; } .ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em; }
.ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; } .ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; }
.ui-timepicker-table td { padding: 0.1em; width: 2.2em; } .ui-timepicker-table td { padding: 0.1em; width: 2.2em; }
.ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; } .ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; }
.ui-timepicker-table td a { .ui-timepicker-table td a {
display:block; display:block;
padding:0.2em 0.3em 0.2em 0.5em; padding:0.2em 0.3em 0.2em 0.5em;
width: 1.2em; width: 1.2em;
text-align:right; text-align:right;
text-decoration:none; text-decoration:none;
} }

View File

@ -15,11 +15,7 @@
#spl_sortable > li, #spl_sortable > li,
#side_playlist > div, #side_playlist > div,
#spl_editor, #spl_editor,
.spl_artist, .spl_artist {
.spl_cue_in,
.spl_fade_in,
.spl_cue_out,
.spl_fade_out {
clear: left; clear: left;
} }
@ -56,10 +52,6 @@
border: none; border: none;
} }
#spl_name {
}
.ui-icon-closethick { .ui-icon-closethick {
margin-top: 7px; margin-top: 7px;
} }
@ -80,15 +72,6 @@
font-size:12px; font-size:12px;
} }
/*#spl_editor {
height: 50px;
}*/
#spl_editor > div > span {
/* display: inline-block;
width: 150px;*/
}
.ui-icon-closethick, .ui-icon-closethick,
.ui-icon-play, .ui-icon-play,
.spl_fade_control, .spl_fade_control,
@ -242,11 +225,11 @@
} }
.crossfade dl.inline-list, .cue-edit dl.inline-list, .crossfade-main dl.inline-list { .crossfade dl.inline-list, .cue-edit dl.inline-list, .crossfade-main dl.inline-list {
padding-bottom:5px; padding-bottom:5px;
clear:left;
} }
.crossfade dl.inline-list dt, .cue-edit dl.inline-list dt, .crossfade-main dl.inline-list dt { .crossfade dl.inline-list dt, .cue-edit dl.inline-list dt, .crossfade-main dl.inline-list dt {
clear: none; min-width: 90px;
min-width: 40px;
} }
@ -254,27 +237,26 @@
float: left; float: left;
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
padding: 0 25px 0px 15px;
} }
.edit-error { .edit-error {
clear:both;
color:#b80000; color:#b80000;
margin:0 0 0px 37px; margin:0;
padding-bottom:4px; padding-bottom:0;
font-size:12px; font-size:12px;
display:none; display:none;
} }
.edit-error:last-child { /*.edit-error:last-child {
padding-bottom:10px; padding-bottom:10px;
} }*/
.spl_text_input { .spl_text_input {
color:#fff; color:#fff;
} }
.crossfade-main { .crossfade-main {
background:#debc9e; background:#debc9e;
border:1px solid #5b5b5b; border:1px solid #5b5b5b;
padding:10px 10px 6px 10px; padding:10px 10px 0 10px;
margin:0 1px 16px 0; margin:0 1px 16px 0;
position:relative; position:relative;
} }

View File

@ -848,6 +848,7 @@ div.ui-datepicker {
margin-right:22px; margin-right:22px;
} }
#schedule_playlist_chosen li > div > div > span { #schedule_playlist_chosen li > div > div > span {
float: right; float: right;
margin-right:46px; margin-right:46px;
@ -1116,4 +1117,6 @@ button, input {
} }
.ui-widget-content .user-list-wrapper .ui-icon.ui-icon-closethick:hover { .ui-widget-content .user-list-wrapper .ui-icon.ui-icon-closethick:hover {
background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png); background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png);
} }
#ui-datepicker-div { z-index: 10 !important }

View File

@ -6,28 +6,13 @@ function isTimeValid(time) {
var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$"); var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$");
if (!regExpr.test(time)) { if (!regExpr.test(time)) {
displayEditorError("please put in a time '00:00:00 (.000000)'");
return false; return false;
} }
return true; return true;
} }
function displayEditorError(error) { function changeClipLength(pos, json) {
$("#spl_error")
.empty()
.append('<span class="ui-icon ui-icon-alert"></span>')
.append(error)
.show();
}
function clearEditorError() {
$("#spl_error")
.empty()
.hide();
}
function cueSetUp(pos, json) {
$("#spl_"+pos).find(".spl_playlength") $("#spl_"+pos).find(".spl_playlength")
.empty() .empty()
@ -38,109 +23,95 @@ function cueSetUp(pos, json) {
.append(json.response.length); .append(json.response.length);
} }
function changeCueIn() { function changeCueIn(event) {
event.stopPropagation();
var pos, url, cueIn, div; var pos, url, cueIn, div;
span = $(this); span = $(this);
pos = span.parent().attr("id").split("_").pop(); pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-cue/format/json"; url = "/Playlist/set-cue";
cueIn = span.text().trim(); cueIn = span.text().trim();
if(!isTimeValid(cueIn)){ if(!isTimeValid(cueIn)){
return; //"please put in a time '00:00:00 (.000000)'"
} }
$.post(url, {cueIn: cueIn, pos: pos}, function(json){ $.post(url, {format: "json", cueIn: cueIn, pos: pos}, function(json){
if(json.response.error) {
displayEditorError(json.response.error); if(json.response.error) {
return; return;
} }
clearEditorError(); changeClipLength(pos, json);
span.empty()
.append(json.response.cueIn);
cueSetUp(pos, json);
}); });
} }
function changeCueOut() { function changeCueOut(event) {
event.stopPropagation();
var pos, url, cueOut, div; var pos, url, cueOut, div;
span = $(this); span = $(this);
pos = span.parent().attr("id").split("_").pop(); pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-cue/format/json"; url = "/Playlist/set-cue";
cueOut = span.text().trim(); cueOut = span.text().trim();
if(!isTimeValid(cueOut)){ if(!isTimeValid(cueOut)){
return; return;
} }
$.post(url, {cueOut: cueOut, pos: pos}, function(json){ $.post(url, {format: "json", cueOut: cueOut, pos: pos}, function(json){
if(json.response.error) { if(json.response.error) {
displayEditorError(json.response.error);
return; return;
} }
clearEditorError(); changeClipLength(pos, json);
span.empty()
.append(json.response.cueOut);
cueSetUp(pos, json);
}); });
} }
function changeFadeIn() { function changeFadeIn(event) {
event.stopPropagation();
var pos, url, fadeIn, div; var pos, url, fadeIn, div;
span = $(this); span = $(this);
pos = span.parent().attr("id").split("_").pop(); pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-fade/format/json"; url = "/Playlist/set-fade";
fadeIn = span.text().trim(); fadeIn = span.text().trim();
if(!isTimeValid(fadeIn)){ if(!isTimeValid(fadeIn)){
return; return;
} }
$.post(url, {fadeIn: fadeIn, pos: pos}, function(json){ $.post(url, {format: "json", fadeIn: fadeIn, pos: pos}, function(json){
if(json.response.error) { if(json.response.error) {
displayEditorError(json.response.error); displayEditorError(json.response.error);
return; return;
} }
clearEditorError();
span.empty()
.append(json.response.fadeIn);
}); });
} }
function changeFadeOut() { function changeFadeOut(event) {
event.stopPropagation();
var pos, url, fadeOut, div; var pos, url, fadeOut, div;
span = $(this); span = $(this);
pos = span.parent().attr("id").split("_").pop() - 1; pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-fade/format/json"; url = "/Playlist/set-fade";
fadeOut = span.text().trim(); fadeOut = span.text().trim();
if(!isTimeValid(fadeOut)){ if(!isTimeValid(fadeOut)){
return; return;
} }
$.post(url, {fadeOut: fadeOut, pos: pos}, function(json){ $.post(url, {format: "json", fadeOut: fadeOut, pos: pos}, function(json){
if(json.response.error) { if(json.response.error) {
displayEditorError(json.response.error);
return; return;
} }
clearEditorError();
span.empty()
.append(json.response.fadeOut);
}); });
} }
@ -151,25 +122,33 @@ function submitOnEnter(event) {
} }
} }
function setEditorContent(json) { //function is needed for content editable span because
$("#spl_editor") //jQuery sortable is not letting me edit.
.empty() function focusOnEditable(ev){
.append(json.html); $(this).focus();
}
clearEditorError(); function setCueEvents() {
$(".spl_cue_in span:last").blur(changeCueIn); $(".spl_cue_in span:last").blur(changeCueIn);
$(".spl_cue_out span:last").blur(changeCueOut); $(".spl_cue_out span:last").blur(changeCueOut);
$(".spl_fade_in span:last").blur(changeFadeIn);
$(".spl_fade_out span:last").blur(changeFadeOut);
$(".spl_cue_in span:last, .spl_cue_out span:last, .spl_fade_in span:last, .spl_fade_out span:last").keyup(submitOnEnter); $(".spl_cue_in span:first, .spl_cue_out span:first")
.mousedown(focusOnEditable)
.keyup(submitOnEnter);
}
function setFadeEvents() {
$(".spl_fade_in span:first").blur(changeFadeIn);
$(".spl_fade_out span:first").blur(changeFadeOut);
$(".spl_fade_in span:first, .spl_fade_out span:first")
.mousedown(focusOnEditable)
.keyup(submitOnEnter);
} }
function highlightActive(el) { function highlightActive(el) {
$("#spl_sortable")
.find(".ui-state-active")
.removeClass("ui-state-active");
$(el).addClass("ui-state-active"); $(el).addClass("ui-state-active");
} }
@ -177,27 +156,33 @@ function highlightActive(el) {
function openFadeEditor(event) { function openFadeEditor(event) {
event.stopPropagation(); event.stopPropagation();
$('li[id ^= "cues"]').hide(); var pos, url, li;
$('li[id ^= "crossfade"]').hide();
li = $(this).parent().parent();
pos = parseInt(li.attr("id").split("_").pop());
if($(this).hasClass("ui-state-active")) { if($(this).hasClass("ui-state-active")) {
$(this).removeClass("ui-state-active"); $(this).removeClass("ui-state-active");
$("#crossfade_"+pos+"-"+(pos+1))
.empty()
.hide();
return; return;
} }
var pos, url;
pos = $(this).attr("id").split("_").pop();
url = '/Playlist/set-fade'; url = '/Playlist/set-fade';
highlightActive(this); highlightActive(this);
$.get(url, {format: "json", pos: pos}, function(json){ $.get(url, {format: "json", pos: pos}, function(json){
$("#crossfade_"+(pos-1)+"-"+pos) $("#crossfade_"+(pos)+"-"+(pos+1))
.empty() .empty()
.append(json.html) .append(json.html)
.show(); .show();
setFadeEvents();
}); });
} }
@ -206,17 +191,19 @@ function openCueEditor(event) {
var pos, url, li; var pos, url, li;
$('li[id ^= "cues"]').hide(); li = $(this).parent().parent().parent();
$('li[id ^= "crossfade"]').hide(); pos = li.attr("id").split("_").pop();
li = $(this).parent().parent();
if(li.hasClass("ui-state-active")) { if(li.hasClass("ui-state-active")) {
li.removeClass("ui-state-active"); li.removeClass("ui-state-active");
$("#cues_"+pos)
.empty()
.hide();
return; return;
} }
pos = li.attr("id").split("_").pop();
url = '/Playlist/set-cue'; url = '/Playlist/set-cue';
highlightActive(li); highlightActive(li);
@ -227,6 +214,8 @@ function openCueEditor(event) {
.empty() .empty()
.append(json.html) .append(json.html)
.show(); .show();
setCueEvents();
}); });
} }
@ -390,6 +379,14 @@ function setUpSPL() {
.button() .button()
.click(closeSPL); .click(closeSPL);
$("#spl_main_crossfade")
.button({
icons: {
primary: "crossfade-main-icon"
},
text: false
});
$("#spl_delete") $("#spl_delete")
.button() .button()
.click(deleteSPL); .click(deleteSPL);