Moving the bootstrap jquery-ui script to another directory...

With:

http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/2-sm-other-demo.html

select:

var scripts = document.getElementsByTagName( "script" );
scripts

2:

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="effect" src="../ui/effect.js"></script>

3:

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="demos" src="../ui/demos.js"></script>

var script = scripts[ scripts.length - 1];
script
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="urijs/SecondLevelDomains" src="../ui/../../urijs/src//SecondLevelDomains.js">



var pathParts = window.location.pathname.split( "/" );
undefined
pathParts[ pathParts.length - 2 ]
"demos"

With:

http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/dialog/1-sm-other-demo.html

var scripts = document.getElementsByTagName( "script" );

scripts

2:

"http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/ui/effect.js
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="effect" src="../../ui/effect.js"></script>

3:

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="widgets/dialog" src="../../ui/widgets/dialog.js"></script>

var pathParts = window.location.pathname.split( "/" );
pathParts[ pathParts.length - 2 ]
"dialog"


+++++++++++++++++++

http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/2-sm-other-demo.html

Fixed!

https://gist.github.com/bshambaugh/8419ecc245385735e9e6ea15178f3412

2-sm-other-demo.html

https://gist.github.com/bshambaugh/6f0fbf50041edd4017554d34d0bf8096

2-bootstrap.js

+++++++++++++++++++++
Or in the top-level directory: Node-Arc-D3:

http://localhost/cp-bc-node-arc-d3/node-arc-d3/1-sm-other-demo.html
1-sm-other-demo.html
https://gist.github.com/bshambaugh/a2163d8e9d1fa1ff84cc1e01339ad640


http://localhost/cp-bc-node-arc-d3/node-arc-d3/1-bootstrap.js
1-bootstrap.js

https://gist.github.com/bshambaugh/f526fe3d1267bd7c5e073c947dec0a0c

1st Stages of Exploring Sigma.js for use with RDF data

Use case: make graphs zoomable to deal with increased complexity


Provided in Sigma.js by camera. It is in the basic example.
https://github.com/jacomyal/sigma.js/blob/master/examples/basic.html

Use case: I need curved edges to allow multiple connections between nodes.

https://github.com/jacomyal/sigma.js/blob/master/examples/plugin-edgeDots.html

Use case: different shapes for different classes in an ontology, or things like ldp:containers.

https://github.com/jacomyal/sigma.js/blob/master/examples/plugin-customShapes.html

Compare to: https://www.w3.org/2001/11/IsaViz/gss/gssmanual.html
(gss:shape)

Use case: use custom edges to label uni-directional and bi-directional relationships:

https://github.com/jacomyal/sigma.js/blob/master/examples/plugin-customEdgeShapes.html

Example (directed relationships in REA/OVN-like ontology):

Load external JSON file in Sigma.JS (modify this to deal with RDF data)
https://github.com/jacomyal/sigma.js/blob/master/examples/load-external-json.html
(see mailing list)

See these locally in:
/var/www/html/sigma.js/examples

Boundaries Make Use of the Map function in D3

Following the jsfiddle for boundaries in d3.js:
http://jsfiddle.net/yeQS2/114/


I am using the map function
https://stackoverflow.com/questions/16058791/d3-js-how-to-use-map-function

the link the to d3 documentation does not work, but browsing gives:
https://github.com/d3/d3-collection/blob/master/README.md#map

Node ARC D3 working with JQuery-UI

getting jquery-ui to work with require and other functions

sm-other-demo.html

---------------------------------------------------------

<!-- Based off of draggable.html accompanying chapter12:
                <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
-->

<!DOCTYPE html>
<html>
  <head>
     <link rel = "stylesheet" type="text/css" href="style.css">     
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" orientation="portrait">
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<!--     <link rel="stylesheet" href="http://localhost/test/sites/all/modules/jquery_update/replace/ui/themes/base/jquery-ui.css"> -->
     <link rel="stylesheet" href="./index-adid-strip-button.css">
           <script src="../../external/requirejs/require.js"></script>
        <script src="../bootstrap.js" data-modules="effect">
