dphelper 0.2.88 → 0.2.89

package/scripts/storage.js

@@ -0,0 +1,93 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Storage",
+    "description" : "",
+    "version" : "0.0.1",
+    "command" : "storage",
+    "subCommand" : [
+      {
+        "name":"get",
+        "description":"test"
+      },{
+        "name":"set",
+        "description":"test"
+      },{
+        "name":"delete",
+        "description":"test"
+      },{
+        "name":"clearAll",
+        "description":"test"
+      },{
+        "name":"increaseQuota",
+        "description":"test"
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+dphelper.storage = {
+
+  get: ( name ) => {
+    if(!name) return;
+    return window.localStorage.getItem( name );
+  },
+
+  set: ( name, value ) => {
+    if(!name || !value) return;
+    window.localStorage.setItem( name, JSON.stringify(value) );
+  },
+
+  delete: ( name ) => {
+    if(!name) return;
+    window.localStorage.removeItem( name );
+  },
+
+  clearAll: () => {
+    window.localStorage.clear();
+  },
+
+  quota: () => {
+    if ('storage' in navigator && 'estimate' in navigator.storage) {
+      navigator.storage.estimate().then(({usage, quota}) => {
+        console.log(`Using ${usage/1024} out of ${quota/1024} Mb.`);
+      });
+    }
+  },
+
+  increaseQuota: ( quota ) => {
+    window.webkitStorageInfo.requestQuota(
+      window.PERSISTENT,
+      quota,
+      function( bytes ) {
+          alert( "Quota is available: " + bytes );
+      },
+      function( e ) {
+          alert( "Error allocating quota: " + e );
+      });
+  }
+
+};
+
+// START STORAGE DB
+// dphelper.storage.set( "dpHelper", 'active' );
+
+Object.defineProperty( dphelper, 'storage', {
+  writable: false,
+  configurable: false
+});
+
+//console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )

package/scripts/store.js

@@ -0,0 +1,115 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+/***********************************************************************/
+
+var description = {
+  "name" : "Store",
+  "description" : "",
+  "version" : "0.0.1",
+  "command" : "store",
+  "subCommand" : [
+    {
+      "name":"get",
+      "description":"test"
+    },{
+      "name":"set",
+      "description":"test"
+    },{
+      "name":"update",
+      "description":"test"
+    },{
+      "name":"clear",
+      "description":"test"
+    },{
+      "name":"delete",
+      "description":"test"
+    },
+  ],
+  "example" : "",
+  "author" : "Dario Passariello",
+  "active" : true
+};
+
+dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+dphelper.store = {
+
+  data: [],
+
+  get: ( name ) => {
+    if(!name) return;
+    return window.store.data[name];
+  },
+
+  set: ( name , value , protect = false ) => {
+    if( !name ) return;
+    if( protect === true ) value = [...value, protect=true ];
+    window.store.data[ name ] = value;
+  },
+
+  update: ( name , value ) => {},
+
+  clear: () => {},
+
+  clearAll: () => {},
+
+  delete: () => {}
+
+};
+
+// SET STORE
+window.store = dphelper.store;
+
+/***********************************************************************/
+
+// set: ( name, value, persist = true, protect = true )=>{
+//   let n = dphelper.text.sanitize( name );
+//   let data = window._dph_State[ name ];
+
+//   const persistent = ( name, value ) => {
+//     dphelper.indexedDB.create( 'dphelper', 'state' );
+//     dphelper.indexedDB.create( name, value );
+//   };
+
+//   // CHECK OVERRIDE
+//   if( data && data['protect'] === true ){
+//     console.debug( name + ' is data protected, please delete first' );
+//     return;
+//   }
+
+//   // OVERRIDE IF IT'S POSSIBLE
+//   if( !data || !data['protect'] || data['protect'] === false ){
+//     window._dph_State[ name ] = value;
+//     window._dph_State[ name ]['protected'] = protect;
+
+//     // SAVE AS PERSISTENT DATA INTO INDEXEDBD
+//     if( persist ){
+//       persistent( name, value );
+//     }
+//   }
+
+
+// },
+
+// get: ( name )=>{
+//   let data = window._dph_State[ name ];
+//   if(!data) console.debug( name + ' not in state memory' );
+//   else return data;
+// },
+
+// delete: ()=>{}
+// },
+
+Object.defineProperty( dphelper, 'store', {
+  writable: false,
+  configurable: false
+});
+
+//console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )

package/scripts/svg.js

@@ -0,0 +1,380 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+/***********************************************************************/
+
+var description = {
+  "name" : "Svg",
+  "description" : "realtime SVG",
+  "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
+};
+
+dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+dphelper.svg = {
+
+  check: () => {
+    if ( typeof 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)";
+      dphelper.svg.check.supported = b ? typeof b.adj == "object" : true;
+      a.parentNode.removeChild( a );
+    }
+    return dphelper.svg.check.supported;
+  },
+
+  init: function( container, source1, source2, cb ) {
+
+    if( $( container ).find( 'svg' ) ) {
+      dphelper.svg_removeConnection( container );
+    }
+
+    source1 = dphelper.svg.setConnector( source1[ 0 ], source1[ 1 ] );
+    source2 = 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 );
+
+    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 = dphelper.svg.getIntersection( dx , dy , cx1 , cy1 , w1 , h1 );
+    let p2 = dphelper.svg.getIntersection( -dx , -dy , cx2 , cy2 , w2 , h2 );
+
+    // Distance between edges
+    let dx1 = p2[ 0 ] - p1[ 0 ];
+
+    let d = 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 );
+
+    }
+
+    //***************************************************************
+
+    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 );
+        dphelper.svg.update();
+      }
+
+    }
+
+    function endDrag( evt ) {
+      selectedElement = null;
+    }
+
+  },
+
+  toggle: function( evt , container , source1 , source2 ) {
+
+    if( $( evt.target ).prop( 'checked' ) && $( source1 ).length && $( source2 ).length ) {
+
+      dphelper.cookie.set( $( evt.target ).attr( 'id' ), 1, 365 );
+
+      dphelper.svg_initConnection( container[0], [ $( source1 )[0], 'right' ], [ $( source2 )[0], 'left' ], function( source1 , source2 ) {
+
+      $( '#parts-left-body' ).on( 'scroll', function( evt ){
+        dphelper.svg.makeScrollable( $( container )[0], $( '#parts-left-body' )[0], $( source1 )[0],
+        $( source2 )[0], $( '#parts svg rect' )[0], $( '#parts svg rect' )[ 1 ] );
+      });
+
+    });
+
+    } else {
+
+      dphelper.svg_removeConnection( container );
+      $( '#parts-left-body' ).unbind( 'scroll' );
+      dphelper.cookie.set( $( evt.target ).attr( 'id' ), 0, 365 );
+
+    }
+
+  }
+
+};
+
+dphelper.svg.check();
+
+Object.defineProperty( dphelper, 'svg', {
+  writable: false,
+  configurable: false
+});
+
+//console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )
+

