<?xml version="1.0" encoding="UTF-8"?>
<page>
  <config>
    <stylesheet>
      https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css
    </stylesheet>
    
    <!--Alternate way to load javascript is simply reference the url (relative or absolute paths)-->
    <javascript>
      https://code.jquery.com/jquery-1.10.2.js
    </javascript>
    
    <!--Loading javascript with more control and notification ... often the preferred way-->
    <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>
    <!--Add gradient shadow to ToolBook background object-->
    <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>
    <!--Hide field until everything has initialized-->
    <pgTBObjSet>
      <![CDATA[
        { myProperty : "visible",
          myValue    : false } 
      ]]>
    </pgTBObjSet>
    <htmlText>      
      <![CDATA[
        <p>
          Click to view 
            <!--Using PowerPac pgGotoURL to open link 
                because href property doesn't work well in any version of IE-->
            <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[
      //Executed when notification is sent indicating all page elements loaded and ready
      var fct = function() {
        try {
          var L = getToolBookFrame().document.getElementById('sortable');
          L.style.listStyleType = 'none';
          L.style.padding = '0px';
          L.style.margin = '0px';
      
          var $ = getToolBookFrame().$;
          //Initialize sortable on <li> elements and set up a callback user event with current order of elements
          $('#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') {
                                                //Remove sortable feature when all are correct OR on some other condition
                                                $('#sortable').sortable('disable');
                                                $('#sortable').css('cursor', ''); //Same as next line
                                                //ui.item[0].parentNode.style.cursor = '';
                                              }                                               
                                              tbfunction_pgTBObjSet('FieldToSort', 'user', rtn, 25); //Send user event with comma separated order
                                           } });
          $('#sortable').disableSelection();
        } catch(e) {
          setTimeout(fct, 100); //Keep trying until all external dependencies have freshened into the DOM
        }
      }
      fct();
    ]]>
  </pageScript>
  <config2>
    <exeJavascriptDirect>
      <![CDATA[
        //Make sure this field is positioned 10px from top of "FieldToSort"
        var t, h;
        t = tbfunction_pgTBObjGet("FieldToSort", "top") - 8;
        h = tbfunction_pgTBObjGet("Description", "height");
        tbfunction_pgTBObjSet("Description", "top", t - h);        
      ]]>
    </exeJavascriptDirect>    
  </config2>
</page>