drag & drop for playlisteditor
This commit is contained in:
sebastian
parent
49f5cb85fa
commit
f7745e6f59
5 changed files with 192 additions and 142 deletions
|
|
@ -87,6 +87,10 @@ if (is_array($_REQUEST['popup'])){
|
|||
$Smarty->display('popup/PLAYLIST.confirmRelease.tpl');
|
||||
break;
|
||||
|
||||
case "PL.arrangeItems":
|
||||
$Smarty->display('popup/PLAYLIST.arrangeItems.tpl');
|
||||
break;
|
||||
|
||||
case "SCHEDULER.addItem":
|
||||
$Smarty->display('popup/SCHEDULER.addItem.tpl');
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -231,6 +231,11 @@ switch($_REQUEST['act']){
|
|||
$uiHandler->PLAYLIST->setReturn();
|
||||
break;
|
||||
|
||||
case "PL.reArrange":
|
||||
$uiHandler->PLAYLIST->reOrder($_REQUEST['pl_items']);
|
||||
$uiHandler->PLAYLIST->setReload();
|
||||
break;
|
||||
|
||||
case "PL.editMetaData":
|
||||
$uiHandler->PLAYLIST->editMetaData($_REQUEST);
|
||||
$uiHandler->SCRATCHPAD->addItem($_REQUEST['id']);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="container_elements" style="width: 607px;">
|
||||
<!-- start playlist editor -->
|
||||
<div class="container_elements" style="width: 607px;">
|
||||
|
||||
<div style="width: 574px;">
|
||||
<div style="float: left;"><h1>##Playlist Editor## </h1></div>
|
||||
|
|
@ -10,136 +11,80 @@
|
|||
<div class="right"> </div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
|
||||
<form name="PL" action="{$UI_HANDLER}" method="get">
|
||||
<input type="hidden" name="act" value="PL.reOrder"
|
||||
|
||||
<div class="container_table" style="width: 594px;">
|
||||
<table style="width: 574px;">
|
||||
|
||||
<form name="PL">
|
||||
<!-- start repeat after 14 columns -->
|
||||
<tr class="blue_head">
|
||||
<td style="width: 30px"><input type="checkbox" name="all" onClick="collector_switchAll('PL')"></td>
|
||||
<script type="text/javascript">
|
||||
document.forms['PL'].elements['all'].checked = false;
|
||||
</script>
|
||||
<td>##Name##</td>
|
||||
<td style="width: 50px;">##Duration##</td>
|
||||
<td style="width: 200px">##Title##</td>
|
||||
<td> ##Duration##</td>
|
||||
<td style="width: 200px">##Artist##</td>
|
||||
<td style="width: 35px;">##Type##</td>
|
||||
<td style="width: 35px; border: 0">##Move##</td>
|
||||
<td style="width: 30px;">##Type##</td>
|
||||
<td style="width: 30px; border: 0">##Move##</td>
|
||||
</tr>
|
||||
<!-- end repeat after 14 columns -->
|
||||
</table>
|
||||
|
||||
|
||||
<div id="draglist_container">
|
||||
|
||||
{foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
|
||||
<!-- start item -->
|
||||
<div style="position: relative; left: 0px; top: 0px;">
|
||||
{foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
|
||||
<!-- {$n++} -->
|
||||
|
||||
<table style="width: 574px;">
|
||||
<!-- fade information -->
|
||||
<tr onClick="return contextmenu('{$i.attrs.id}', {if $n == 1}'PL.changeFadeIn'{else}'PL.changeTransition'{/if})" style="background-color: #bbb">
|
||||
<td style="width: 30px"></td>
|
||||
<td></td>
|
||||
<td colspan="5" style="border: 0; cursor: pointer">##Fade## {$i.fadein_ms|string_format:"%d"} ms</td>
|
||||
</tr>
|
||||
<!-- end fade information -->
|
||||
|
||||
<!-- clip information -->
|
||||
<tr class="{cycle values='blue1, blue2'}">
|
||||
<td style="width: 30px"><input type="checkbox" class="checkbox" name="{$i.attrs.id}"/></td>
|
||||
<td><input type="checkbox" class="checkbox" name="{$i.attrs.id}"/></td>
|
||||
<td {include file="playlist/actionhandler.tpl"}>{$i.title}</td>
|
||||
<td style="width: 50px;" {include file="playlist/actionhandler.tpl"} style="text-align: right">
|
||||
<td {include file="playlist/actionhandler.tpl"} style="text-align: right">
|
||||
{assign var="_duration" value=$i.duration}{niceTime in=$_duration}
|
||||
</td>
|
||||
<td style="width: 200px" {include file="playlist/actionhandler.tpl"}>{$i.creator}</td>
|
||||
<td style="width: 35px" {include file="playlist/actionhandler.tpl"}>
|
||||
<td {include file="playlist/actionhandler.tpl"}>{$i.creator}</td>
|
||||
<td {include file="playlist/actionhandler.tpl"}>
|
||||
<img src="img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {include file="sub/mouseover.tpl"} />
|
||||
</td>
|
||||
<td style="width: 35px; border: 0">
|
||||
<td style="border: 0">
|
||||
<a href="#" onClick="hpopup('{$UI_HANDLER}?act=PL.moveItem&id={$i.attrs.id}&pos={$pos-1}')"><img src="img/bt_top_xsm.png" alt="##move up##" vspace=1 hspace=1/></a>
|
||||
<a href="#" onClick="hpopup('{$UI_HANDLER}?act=PL.moveItem&id={$i.attrs.id}&pos={$pos+1}')"><img src="img/bt_bottom_xsm.png" alt="##move down##" vspace=1 hspace=1/></a>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- end clip information -->
|
||||
</table>
|
||||
|
||||
<input type="hidden" name="pl_items[{$i.attrs.id}]">
|
||||
</div>
|
||||
<!-- end item -->
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
<table style="width: 574px;">
|
||||
{if $n}
|
||||
<!-- last item fadeout information -->
|
||||
<!-- fade information -->
|
||||
<tr onClick="return contextmenu('{$i.attrs.id}', {if $n == 1}'PL.changeFadeIn'{else}'PL.changeFadeOut'{/if})" style="background-color: #bbb">
|
||||
<td style="width: 30px"></td>
|
||||
<td style="border: 0; cursor: pointer">##Fade## {$i.fadeout_ms|string_format:"%d"} ms</td>
|
||||
<td></td>
|
||||
<td colspan="5" style="border: 0; cursor: pointer">##Fade## {$i.fadeout_ms|string_format:"%d"} ms</td>
|
||||
</tr>
|
||||
{else}
|
||||
<!-- empty playlist -->
|
||||
<tr class="{cycle values='blue1, blue2'}">
|
||||
<td style="border: 0" colspan="6" align="center">##No Entry##</td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
|
||||
<!-- end item -->
|
||||
</form>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="footer" style="width: 569px;">
|
||||
<input type="button" class="button_large" onClick="collector_submit('PL', '0&popup[]=PL.changeAllTransitions', '{$UI_BROWSER}', 'chgAllTrans', 400, 150)" value="##Change Fades##" />
|
||||
<input type="button" class="button_large" onClick="collector_submit('PL', 'PL.removeItem')" value="##Remove Selected##" />
|
||||
<input type="button" class="button_large" onClick="collector_clearAll('PL', 'PL.removeItem')" value="##Clear Playlist##" />
|
||||
</div>
|
||||
|
||||
<div class="container_button">
|
||||
<input type="button" class="button_large" value="##Save Playlist##" onClick="hpopup('{$UI_HANDLER}?act=PL.save')">
|
||||
<input type="button" class="button_large" value="##Revert to Saved##" onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmRevert', 'PL.revertChanges', 400, 50)">
|
||||
<input type="button" class="button_large" value="##Delete Playlist##" onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmDelete', 'PL.deleteActive', 400, 50)">
|
||||
</div>
|
||||
|
||||
<div class="container_button">
|
||||
<INPUT TYPE="button" class="button_large" VALUE="##Save Reorder##" onClick="javascript:draglist_manager.do_submit('PL','draglist_container')">
|
||||
{if $UI_PL_DRAG_ENABLED}
|
||||
<input type="button" class="button_large" value="##Reorder Playlist##" onClick="popup('{$UI_BROWSER}?popup[]=PL.arrangeItems', 'PL.arrangeItems', 533, 600)">
|
||||
{/if}
|
||||
<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" value="##Description##" onClick="location.href='{$UI_BROWSER}?act=PL.editMetaData'">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- end playlist editor -->
|
||||
|
||||
{assign var="_duration" value=null}
|
||||
|
||||
<script language="JavaScript" src="assets/dom-drag.js" type="text/javascript"></script>
|
||||
<script language="JavaScript" src="assets/draglist.js" type="text/javascript"></script>
|
||||
|
||||
<script language="JavaScript">
|
||||
|
||||
// a bit ugly. draglist.js assumes the existence of a global
|
||||
// dragListIndex array.
|
||||
|
||||
var dragListIndex = new Array();
|
||||
|
||||
// manager classes.
|
||||
|
||||
draglist_manager = new fv_dragList('draglist_container');
|
||||
|
||||
// queries all top level <divs> under the draglist_container
|
||||
// div and sets up dragging.
|
||||
|
||||
draglist_manager.setup();
|
||||
|
||||
// queries all top level <span>'s under the draglist_container_horz
|
||||
// div and sets up horizontal dragging.
|
||||
|
||||
|
||||
// addes the newly created dragList to the list of draglists on
|
||||
// the page (i.e. we can have more than one on a page)
|
||||
|
||||
addDragList( draglist_manager );
|
||||
|
||||
</script>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<script type="text/javascript">
|
||||
document.forms['PL'].elements['all'].checked = false;
|
||||
</script>
|
||||
<td>##Name##</td>
|
||||
<td>##Title##</td>
|
||||
<td style="width: 50px;">##Duration##</td>
|
||||
<td style="width: 200px">##Artist##</td>
|
||||
<td style="width: 35px;">##Type##</td>
|
||||
|
|
|
|||
96
livesupport/modules/htmlUI/var/templates/popup/PLAYLIST.arrangeItems.tpl
Executable file
96
livesupport/modules/htmlUI/var/templates/popup/PLAYLIST.arrangeItems.tpl
Executable file
|
|
@ -0,0 +1,96 @@
|
|||
{include file="popup/header.tpl"}
|
||||
{include file="script/alttext.js.tpl"}
|
||||
|
||||
<div class="container_elements" style="width: 500px">
|
||||
<div>
|
||||
<div style="float: left;"><h1>##Reorder Playlist## </h1></div>
|
||||
<div style="float: right;"><h1>{$PL->title} {getHour time=$PL->duration}##h## {getMinute time=$PL->duration}##m## {getSecond time=$PL->duration}##s##</h1></div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
{$UI_PL_DRAG_INTRO}
|
||||
|
||||
<form name="PL" action="{$UI_HANDLER}">
|
||||
<input type="hidden" name="act" value="PL.reArrange">
|
||||
<div>
|
||||
<table style="width: 500px;">
|
||||
<tr class="blue_head">
|
||||
<td>##Title##</td>
|
||||
<td style="width: 50px;">##Duration##</td>
|
||||
<td style="width: 150px">##Artist##</td>
|
||||
<td style="width: 35px; border:0">##Type##</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div id="draglist_container">
|
||||
|
||||
{foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
|
||||
<!-- start item -->
|
||||
<div style="position: relative; left: 0px; top: 0px;">
|
||||
<!-- {$n++} -->
|
||||
|
||||
<table style="width: 500px;">
|
||||
<!-- clip information -->
|
||||
<tr><td style="border:0" colspan="5"></tr>
|
||||
<tr class="blue1">
|
||||
<td>{$i.title}</td>
|
||||
<td style="width: 50px;">{assign var="_duration" value=$i.duration}{niceTime in=$_duration}</td>
|
||||
<td style="width: 150px">{$i.creator}</td>
|
||||
<td style="width: 35px; border:0"><img src="img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {include file="sub/mouseover.tpl"} /></td>
|
||||
</tr>
|
||||
<!-- end clip information -->
|
||||
</table>
|
||||
|
||||
<input type="hidden" name="pl_items[{$i.attrs.id}]">
|
||||
</div>
|
||||
<!-- end item -->
|
||||
{/foreach}
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div style="width: 500px;">
|
||||
<div style="float: left;"><input type="button" class="button_large" value="##Cancel##" onClick="window.close()"> </div>
|
||||
<div style="float: right;"><INPUT TYPE="button" class="button_large" VALUE="##Save Reorder##" onClick="javascript:draglist_manager.do_submit('PL','draglist_container')"></div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
{assign var="_duration" value=null}
|
||||
|
||||
<script language="JavaScript" src="assets/dom-drag.js" type="text/javascript"></script>
|
||||
<script language="JavaScript" src="assets/draglist.js" type="text/javascript"></script>
|
||||
|
||||
<script language="JavaScript">
|
||||
|
||||
// a bit ugly. draglist.js assumes the existence of a global
|
||||
// dragListIndex array.
|
||||
|
||||
var dragListIndex = new Array();
|
||||
|
||||
// manager classes.
|
||||
|
||||
draglist_manager = new fv_dragList('draglist_container');
|
||||
|
||||
// queries all top level <divs> under the draglist_container
|
||||
// div and sets up dragging.
|
||||
|
||||
draglist_manager.setup();
|
||||
|
||||
// queries all top level <span>'s under the draglist_container_horz
|
||||
// div and sets up horizontal dragging.
|
||||
|
||||
|
||||
// addes the newly created dragList to the list of draglists on
|
||||
// the page (i.e. we can have more than one on a page)
|
||||
|
||||
addDragList( draglist_manager );
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue