<?xml version="1.0" encoding="UTF-8"?>
<page>
<config>
<stylesheet>
https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css
</stylesheet>
<!---->
<javascript>
https://code.jquery.com/jquery-1.10.2.js
</javascript>
<!---->
<pgExtFiles>
<![CDATA[
{ file_url : "https://code.jquery.com/ui/1.11.4/jquery-ui.js",
opt : "load",
special : false,
loadAsScript : true,
unloadScriptDelay : "",
notifyOnLoad : "FieldToSort" }
]]>
</pgExtFiles>
</config>
<pg1_1>
<!---->
<pgStyleObject>
<![CDATA[
{ theStyle : "borderRadius, boxShadow",
propVal : "30px, 0px 0px 42px 24px #5AC1EA inset" }
]]>
</pgStyleObject>
</pg1_1>
<Description>
<htmlText>
<![CDATA[
<span style="color:blue;"><b>ON LOAD PAGE . . .</b></span><br />
All CSS and JS dependencies are loaded from XML file.
HTML is inserted into this field from XML using <span style="color:rgb(0, 156, 0);">XMLHttpRequest()</span>.<br />
Last JS dependency in <span style="color:rgb(184,0,0);">XML sends user event</span> to the this field
to initialize the sortable plugin.
]]>
</htmlText>
<pgStyleObject>
<![CDATA[
{ theStyle : "height, width, paddingBottom",
propVal : "auto, auto, 4px" }
]]>
</pgStyleObject>
</Description>
<FieldToSort>
<!---->
<pgTBObjSet>
<![CDATA[
{ myProperty : "visible",
myValue : false }
]]>
</pgTBObjSet>
<htmlText>
<![CDATA[
<p>
Click to view
<!---->
<a href='#' onclick="parent.tbfunction_pgGotoURL('pgDocs', 'https://jqueryui.com/sortable/#default');">
jQuery Sortable Documentation on the Web</a>.
</p>
<p style="margin: 10px 0 3px 0;">
<span style="color:blue;"><b>Reorder the items</b> in the list below by dragging
them to their correct positions:</span>
</p>
<ul id='sortable' style="cursor:pointer; line-height:2.0em;">
<li id="it_5" class='ui-state-default'>Item 5</li>
<li id="it_2" class='ui-state-default'>Item 2</li>
<li id="it_7" class='ui-state-default'>Item 7</li>
<li id="it_1" class='ui-state-default'>Item 1</li>
<li id="it_6" class='ui-state-default'>Item 6</li>
<li id="it_3" class='ui-state-default'>Item 3</li>
<li id="it_4" class='ui-state-default'>Item 4</li>
</ul>
<p style='margin:8px 0;'>
I went with the jQuery sortable plugin from the UI library. It works much better than the others as far as
ToolBook projects are concerned and has nice support for update notification. You should probably use a
custom stylesheet to get exactly the right look. THIS IS VERY NICE!!
</p>
<p style='margin-top:8px;'>
A user event is sent to this field after each sorting attempt. The [value] parameter contains the
current sort order as a comma-separated stack of numbers.
</p>
]]>
</htmlText>
<pgStyleObject>
<![CDATA[
{ theStyle : "height, border, borderRadius, padding, textAlign",
propVal : "auto, 2px solid blue, 18px, 10px, left" }
]]>
</pgStyleObject>
</FieldToSort>
<pageScript>
<![CDATA[
var fct = function() {
try {
var L = getToolBookFrame().document.getElementById('sortable');
L.style.listStyleType = 'none';
L.style.padding = '0px';
L.style.margin = '0px';
var $ = getToolBookFrame().$;
$('#sortable').sortable({ stop : function(e, ui) {
var objs = gTBo('FieldToSort', 'objRef').getElementsByTagName('li'), rtn = [];
for (var i = 0; i < objs.length; i++) {
rtn[i] = objs[i].id.split('_')[1]; //Put integer portion of object id in array
}
rtn = rtn.join(',');
if (rtn == '1,2,3,4,5,6,7') {
$('#sortable').sortable('disable');
$('#sortable').css('cursor', '');
}
tbfunction_pgTBObjSet('FieldToSort', 'user', rtn, 25);
} });
$('#sortable').disableSelection();
} catch(e) {
setTimeout(fct, 100);
}
}
fct();
]]>
</pageScript>
<config2>
<exeJavascriptDirect>
<![CDATA[
var t, h;
t = tbfunction_pgTBObjGet("FieldToSort", "top") - 8;
h = tbfunction_pgTBObjGet("Description", "height");
tbfunction_pgTBObjSet("Description", "top", t - h);
]]>
</exeJavascriptDirect>
</config2>
</page>