require(['isthebest'], function(isthebest) {

$( function() {
    var dialog, form,
      name = $( "#name" );

    function addUser() {

   //   var siteDomain = "http://localhost:8080/marmotta/sparql?query=";
      
//    $( "#users" ).append( name.val() );  
// I only want to append if name.val() ) resolves... (so I need to do an xmlhttp request...)
    $("#duck").append( d3sketch(name.val()) );

   //   $( "#users" ).append( siteDomain + encodeURIComponent(name.val()) );
        dialog.dialog( "close" );
    }
 
    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 220,
      width: 285,
      modal: true,
      buttons: {
        "Execute": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });
 
    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });
 
    $( "#create-user" ).button().on( "click", function() {
      dialog.dialog( "open" );
    });
 
    $("#loadfileldpbutton").button().on("click", function() {
      //  alert("howdy");
          var $field = $('#textfield');
          var fieldVal = $field.val();
          alert(fieldVal);

          if(fieldVal) {
          
             // erase the present contents of the duck container
             var container = document.getElementById('duck');
             container.innerHTMl = '';
             // add new content to the duck container
//              $('#duck').append(fieldVal);
              $('#duck').append(isthebest(fieldVal));
//              $('#duck').append(d3sketch(fieldVal));  
          // $('#tasklist').replaceWith(d3sketch(fieldVal));
           $field.val('');
           $field.focus();
          }
    });

/*
    function isthebest(value) {
        return value+" is the best!";
    }
*/
/*
     $( "#loadfileldpbutton" ).button().on( "click", function() {
         var $field = $('#textfield');
         var fieldVal = $field.val();
         if(fieldVal) {
           // erase the present contents of the duck container
           var container = document.getElementById('duck');
           container.innerHTML = '';
           // add new content to the duck container via the tasklist id
           $('#tasklist').replaceWith(d3sketch(fieldVal));
           $field.val('');
           $field.focus();
         }  
    });
*/

  } );

});
  </script>

<!--end McFarland's book -->
 </head>
<body>
  
<!-- Modified McFarland Book code -->

<div id="dialog-form" title="SPARQL Endpoint">

  <form>
    <fieldset>
      <label for="name">Do your SPARQL Query here:</label>
      <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>


<div class="wrapper">

  <div style="background-color:#EEEEEE" class="box a">
     <button id="create-user">SPARQL Endpoint</button> 
<!--   <input name="button" type="button" id="create-user" value="SPARQL Endpoint"> -->
   <input name="textfield" type="text" id="textfield">
   <button id="loadfileldpbutton">Load File / LDP Container</button>
<!--   <input name="button" type="button" id="button" value="Load File / LDP Container"> -->
<!--
<div style="width:100px"> --> <!-- for now this will set the width of the text field. I need to work  -->
<!--
   <input type="text" name="name" id="loadfileldptext" value="miserables.json" class="text ui-widget-content ui-corner-all"> 
</div>
-->
</div>
  <div class="box b">
    <div class="box ba">BA</div>
    <div class="box bb">BB</div>
  </div>
  <div class="box c" id="duck">
<!--
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// var file = "miserables.json";

//d3sketch(file);

</script>
-->

  </div>
  <div class="box d">
     <div class="box da" id="users">DA</div>
     <div class="box db">DB</div>
  </div>
</div>



</body>
</html>

----------------------------------------------------

bootstrap.js (modified from node modules folder)

---------------

 /* globals window, document */
