dphelper 0.2.28 → 0.2.32

package/scripts/svg.js

@@ -0,0 +1,372 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+var description = {
+  "name" : "Realtime SVG",
+  "description" : "test",
+  "version" : "0.0.1",
+  "command" : "svg",
+  "subCommand" : [
+    {
+      "name":"check",
+      "description":"test"
+    },{
+      "name":"init",
+      "description":"test"
+    },{
+      "name":"update",
+      "description":"test"
+    },{
+      "name":"getCurve",
+      "description":"test"
+    },{
+      "name":"getIntersection",
+      "description":"test"
+    },{
+      "name":"setConnector",
+      "description":"test"
+    },{
+      "name":"removeConnection",
+      "description":"test"
+    },{
+      "name":"makeScrollable",
+      "description":"test"
+    },{
+      "name":"makeDraggable",
+      "description":"test"
+    },{
+      "name":"toggle",
+      "description":"test"
+    }
+  ],
+  "example" : "",
+  "author" : "Dario Passariello",
+  "active" : true
+};
+
+window.dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+window.dphelper.svg = {
+
+  check: () => {
+    if ( typeof window.dphelper.svg.check.supported == "undefined" ) {
+      let a = document.body.appendChild( document.createElement( 'div' ) );
+      a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
+      let b = a.firstChild;
+      b.style.behavior = "url(#default#VML)";
+      window.dphelper.svg.check.supported = b ? typeof b.adj == "object" : true;
+      a.parentNode.removeChild( a );
+    }
+    return window.dphelper.svg.check.supported;
+  },
+
+  init: function( container, source1, source2, cb ) {
+
+    if( $( container ).find( 'svg' ) ) {
+      window.dphelper.svg_removeConnection( container );
+    }
+
+    source1 = window.dphelper.svg.setConnector( source1[ 0 ], source1[ 1 ] );
+    source2 = window.dphelper.svg.setConnector( source2[ 0 ], source2[ 1 ] );
+
+    let parentCoords = container.getBoundingClientRect();
+
+    let xmlns = "http://www.w3.org/2000/svg";
+    let boxWidth = container.offsetWidth * 10;
+    let boxHeight = container.offsetHeight * 10;
+
+    // create svg container
+    let svgElem = document.createElementNS( xmlns, "svg" );
+
+    svgElem.setAttribute( "xmlns" , xmlns );
+    svgElem.setAttributeNS( null , "id" , "pathConnection" );
+    svgElem.setAttributeNS( null , "viewBox" , "0 0 " + boxWidth + " " + boxHeight );
+    svgElem.setAttributeNS( null , "width" , boxWidth );
+    svgElem.setAttributeNS( null , "height" , boxHeight );
+    svgElem.style.display = "block";
+
+    /*
+    // TO DO: smaller cyrcle
+    // DARIO: probably is too invasive on UI, I change just border on parts_container_
+
+    // create arrow
+      let defs = document.createElementNS(xmlns, "defs");
+      let marker = document.createElementNS(xmlns, "marker");
+      let path = document.createElementNS(xmlns, "path");
+      marker.setAttributeNS(null, 'id', 'head');
+      marker.setAttributeNS(null, 'orient', 'auto');
+      marker.setAttributeNS(null, 'markerWidth', '20');
+      marker.setAttributeNS(null, 'markerHeight', '40');
+      marker.setAttributeNS(null, 'refX', '0');
+      marker.setAttributeNS(null, 'refY', '3');
+      path.setAttributeNS(null, 'd', 'M0,0 V6 L3,3 Z');
+      marker.appendChild(path);
+      defs.appendChild(marker);
+      svgElem.appendChild(defs);
+    */
+
+    // create rect which overlaps source1
+    let rect1 = document.createElementNS( xmlns , "rect" );
+    let coords = source1.getBoundingClientRect();
+
+    rect1.setAttributeNS( null, 'x', coords.left - parentCoords.left );
+    rect1.setAttributeNS( null, 'y', coords.top - parentCoords.top );
+    rect1.setAttributeNS( null, 'width', coords.width );
+    rect1.setAttributeNS( null, 'height', coords.height );
+    svgElem.appendChild( rect1 );
+
+    // create rect which overlaps source2
+    let rect2 = document.createElementNS( xmlns, "rect" );
+    coords = source2.getBoundingClientRect();
+
+    rect2.setAttributeNS( null, 'x', coords.left - parentCoords.left );
+    rect2.setAttributeNS( null, 'y', coords.top - parentCoords.top );
+    rect2.setAttributeNS( null, 'width', coords.width );
+    rect2.setAttributeNS( null, 'height', coords.height );
+    svgElem.appendChild( rect2 );
+
+    // create path connecting both rects
+    let path = document.createElementNS( xmlns, "path" );
+
+    path.setAttributeNS( null, 'id', 'connection' );
+    path.setAttributeNS( null, 'marker-end', 'url(#head)' );
+    svgElem.appendChild( path );
+
+    container.appendChild( svgElem );
+
+    window.dphelper.svg.update( $( rect1 )[0], $( rect2 )[0], $( '#connection' )[0]);
+
+    if( typeof cb == 'function' ) {
+      cb( source1, source2 );
+    }
+
+  },
+
+  update: function( rect1 , rect2 , cxn ) {
+
+    // Top left coordinates
+    let x1 = parseFloat( rect1.getAttribute( 'x' ) );
+    let y1 = parseFloat( rect1.getAttribute( 'y' ) );
+    let x2 = parseFloat( rect2.getAttribute( 'x') );
+    let y2 = parseFloat( rect2.getAttribute( 'y' ) );
+
+    // Half widths and half heights
+    let w1 = parseFloat( rect1.getAttribute( 'width' ) ) / 2;
+    let h1 = parseFloat( rect1.getAttribute( 'height' ) ) / 2;
+    let w2 = parseFloat( rect2.getAttribute( 'width' ) ) / 2;
+    let h2 = parseFloat( rect2.getAttribute( 'height' ) ) / 2;
+
+    // Center coordinates
+    let cx1 = x1 + w1;
+    let cy1 = y1 + h1;
+    let cx2 = x2 + w2;
+    let cy2 = y2 + h2;
+
+    // Distance between centers
+    let dx = cx2 - cx1;
+    let dy = cy2 - cy1;
+
+    let p1 = window.dphelper.svg.getIntersection( dx , dy , cx1 , cy1 , w1 , h1 );
+    let p2 = window.dphelper.svg.getIntersection( -dx , -dy , cx2 , cy2 , w2 , h2 );
+
+    // Distance between edges
+    let dx1 = p2[ 0 ] - p1[ 0 ];
+
+    let d = window.dphelper.svg.getCurve( p1 , p2 , dx1 );
+
+    // Set a path connector
+    cxn.setAttributeNS( null , 'd' , "M" + cx1 + "," + cy1 + d + cx2 + "," + cy2 );
+
+    // Set a line connector
+    // cxn.setAttributeNS( null , 'x1' , p1[0] );
+    // cxn.setAttributeNS( null , 'y1' , p1[1] );
+    // cxn.setAttributeNS( null , 'x2' , p2[0] );
+    // cxn.setAttributeNS( null , 'y2' , p2[1] );
+
+  },
+
+  getCurve: function( p1 , p2 , dx ) {
+
+    let curve = dx / 2;
+    let d = " C" + ( curve + p1[0]  ) + "," + p1[1] + " " + ( p2[0] - curve ) + "," + p2[1] + " ";
+    return d;
+
+  },
+
+  getIntersection: function( dx , dy , cx , cy , w , h ) {
+
+    if ( Math.abs( dy / dx ) < h / w )
+      return [ cx + ( dx > 0 ? w : -w ), cy + dy * w / Math.abs( dx ) ];
+    else
+      return [ cx + dx * h / Math.abs( dy ), cy + ( dy > 0 ? h : -h ) ];
+
+  },
+
+  setConnector: function( source , side ) {
+
+    let style;
+    let span = $( '<span class="connector"></span>' );
+
+    $( source ).css( 'position' , 'relative' );
+
+    span.css({
+      position: 'absolute',
+      width: '5px',
+      height: '5px',
+    });
+
+    switch( side ) {
+      case 'top':
+        style = {
+          left: '50%',
+          top: '2.5px',
+          marginLeft: '2.5px'
+        };
+        break;
+      case 'right':
+        style = {
+          top: '50%',
+          right: '2.5px',
+          marginTop: '-2.5px'
+        };
+        break;
+      case 'bottom':
+        style = {
+          left: '50%',
+          bottom: '-2.5px',
+          marginLeft: '2.5px'
+        };
+        break;
+      case 'left':
+        style = {
+          top: '50%',
+          left: '-2.5px',
+          marginTop: '-2.5px'
+        };
+        break;
+      default:
+      style = {};
+    }
+
+    span.css( style );
+
+    $( source ).append( span );
+
+    return $( span )[ 0 ];
+  },
+
+  removeConnection: function( container ) {
+
+    $( container ).find( 'svg#pathConnection' ).each( function( i , elm ) {
+      $( elm ).remove();
+    });
+
+  },
+
+  makeScrollable: function( svgContainer , scrollContainer , elm1 , elm2 , rect1 , rect2 ) {
+
+    //let scrollCoords = scrollContainer.getBoundingClientRect();
+    let svgCoords = svgContainer.getBoundingClientRect();
+
+    let el = [ elm1 , elm2 ];
+    let rec = [ rect1 , rect2 ];
+    let coords = [];
+
+    for( let i = 0; i < el.length; i++ ){
+
+      coords[ i ] = el[ i ].getBoundingClientRect();
+
+      rec[ i ].setAttributeNS( null, 'x', coords[ i ].left - svgCoords.left );
+      rec[ i ].setAttributeNS( null, 'y', coords[ i ].top - svgCoords.top );
+      rec[ i ].setAttributeNS( null, 'width', coords[ i ].width );
+      rec[ i ].setAttributeNS( null, 'height', coords[ i ].height );
+
+    }
+
+    //***************************************************************
+
+    window.dphelper.svg.update( $( rect1 )[ 0 ], $( rect2 )[ 0 ], $( '#connection' )[ 0 ]);
+
+  },
+
+  makeDraggable: function( evt ) {
+
+    let svg = evt.target;
+    svg.addEventListener( 'mousedown' , startDrag );
+    svg.addEventListener( 'mousemove' , drag );
+    svg.addEventListener( 'mouseup' , endDrag );
+
+    function getMousePosition( e ) {
+      let CTM = svg.getScreenCTM();
+      return {
+        x: ( evt.clientX - CTM.e ) / CTM.a,
+        y: ( evt.clientY - CTM.f ) / CTM.d
+      };
+    }
+
+    let selectedElement, offset;
+
+    function startDrag( evt ) {
+
+      if ( evt.target.classList.contains( 'draggable' ) ) {
+        selectedElement = evt.target;
+        offset = getMousePosition( evt );
+        offset.x -= parseFloat( selectedElement.getAttributeNS( null , "x" ) );
+        offset.y -= parseFloat( selectedElement.getAttributeNS( null , "y" ) );
+      }
+
+    }
+
+    function drag( evt ) {
+
+      if ( selectedElement ) {
+        let coord = getMousePosition( evt );
+        selectedElement.setAttributeNS( null, "x" , coord.x - offset.x );
+        selectedElement.setAttributeNS( null, "y" , coord.y - offset.y );
+        window.dphelper.svg.update();
+      }
+
+    }
+
+    function endDrag( evt ) {
+      selectedElement = null;
+    }
+
+  },
+
+  toggle: function( evt , container , source1 , source2 ) {
+
+    if( $( evt.target ).prop( 'checked' ) && $( source1 ).length && $( source2 ).length ) {
+
+      window.dphelper.cookie.set( $( evt.target ).attr( 'id' ), 1, 365 );
+
+      window.dphelper.svg_initConnection( container[0], [ $( source1 )[0], 'right' ], [ $( source2 )[0], 'left' ], function( source1 , source2 ) {
+
+      $( '#parts-left-body' ).on( 'scroll', function( evt ){
+        window.dphelper.svg.makeScrollable( $( container )[0], $( '#parts-left-body' )[0], $( source1 )[0],
+        $( source2 )[0], $( '#parts svg rect' )[0], $( '#parts svg rect' )[ 1 ] );
+      });
+
+    });
+
+    } else {
+
+      window.dphelper.svg_removeConnection( container );
+      $( '#parts-left-body' ).unbind( 'scroll' );
+      window.dphelper.cookie.set( $( evt.target ).attr( 'id' ), 0, 365 );
+
+    }
+
+  }
+
+};
+
+window.dphelper.svg.check();
+