package/scripts/text.js

@@ -0,0 +1,116 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Text",
+    "description" : "",
+    "version" : "0.0.1",
+    "command" : "text",
+    "subCommand" : [
+      {
+        "name":"trim",
+        "description":"test"
+      },{
+        "name":"capitalize",
+        "description":"test"
+      },{
+        "name":"lower",
+        "description":"test"
+      },{
+        "name":"upper",
+        "description":"test"
+      },{
+        "name":"nl2br",
+        "description":"test"
+      },{
+        "name":"sanitize",
+        "description":"test"
+      },{
+        "name":"camelCase",
+        "description":"test",
+        "subCommand" : [
+          {
+            "name":"toSpace",
+            "description":"test",
+            "subCommand" : []
+          },{
+            "name":"toUnderscore",
+            "description":"test",
+            "subCommand" : []
+          }
+        ]
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  dphelper.text ={
+
+    trim: ( s, c, b, e ) => {
+      // trim(string, '#', 1, 7
+      return ( s.charAt(0) === c ) ? s.substring(b, e) : s;
+    },
+
+    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>');
+    },
+
+    sanitize: (str) => {
+      return str.replace(/[^\w ]/g, '');
+    },
+
+    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(/^_/, "");
+      },
+
+    }
+
+  };
+
+  Object.defineProperty( dphelper, 'text', {
+    writable: false,
+    configurable: false
+  });
+
+  //console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )