side playlist box and gui changes

This commit is contained in:
naomiaro 2010-10-06 10:40:46 -04:00
parent d1fce69e64
commit e4cf1a6fcf
12 changed files with 190 additions and 93 deletions

View File

@ -55,12 +55,11 @@
}
.pl_main {
clear: left;
}
.pl_row {
background-color: #d5e2ee;
clear:left;
cursor:move;
}
@ -154,3 +153,29 @@
text-align: right;
padding: 6px;
}
#spl_sortable {
list-style-type: none;
padding: 0;
margin: 0;
}
#spl_head {
background-color: #8BAED1;
font-weight: bold;
color: #ffffff;
}
.spl_title {
width: 73px;
}
.spl_artist {
width: 83px;
}
.spl_empty {
height: 30px;
text-align: center;
padding-top: 10px;
}

View File

@ -1,21 +1,37 @@
$(document).ready(function() {
$("#pl_sortable").sortable();
$('#search_results').find('tr').not('.blue_head').draggable({
connectToSortable: 'ul#spl_sortable',
helper: 'clone'
});
$('#cc_right_panel').find('h1').click(function(){
$(this).siblings().toggle();
});
$("#pl_sortable" ).bind( "sortstop", function(event, ui) {
var li, newPos, oldPos;
function movePLItem(event, ui) {
var ul, li, newPos, oldPos, id_prefix, tag;
tag = ui.item.get(0).tagName
if( tag === "TR")
return;
ul = $(this);
li = ui.item;
newPos = $(this).children().index(li);
oldPos = li.attr('id').split("_").pop();
var temp = li.attr('id').split("_");
newPos = ul.children().index(li);
oldPos = temp[1];
id_prefix = temp[0];
$.post("ui_handler.php",
$.post('ui_handler.php',
{ 'act': 'PL.moveItem', 'oldPos': oldPos, 'newPos': newPos },
function(data){
var ul = $("#pl_sortable");
if(data.error) {
var size,
@ -23,10 +39,10 @@ $(document).ready(function() {
size = $(ul).children().size();
tmp_ul = $("<ul/>");
tmp_ul = $('<ul/>');
for(var i=0; i<size; i++)
{
tmp_ul.append(ul.find("#pl_"+i));
tmp_ul.append(ul.find('#'+id_prefix+'_'+i));
}
//restore the UI to the previous order.
@ -38,15 +54,44 @@ $(document).ready(function() {
//redo playlist positional ids, input names.
$(ul).children().each(function(index){
var li = $(this);
li.attr('id', 'pl_'+index);
li.find(".pl_input").find("input").attr('name', index);
li.attr('id', id_prefix+'_'+index);
li.find('.'+id_prefix+'_input').find('input').attr('name', index);
});
}
},
"json"
);
});
}
function addPLItem(event, ui){
var tr, id, ul;
ul = $(this);
tr = ui.item;
id = tr.find("input").attr('name');
ul.find('tr').remove();
location.href='ui_handler.php?act=PL.addItem&id='+id;
}
/*
function test(event, ui){
alert('out');
}
*/
//PL main editor.
$("#pl_sortable").sortable();
$("#pl_sortable" ).bind( "sortstop", movePLItem);
//PL side bar editor.
$("#spl_sortable").sortable();
$("#spl_sortable" ).bind( "sortstop", movePLItem);
$("#spl_sortable" ).bind( "sortreceive", addPLItem);
//$("#spl_sortable" ).bind( "sortout", test);
function removeCueInput(){
var span = $(this).parent();

View File

@ -53,7 +53,6 @@ form {
background-color: #F7F9FB;
padding: 0 25px 0 25px;
cursor: pointer;
width: 100px;
}
.button_wide {
@ -321,6 +320,7 @@ input, select {
border: 1px solid #cfcfcf;
padding: 6px;
margin-bottom: 21px;
width: 250px;
}
.container_elements h1 {
@ -335,6 +335,14 @@ input, select {
color: #666;
}
.container_elements table {
width: 100%;
}
.container_elements .button {
width: 80px;
}
.head {
font-size: 12px;
background-color: #5286ba;
@ -359,7 +367,6 @@ input, select {
.container_table {
font-size: 12px;
/*height: 275px;*/
overflow: auto;
}
@ -372,9 +379,8 @@ table {
table td {
font-size: 12px;
padding: 2px 6px 0px 6px;
border-right: 1px solid #333;
height: 19px;
vertical-align: top;
vertical-align: middle;
}
table tr.blue_head td {
@ -385,7 +391,7 @@ table tr.blue_head td {
}
A#blue_head {
.blue_head a, .footer a {
font-size: 12px;
color:#fff;
}
@ -1026,4 +1032,12 @@ table.masterpalette td{
.sp_tool_tip table td {
border: 0;
}
#cc_right_panel h1 {
cursor: pointer;
}
.active_pl {
font-weight: bold;
}

View File

@ -7,45 +7,45 @@
{if $_results.cnt > 0}
<form name="SEARCHRESULTS">
<div class="head" style="width:600px; height: 21px;">&nbsp;</div>
<div class="container_table" style="width: 600px; height: auto;">
<table style="width: 600px;">
<div class="container_table">
<table id="search_results">
<tr class="blue_head">
<td style="width: 20px"><input type="checkbox" name="all" onClick="collector_switchAll('SEARCHRESULTS')"></td>
<td style="width: 200px;"><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dc:title" id="blue_head">##Title##</a></td>
<td style="width: 195px"><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dc:creator" id="blue_head">##Creator##</a></td>
<td style="width: 195px"><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dc:source" id="blue_head">##Album##</a></td>
<td style="width: 25px"><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=ls:track_num" id="blue_head">##Track##</a></td>
<td><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dcterms:extent" id="blue_head">##Duration##</a></td>
<td style="width: 41px; border: 0; text-align: center">{*<a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=type" id="blue_head">*}##Type##{*</a>*}</td>
<td><input type="checkbox" name="all" onClick="collector_switchAll('SEARCHRESULTS')"></td>
<td><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dc:title" >##Title##</a></td>
<td><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dc:creator" >##Creator##</a></td>
<td><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dc:source" >##Album##</a></td>
<td><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=ls:track_num" >##Track##</a></td>
<td><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=dcterms:extent" >##Length##</a></td>
<td><a href="{$UI_HANDLER}?act={$_act_prefix}.reorder&by=type" >##Type##</a></td>
</tr>
{foreach from=$_results.items item=i}
<!-- start item -->
<tr class="background-color: {cycle values='blue1, blue2'}">
<tr class="{cycle values='blue1, blue2'}">
<td><input type="checkbox" class="checkbox" name="{$i.id}"/></td>
<td {include file=$action_handler} style="cursor: pointer">
<td {include file=$action_handler}>
{if $i.type == 'playlist' && $PL->isAvailable($i.id) == false}
<b>{$i.title|truncate:30:"...":true}</b>
{else}
{$i.title|truncate:30:"...":true}
{/if}
</td>
<td {include file=$action_handler} style="cursor: pointer">
<td {include file=$action_handler}>
{$i.creator}
{if $i.type == 'playlist' && $PL->isAvailable($i.id) == false}
(editing: {$PL->isUsedBy($i.id)})
{/if}
</td>
<td {include file=$action_handler} style="cursor: pointer">{$i.source}</td>
<td {include file=$action_handler} style="cursor: pointer" align="center">{$i.track_num}</td>
<td {include file=$action_handler} style="text-align: right; cursor: pointer">{assign var="_duration" value=$i.duration}{niceTime in=$_duration}</td>
<td {include file=$action_handler} style="border: 0; text-align: center; cursor: pointer">
<td {include file=$action_handler}>{$i.source}</td>
<td {include file=$action_handler}>{$i.track_num}</td>
<td {include file=$action_handler}>{assign var="_duration" value=$i.duration}{niceTime in=$_duration}</td>
<td {include file=$action_handler}>
{if $i.type == 'playlist' && $PL->isAvailable($i.id) == false}
<div align="left"><img src="html/img/ico_lock.png">
<img src="html/img/{$i.type|lower}.png" border="0" alt="{$i.type|lower|capitalize}" {* include file="sub/alttext.tpl" *} /></div>
<div>
<img src="html/img/{$i.type|lower}.png" border="0" alt="{$i.type|lower|capitalize}"/>
<img src="html/img/ico_lock.png">
</div>
{else}
<img src="html/img/{$i.type|lower}.png" border="0" alt="{$i.type|lower|capitalize}" {* include file="sub/alttext.tpl" *} />
<img src="html/img/{$i.type|lower}.png" border="0" alt="{$i.type|lower|capitalize}"/>
{/if}
</td>
</tr>
@ -54,7 +54,7 @@
</table>
</div>
<div class="footer" style="width: 595px;">
<div class="footer">
<div class="counter">
{* {if $_results.prev}<a href="{$UI_HANDLER}?act={$_act_prefix}.setOffset&page=prev" id="blue_head">##previous##</a>{/if} *}

View File

@ -4,7 +4,7 @@
<h1>##Library Search##</h1>
<form action="ui_handler.php" method="post" name="simplesearch" id="simplesearch"><input name="act" type="hidden" value="SEARCH.simpleSearch" />
<div>
<input size="20" maxlength="50" name="criterium" type="text" style="width: 184px;" />
<input size="27" maxlength="50" name="criterium" type="text"/>
<input type="button" class="button_small" value="##Go##" onClick="submit()"/>
</div>
</form>

View File

@ -77,7 +77,7 @@
{include file="twitter/settings.tpl"}
{/if}
<div class="content">
<div class="content" id="cc_right_panel">
{if $simpleSearchForm}
{include file="library/simpleSearchForm.tpl"}
{/if}
@ -85,6 +85,10 @@
{if $SCRATCHPAD}
{include file="scratchpad/main.tpl"}
{/if}
{if $showSidePL && !$PL_simpleManagement}
{include file="playlist/sidebar.tpl"}
{/if}
</div>
{/if}

View File

@ -20,34 +20,34 @@
{foreach from=$PL->getActiveArr($PL->activeId) key='pos' item='i'}
<li class="pl_row" id="pl_{$pos}">
<div class="pl_fade_in"><span>Fade in: </span><span class="pl_time">{$i.fadein}</span></div>
<span class="pl_input">
<input type="checkbox" class="checkbox" name="{$pos}"/>
</span>
<span class="pl_title">
{$i.track_title}
</span>
<span class="pl_artist">
{$i.artist_name}
</span>
<span class="pl_length" >
{$i.length}
</span>
<span class="pl_cue_in pl_time">
{$i.cuein}
</span>
<span class="pl_cue_out pl_time">
{$i.cueout}
</span>
<span class="pl_playlength">
{$i.cliplength}
</span>
<span class="pl_input">
<input type="checkbox" class="checkbox" name="{$pos}"/>
</span>
<span class="pl_title">
{$i.track_title}
</span>
<span class="pl_artist">
{$i.artist_name}
</span>
<span class="pl_length" >
{$i.length}
</span>
<span class="pl_cue_in pl_time">
{$i.cuein}
</span>
<span class="pl_cue_out pl_time">
{$i.cueout}
</span>
<span class="pl_playlength">
{$i.cliplength}
</span>
<div class="pl_fade_out"><span>Fade out: </span><span class="pl_time">{$i.fadeout}</span></div>
</li>
{/foreach}
{if is_null($pos)}
<li class="pl_empty">##Empty playlist##</li>
{/if}
</ul>
{if is_null($pos)}
<div class="pl_empty">##Empty playlist##</div>
{/if}
</div>
</form>
@ -57,7 +57,7 @@
<input type="button" class="button_large" onClick="collector_clearAll('PL', 'PL.removeItem')" value="##Clear Playlist##" />
</div>
<div class="pl_container_button">
<input type="button" class="button_large" value="##Close Playlist##" onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmRelease', 'PL.confirmRelease', 400, 50)">
<input type="button" class="button_large" onClick="location.href='{$UI_HANDLER}?act=PL.release'" value="##Close Playlist##">
<input type="button" class="button_large" value="##Description##" onClick="location.href='{$UI_BROWSER}?act=PL.editMetaData'">
<input type="button" class="button_large" value="##Delete Playlist##" onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmDelete', 'PL.deleteActive', 400, 50)">
</div>

View File

@ -5,16 +5,15 @@
<form name="SP">
<div class="container_elements">
<h1>##ScratchPad##</h1>
<div class="head" style="width:255px; height: 21px;">&nbsp;</div>
<div class="container_table" style="width:275px;">
<table style="width:255px;">
<div class="container_table">
<table id="SP_table">
<!-- start table header -->
<tr class="blue_head">
<td style="width: 1px"><input type="checkbox" name="all" onClick="collector_switchAll('SP')"></td>
<td style="width: *"><a href="#" onClick="hpopup('{$UI_HANDLER}?act=SP.reorder&by=title', 'order');" id="blue_head">##Title##</a></td>
<td style="width: 1px"><a href="#" onClick="hpopup('{$UI_HANDLER}?act=SP.reorder&by=title', 'order');" id="blue_head">##Duration##</td>
<td style="width: 1px; border: 0; text-align: center"><a href="#" onClick="hpopup('{$UI_HANDLER}?act=SP.reorder&by=title', 'order');" id="blue_head">##Type##</td>
<td><input type="checkbox" name="all" onClick="collector_switchAll('SP')"></td>
<td><a href="#" onClick="hpopup('{$UI_HANDLER}?act=SP.reorder&by=title', 'order');">##Title##</a></td>
<td><a href="#" onClick="hpopup('{$UI_HANDLER}?act=SP.reorder&by=title', 'order');">##Length##</td>
<td><a href="#" onClick="hpopup('{$UI_HANDLER}?act=SP.reorder&by=title', 'order');">##Type##</td>
</tr>
<!-- end table header -->
@ -23,13 +22,13 @@
<!-- start item -->
<tr class="{cycle values='blue1, blue2'}" id="scratchpad_item_{$i.id}">
<td><input type="checkbox" class="checkbox" name="{$i.id}"/></td>
<td {include file="scratchpad/actionhandler.tpl"} style="cursor: pointer">
<td {include file="scratchpad/actionhandler.tpl"}>
{if $i.type|lower == "playlist"}
{if $i.type == 'playlist' && $PL->isAvailable($i.id) == false}
<div style="font-weight: bold; cursor: pointer">
<div class="active_pl">
{else}
<div style="cursor: pointer">
<div>
{/if}
{$i.title|truncate:14:"...":true}
</div>
@ -38,13 +37,15 @@
{/if} {* for some reason object call doesn't like usage of array *}
</td>
{assign var="_duration" value=$i.duration}
<td {include file="scratchpad/actionhandler.tpl"} style="text-align: right; cursor: pointer">{niceTime in=$_duration}</td>
<td {include file="scratchpad/actionhandler.tpl"} style="border: 0; text-align: center; cursor: pointer">
<td {include file="scratchpad/actionhandler.tpl"}>{niceTime in=$_duration}</td>
<td {include file="scratchpad/actionhandler.tpl"}>
{if $i.type == 'playlist' && $PL->isAvailable($i.id) == false}
<div align="left"><img src="html/img/ico_lock.png">
<img src="html/img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {* include file="sub/alttext.tpl"*} /></div>
<div>
<img src="html/img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" />
<img src="html/img/ico_lock.png">
</div>
{else}
<img src="html/img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {* include file="sub/alttext.tpl" *} /> {/if}
<img src="html/img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" /> {/if}
</td>
</tr>
<!-- end item -->
@ -57,7 +58,7 @@
</table>
</div>
<div class="footer" style="width:250px;">
<div class="footer">
<select name="SP_multiaction" onChange="collector_submit('SP', this.value)">
<option>##Multiple Action:##</option>
<option value="SP.removeItem">##Remove files##</option>
@ -73,7 +74,7 @@
document.forms['SP'].elements['all'].checked = false;
collector_switchAll('SP');
</script>
<a href="#" onClick="collector_clearAll('SP', 'SP.removeItem')" id="blue_head">##Clear##</a>
<a href="#" onClick="collector_clearAll('SP', 'SP.removeItem')">##Clear##</a>
</div>
</div>

View File

@ -17,7 +17,11 @@ function collector_submit(formname, action, script, name, width, height)
}
if (href == '') return false;
if (action === 'PL.addItem') {
location.href='ui_handler.php?act='+ action + href;
return;
}
if (action == 'delete') {
{/literal}

View File

@ -17,6 +17,7 @@ $Smarty->assign('editItem', null);
$Smarty->assign('changeStationPrefs', FALSE);
$Smarty->assign('PL_simpleManagement', FALSE);
$Smarty->assign('showBackup', FALSE);
$Smarty->assign('showSidePL', TRUE);
if (isset($_REQUEST['popup']) && is_array($_REQUEST['popup'])){
if (isset($WHITE_SCREEN_OF_DEATH) && ($WHITE_SCREEN_OF_DEATH == TRUE)) {

View File

@ -315,11 +315,11 @@ switch ($_REQUEST['act']) {
case "PL.addItem":
if (isset($_REQUEST['id'])) {
if ($uiHandler->PLAYLIST->addItem($_REQUEST['id'], $_REQUEST['playlength']) !== FALSE) {
if ($uiHandler->PLAYLIST->addItem($_REQUEST['id']) !== FALSE) {
$uiHandler->SCRATCHPAD->addItem($_REQUEST['id']);
}
}
$uiHandler->PLAYLIST->setReload();
$uiHandler->PLAYLIST->setReload("ui_browser.php?id=&act=BROWSE");
break;
case "PL.setClipLength":
@ -337,7 +337,7 @@ switch ($_REQUEST['act']) {
case "PL.release":
$uiHandler->PLAYLIST->release();
$uiHandler->PLAYLIST->setReload();
$uiHandler->PLAYLIST->setReturn();
break;
case "PL.save":
@ -391,7 +391,7 @@ switch ($_REQUEST['act']) {
case "PL.deleteActive":
if (($ui_tmpid = $uiHandler->PLAYLIST->deleteActive()) !== FALSE) {
//$uiHandler->SCRATCHPAD->removeItems($ui_tmpid);
$uiHandler->SCRATCHPAD->removeItems($ui_tmpid);
}
$uiHandler->PLAYLIST->setReload();
break;

View File

@ -30,9 +30,12 @@ class uiPlaylist
} // constructor
public function setReload()
public function setReload($url=NULL)
{
$this->Base->redirUrl = $this->reloadUrl;
if($url)
$this->Base->redirUrl = $url;
else
$this->Base->redirUrl = $this->reloadUrl;
} // fn setReload