package/scripts/text.js

@@ -0,0 +1,78 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Handle Text",
+    "description" : "test",
+    "version" : "0.0.1",
+    "command" : "text",
+    "subCommand" : [
+      {
+        "name":"capitalize",
+        "description":"test"
+      },{
+        "name":"lower",
+        "description":"test"
+      },{
+        "name":"upper",
+        "description":"test"
+      },{
+        "name":"nl2br",
+        "description":"test"
+      },{
+        "name":"camelCase.toSpace",
+        "description":"test"
+      },{
+        "name":"camelCase.toUnderscore",
+        "description":"test"
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  window.dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  window.dphelper.text ={
+
+    capitalize: (txt) => {
+      return txt.toLowerCase().replace(/\b\w/g, function (l) { return l.toUpperCase(); });
+    },
+
+    lower: (txt) => {
+      return txt.toLowerCase();
+    },
+
+    upper: (txt) => {
+      return txt.toUpperCase();
+    },
+
+    nl2br: (str) => {
+      return str.replace(/(?:\r\n|\r|\n)/g, '<br>');
+    },
+
+    camelCase: {
+
+      toSpace: ( string ) => {
+        return string
+                .replace(/([A-Z])/g, ' $1')
+                .replace(/^./, function(str){ return str.toUpperCase(); });
+      },
+
+      toUnderscore: ( string ) => {
+        return string
+                .replace(/\.?([A-Z])/g, function (x,y){	return "_" + y.toLowerCase(); })
+                .replace(/^_/, "");
+      },
+
+    }
+
+  };

package/scripts/time.js

@@ -0,0 +1,41 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Handle Time",
+    "description" : "test",
+    "version" : "0.0.1",
+    "command" : "time",
+    "subCommand" : [
+      {
+        "name":"epoch",
+        "description":"test"
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  window.dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  window.dphelper.time ={
+
+    epoch: () => {
+      return new Date().getTime();
+    }
+
+  };

package/scripts/timer.js

@@ -0,0 +1,35 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Timer Options",
+    "description" : "test",
+    "version" : "0.0.1",
+    "command" : "timer",
+    "subCommand" : [
+      {
+        "name":"sleep",
+        "description":"test",
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  window.dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  window.dphelper.timer ={
+
+    sleep: (ms) => {
+      return new Promise( resolve => setTimeout( resolve, ms) );
+    }
+
+  };

package/scripts/trigger.js

@@ -0,0 +1,37 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Handle Trigger",
+    "description" : "test",
+    "version" : "0.0.1",
+    "command" : "trigger",
+    "subCommand" : [
+      {
+        "name":"click",
+        "description":"test"
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  window.dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  window.dphelper.trigger = {
+
+    click: ( elem ) => {
+      let selector = document.querySelector( elem );
+      if( selector ) selector.click();
+      return;
+    }
+
+  };

package/scripts/uuid.js

@@ -1,14 +1,33 @@
-/*!
- * dpHelper <https://github.com/passariello/dpHelper>
- *
- * uuid
- *
- * Copyright (c) 2021, Dario Passariello.
- * Licensed under the Apache-2.0 License.
- */
-
-/***********************************************************************/
-
-  window.dphelper.uuid = () => {
-    return ( [1e7] + -1e3 + -4e3 + -8e3 + -1e11 ).replace( /[018]/g, ( a ) => ( a ^ ( ( Math.random() * 16) >> ( a / 4 ) ) ).toString( 16 ) );
-  };
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "uuid Generator",
+    "description" : "test",
+    "version" : "0.0.1",
+    "command" : "uuid",
+    "subCommand" : [
+      {
+        "name":"v5",
+        "description":"test"
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  window.dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  window.dphelper.uuid = {
+    v5: () => {
+      return ( [1e7] + -1e3 + -4e3 + -8e3 + -1e11 ).replace( /[018]/g, ( a ) => ( a ^ ( ( Math.random() * 16) >> ( a / 4 ) ) ).toString( 16 ) );
+    }
+  };