Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

drag & drop for playlisteditor

Browse source
This commit is contained in:
sebastian 2005-08-01 22:57:43 +00:00
parent 49f5cb85fa
commit f7745e6f59
5 changed files with 192 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

4
livesupport/modules/htmlUI/var/html/ui_browser.php
View file

@ -87,6 +87,10 @@ if (is_array($_REQUEST['popup'])){
$Smarty->display('popup/PLAYLIST.confirmRelease.tpl'); $Smarty->display('popup/PLAYLIST.confirmRelease.tpl');
break; break;
case "PL.arrangeItems":
$Smarty->display('popup/PLAYLIST.arrangeItems.tpl');
break;
case "SCHEDULER.addItem": case "SCHEDULER.addItem":
$Smarty->display('popup/SCHEDULER.addItem.tpl'); $Smarty->display('popup/SCHEDULER.addItem.tpl');
break; break;

5
livesupport/modules/htmlUI/var/html/ui_handler.php
View file

@ -231,6 +231,11 @@ switch($_REQUEST['act']){
$uiHandler->PLAYLIST->setReturn(); $uiHandler->PLAYLIST->setReturn();
break; break;
case "PL.reArrange":
$uiHandler->PLAYLIST->reOrder($_REQUEST['pl_items']);
$uiHandler->PLAYLIST->setReload();
break;
case "PL.editMetaData": case "PL.editMetaData":
$uiHandler->PLAYLIST->editMetaData($_REQUEST); $uiHandler->PLAYLIST->editMetaData($_REQUEST);
$uiHandler->SCRATCHPAD->addItem($_REQUEST['id']); $uiHandler->SCRATCHPAD->addItem($_REQUEST['id']);

101
livesupport/modules/htmlUI/var/templates/playlist/editor.tpl
View file

@ -1,3 +1,4 @@
<!-- start playlist editor -->
<div class="container_elements" style="width: 607px;"> <div class="container_elements" style="width: 607px;">
<div style="width: 574px;"> <div style="width: 574px;">
@ -10,136 +11,80 @@
<div class="right">&nbsp;</div> <div class="right">&nbsp;</div>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
</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;"> <div class="container_table" style="width: 594px;">
<table style="width: 574px;"> <table style="width: 574px;">
<form name="PL">
<!-- start repeat after 14 columns --> <!-- start repeat after 14 columns -->
<tr class="blue_head"> <tr class="blue_head">
<td style="width: 30px"><input type="checkbox" name="all" onClick="collector_switchAll('PL')"></td> <td style="width: 30px"><input type="checkbox" name="all" onClick="collector_switchAll('PL')"></td>
<script type="text/javascript"> <script type="text/javascript">
document.forms['PL'].elements['all'].checked = false; document.forms['PL'].elements['all'].checked = false;
</script> </script>
<td>##Name##</td> <td style="width: 200px">##Title##</td>
<td style="width: 50px;">##Duration##</td> <td> ##Duration##</td>
<td style="width: 200px">##Artist##</td> <td style="width: 200px">##Artist##</td>
<td style="width: 35px;">##Type##</td> <td style="width: 30px;">##Type##</td>
<td style="width: 35px; border: 0">##Move##</td> <td style="width: 30px; border: 0">##Move##</td>
</tr> </tr>
<!-- end repeat after 14 columns --> <!-- end repeat after 14 columns -->
</table>
<div id="draglist_container">
{foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
<!-- start item --> <!-- start item -->
<div style="position: relative; left: 0px; top: 0px;"> {foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
<!-- {$n++} --> <!-- {$n++} -->
<table style="width: 574px;">
<!-- fade information --> <!-- fade information -->
<tr onClick="return contextmenu('{$i.attrs.id}', {if $n == 1}'PL.changeFadeIn'{else}'PL.changeTransition'{/if})" style="background-color: #bbb"> <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> <td colspan="5" style="border: 0; cursor: pointer">##Fade## {$i.fadein_ms|string_format:"%d"} ms</td>
</tr> </tr>
<!-- end fade information -->
<!-- clip information -->
<tr class="{cycle values='blue1, blue2'}"> <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 {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} {assign var="_duration" value=$i.duration}{niceTime in=$_duration}
</td> </td>
<td style="width: 200px" {include file="playlist/actionhandler.tpl"}>{$i.creator}</td> <td {include file="playlist/actionhandler.tpl"}>{$i.creator}</td>
<td style="width: 35px" {include file="playlist/actionhandler.tpl"}> <td {include file="playlist/actionhandler.tpl"}>
<img src="img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {include file="sub/mouseover.tpl"} /> <img src="img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {include file="sub/mouseover.tpl"} />
</td> </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_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> <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> </td>
</tr> </tr>
<!-- end clip information -->
</table>
<input type="hidden" name="pl_items[{$i.attrs.id}]">
</div>
<!-- end item -->
{/foreach} {/foreach}
</div>
<table style="width: 574px;">
{if $n} {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"> <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></td>
<td style="border: 0; cursor: pointer">##Fade## {$i.fadeout_ms|string_format:"%d"} ms</td> <td colspan="5" style="border: 0; cursor: pointer">##Fade## {$i.fadeout_ms|string_format:"%d"} ms</td>
</tr> </tr>
{else} {else}
<!-- empty playlist -->
<tr class="{cycle values='blue1, blue2'}"> <tr class="{cycle values='blue1, blue2'}">
<td style="border: 0" colspan="6" align="center">##No Entry##</td> <td style="border: 0" colspan="6" align="center">##No Entry##</td>
</tr> </tr>
{/if} {/if}
<!-- end item -->
</form>
</table> </table>
</div> </div>
<div class="footer" style="width: 569px;"> <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', '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_submit('PL', 'PL.removeItem')" value="##Remove Selected##" />
<input type="button" class="button_large" onClick="collector_clearAll('PL', 'PL.removeItem')" value="##Clear Playlist##" /> <input type="button" class="button_large" onClick="collector_clearAll('PL', 'PL.removeItem')" value="##Clear Playlist##" />
</div> </div>
<div class="container_button"> <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="##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="##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)"> <input type="button" class="button_large" value="##Delete Playlist##" onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmDelete', 'PL.deleteActive', 400, 50)">
</div> </div>
<div class="container_button"> <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="##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'"> <input type="button" class="button_large" value="##Description##" onClick="location.href='{$UI_BROWSER}?act=PL.editMetaData'">
</div> </div>
</form>
</div> </div>
<!-- end playlist editor -->
{assign var="_duration" value=null} {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>

2
livesupport/modules/htmlUI/var/templates/playlist/editor_dragitem.tpl
View file

@ -23,7 +23,7 @@
<script type="text/javascript"> <script type="text/javascript">
document.forms['PL'].elements['all'].checked = false; document.forms['PL'].elements['all'].checked = false;
</script> </script>
<td>##Name##</td> <td>##Title##</td>
<td style="width: 50px;">##Duration##</td> <td style="width: 50px;">##Duration##</td>
<td style="width: 200px">##Artist##</td> <td style="width: 200px">##Artist##</td>
<td style="width: 35px;">##Type##</td> <td style="width: 35px;">##Type##</td>

96
livesupport/modules/htmlUI/var/templates/popup/PLAYLIST.arrangeItems.tpl Executable file
View 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} &nbsp; {getHour time=$PL->duration}##h##&nbsp;{getMinute time=$PL->duration}##m##&nbsp;{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>