( function() {

// Find the script element
var scripts = document.getElementsByTagName( "script" );
var script = scripts[ scripts.length - 1 ];

// Read the modules
var modules = script.getAttribute( "data-modules" );
var composite = script.getAttribute( "data-composite" ) || false;
var pathParts = window.location.pathname.split( "/" );
var effectsAll = [
 "effects/effect-blind",
 "effects/effect-bounce",
 "effects/effect-clip",
 "effects/effect-drop",
 "effects/effect-explode",
 "effects/effect-fade",
 "effects/effect-fold",
 "effects/effect-highlight",
 "effects/effect-puff",
 "effects/effect-pulsate",
 "effects/effect-scale",
 "effects/effect-shake",
 "effects/effect-size",
 "effects/effect-slide",
 "effects/effect-transfer"
];
var widgets = [
 "accordion",
 "autocomplete",
 "button",
 "checkboxradio",
 "controlgroup",
 "datepicker",
 "dialog",
 "draggable",
 "droppable",
 "menu",
 "mouse",
 "progressbar",
 "resizable",
 "selectable",
 "selectmenu",
 "slider",
 "sortable",
 "spinner",
 "tabs",
 "tooltip"
];

function getPath( module ) {
 for ( var i = 0; i < widgets.length; i++ ) {
  if ( widgets[ i ] === module ) {
   return "widgets/" + module;
  }
 }
 for ( var j = 0; j < effectsAll.length; j++ ) {
  if ( module !== "effect" ) {
   if ( effectsAll[ j ] === module ) {
    return module;
   }
   if ( effectsAll[ j ].indexOf( module ) !== -1 ) {
    return "effects/" + module;
   }
  }
 }
 return module;
}
function fixPaths( modules ) {
 for ( var i = 0; i < modules.length; i++ ) {
  modules[ i ] = getPath( modules[ i ] );
 }
 return modules;
}

// Hide the page while things are loading to prevent a FOUC
document.documentElement.className = "demo-loading";

require.config( {
 baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui",
 paths: {
  jquery: "../external/jquery/jquery",
  external: "../external/",
                d3sketch: "../demos/d3sketch",
                d3: "../demos/d3.v4.min",
                isthebest: "../demos/isthebest"
             //   d3: "../../d3/build/d3"
 },
 shim: {
  "external/globalize/globalize.culture.de-DE": [ "external/globalize/globalize" ],
  "external/globalize/globalize.culture.ja-JP": [ "external/globalize/globalize" ]
 }
} );

// Replace effects all shortcut modules with all the effects modules
if ( modules && modules.indexOf( "effects-all" ) !== -1 ) {
 modules = modules.replace( /effects-all/, effectsAll.join( " " ) );
}

modules = modules ? modules.replace( /^\s+|\s+$/g, "" ).split( /\s+/ ) : [];
if ( !composite ) {
 modules.push( pathParts[ pathParts.length - 2 ] );
}
modules = fixPaths( modules );

// pull in d3sketch into the modules array so that it is available to the scripts
modules.push('d3');
modules.push('d3sketch');

require( modules, function() {
 var newScript = document.createElement( "script" );

 document.documentElement.className = "";

 newScript.text = "( function() { " + script.innerHTML + " } )();";
 document.body.appendChild( newScript ).parentNode.removeChild( newScript );
} );

} )();

--------------------------------------

 isthebest.js

-------------------------------------- 

define([], function () {

return function(value) {
  return value+" is great for you!";
}

});

 =================

modify isthebest.js to show the d3 object

+++++++++++++++++++++++++++

define(['d3'], function (d3) {

return function(value) {
  var stringcheese = JSON.stringify(d3);
  return stringcheese+value+" is great for you!";
}

});


-------------------

error: d3 sketch is not defined...
 

Steps to add jquery-ui to node-arc-d3 (working draft)

$ git clone https://github.com/bshambaugh/node-arc-d3.git
$ cd node-arc-d3
$ git checkout -b btc-setup
$ npm init
$ npm install --save d3 jquery jsonld lodash n3 requirejs urijs jquery-ui
$ cd src
View the source:
$ cat index.html

Test the source in the browser:
http://localhost/bc-node-arc-d3/node-arc-d3/src/

In the browser:
http://localhost/bc-node-arc-d3/node-arc-d3/src/data/

In the data window:
http://localhost/bc-node-arc-d3/node-arc-d3/src/data/old-Food-Growing-Methods.ttl

Press the "Load File / LDP Container" Button

Edit the source:
$ vim index.html

Add right below the <body> tag:
<script src="../node_modules/jquery-ui/demos/bootstrap.js">
$("#resizable").resizable({
     handles: "se"
});
</script>

....
  <div class="box d">
     <div class="box da">DA<textarea id="resizable" rows="5" cols="20"></textarea></div>
     <div class="box db">DB</div>
  </div>
.....
// This causes the rest of the code to fail even though I do get a resizable text box

Notes about jQuery-UI (july 19)

Make sure that the jquery-ui object is loaded by using the DOM inspector.
https://learn.jquery.com/jquery-ui/environments/amd/
http://www.requirejs.org/jqueryui-amd/example/webapp/app.html
https://gist.github.com/diestrin/8509552
http://hippieitgeek.blogspot.com/2013/07/load-jquery-ui-with-requirejs.html
http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/
http://blog.dbain.com/2016/02/using-requirejs-to-load-jquery-ui-from.html
 (use the above examples)