dphelper 0.0.1 → 0.0.2

package/scripts/scrollMemory.js

@@ -0,0 +1,26 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * setScrollPos, getScrollPos
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+  /*****************************************************************************************/
+  // SAVE OLD SCROLL POSITION
+  
+  dphelper.setScrollPos = ( el ) => {
+    let ar = [ $( el ).scrollTop() , $( el ).scrollLeft() ];
+    if( ar[0] != null && ar[1] != null ){ dphelper.storage.set( el , ar ); }
+  };
+  
+  /*****************************************************************************************/
+  // LOAD OLD SCROLL POSITION
+  
+  dphelper.getScrollPos = ( el ) => {    
+    if( !dphelper.storage.get( el ) ) return;
+    let ar = dphelper.storage.get( el ).trim().split(',');
+    $( el ).scrollTop( ar[0] );
+    $( el ).scrollLeft( ar[1] );
+  };

package/scripts/scrollSmooth.js

@@ -0,0 +1,74 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * scrollSmooth
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+// function init(){
+// 	new scrollSmooth(document,120,12);
+// }
+
+dphelper.scrollSmooth = (target, speed, smooth) => {
+	if (target === document)
+		target = (document.scrollingElement || document.documentElement || document.body.parentNode || document.body); // cross browser support for document scrolling
+
+	let moving = false;
+	let pos = target.scrollTop;
+  let frame = target === document.body && document.documentElement ? document.documentElement : target; // safari is the new IE
+
+	target.addEventListener('mousewheel', scrolled, { passive: false });
+	target.addEventListener('DOMMouseScroll', scrolled, { passive: false });
+
+	function scrolled( e ) {
+		e.preventDefault(); // disable default scrolling
+
+		let delta = normalizeWheelDelta( e );
+
+		pos += -delta * speed;
+		pos = Math.max(0, Math.min(pos, target.scrollHeight - frame.clientHeight)); // limit scrolling
+
+		if (!moving) update();
+	}
+
+	function normalizeWheelDelta( e ){
+		if(e.detail){
+			if(e.wheelDelta)
+				return e.wheelDelta/e.detail/40 * (e.detail>0 ? 1 : -1); // Opera
+			else
+				return -e.detail/3; // Firefox
+		}else
+			return e.wheelDelta/120; // IE,Safari,Chrome
+	}
+
+	function update() {
+		moving = true;
+
+		let delta = (pos - target.scrollTop) / smooth;
+
+		target.scrollTop += delta;
+
+		if (Math.abs(delta) > 0.5)
+			requestFrame(update);
+		else
+			moving = false;
+	}
+
+	let requestFrame = function() { // requestAnimationFrame cross browser
+		return (
+			window.requestAnimationFrame ||
+			window.webkitRequestAnimationFrame ||
+			window.mozRequestAnimationFrame ||
+			window.oRequestAnimationFrame ||
+			window.msRequestAnimationFrame ||
+			function(func) {
+				window.setTimeout(func, 1000 / 50);
+			}
+		);
+	}();
+
+};

package/scripts/scrollToElement.js

@@ -0,0 +1,25 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * scrollToElement
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+dphelper.scrollToElement = function( container, element, gap = 0 ) {
+
+  let el1 = document.querySelector( container );
+  let el2 = document.querySelector( element );
+  let el3 = gap; // DIVERGENCE
+
+  if( !el1 || !el2 || !el3 ) return;
+
+  el1.scrollTo({
+    top: el2.offsetTop,
+    behavior: "smooth"
+  });
+
+};

package/scripts/serializeForm.js

@@ -0,0 +1,92 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * serializeForm
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+dphelper.serializeForm = function( form ) {
+  
+  const $ = require("jquery");
+  const el = this;
+  //const el = $( form );
+  
+  var self = el,
+  
+  json = {},
+  push_counters = {},
+  patterns = {
+    "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
+    "key": /[a-zA-Z0-9_]+|(?=\[\])/g,
+    "push": /^$/,
+    "fixed": /^\d+$/,
+    "named": /^[a-zA-Z0-9_]+$/
+  };
+
+  //console.log( el )
+
+  el.build = function(base, key, value) {
+    base[key] = isNaN(value) || Array.isArray(value) ? value : Number(value);
+    return base;
+  };
+
+  el.push_counter = function(key) {
+    if (push_counters[key] === undefined) {
+      push_counters[key] = 0;
+    }
+    return push_counters[key]++;
+  };
+
+  $.each( $(el).serializeArray(), function() {
+
+    // skip invalid keys
+    if (!patterns.validate.test(el.name)) {
+      return;
+    }
+
+    var k,
+      keys = el.name.match(patterns.key),
+      merge = el.value,
+      reverse_key = el.name; 
+      
+      if( merge === 'false' ) merge = Boolean(false);
+      if( merge === 'true' ) merge = Boolean(true);
+      if( merge === 'off' ) merge = Boolean(false);
+      if( merge === 'on' ) merge = Boolean(true);
+      if( merge === '[]' ) merge = [];
+      if( merge === '{}' ) merge = {};
+      if( merge === 'undefined' ) merge = undefined;
+      if( merge === 'null' ) merge = null;
+      if( merge === '' ) merge = '';
+
+    while ((k = keys.pop()) !== undefined) {
+
+      // adjust reverse_key
+      reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
+
+      // push
+      if (k.match(patterns.push)) {
+        merge = self.build([], self.push_counter(reverse_key), merge);
+      }
+
+      // fixed
+      else if (k.match(patterns.fixed)) {
+        merge = self.build([], k, merge);
+      }
+
+      // named
+      else if (k.match(patterns.named)) {
+        merge = self.build({}, k, merge);
+      }
+
+    }
+
+    json = $.extend(true, json, merge);
+  });
+
+  return json;
+};

package/scripts/serializeObj.js

@@ -0,0 +1,47 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * objSerialize, objDeSerialize
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+dphelper.objSerialize = (value) => {
+
+  if (typeof value === 'function') {
+      return value.toString();
+  }
+  
+  if (typeof value === 'object') {
+      let serializeObject = {};
+      for (const [objectKey, objectValue] of Object.entries(value)) {
+          console.info( `objectKey=${objectKey}  value=${objectValue}` );
+          serializeObject[objectKey] = wng.objSerialize(objectValue);
+      }
+      return serializeObject;
+  }
+
+  return value;
+};
+
+
+dphelper.objDeSerialize = (valueNew) => {
+  
+  if (valueNew.toLowerCase().startsWith( 'function(' ) ) {
+      return Function('"use strict";return ' + valueNew);
+  }
+  
+  if (typeof valueNew === 'object') {
+      let deserializeObject = {};
+      for (const [objectKey, objectValue] of Object.entries(valueNew)) {
+          console.info( `objectKey=${objectKey} value=${objectValue}` );
+          deserializeObject[objectKey] = wng.objDeSerialize(objectValue);
+      }
+      return deserializeObject;
+  }
+
+  return value;
+};

package/scripts/sleep.js

@@ -0,0 +1,14 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * sleep
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+dphelper.sleep = (ms) => {
+  return new Promise( resolve => setTimeout( resolve, ms) );
+};

package/scripts/stopConsole.js

@@ -0,0 +1,49 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * stopConsole
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+dphelper.stopConsole = () => {
+
+  let console = {};
+  console.log = function(){};
+  window.console = console;
+  if(!window.console) window.console = {};
+
+  const noop = () => {}
+  [
+    'assert', 
+    'clear', 
+    'count', 
+    'debug', 
+    'dir', 
+    'dirxml', 
+    'error',
+    'exception', 
+    'group', 
+    'groupCollapsed', 
+    'groupEnd', 
+    'info', 
+    'log',
+    'markTimeline', 
+    'profile', 
+    'profileEnd', 
+    'table', 
+    'time', 
+    'timeEnd',
+    'timeline', 
+    'timelineEnd', 
+    'timeStamp', 
+    'trace', 
+    'warn'
+  ].forEach((method) => {
+    window.console[method] = noop;
+  });
+  
+};

package/scripts/svgSupport.js

@@ -0,0 +1,346 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * svgSupport
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+dphelper.supportsVml = function () {
+		
+  if ( typeof supportsVml.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)";
+    supportsVml.supported = b ? typeof b.adj == "object" : true;
+    a.parentNode.removeChild( a );
+
+  }
+
+  return supportsVml.supported;
+  
+};
+
+dphelper.supportsVml();
+
+/**************************************************************************************************/
+/**************************************************************************************************/
+
+dphelper.initConnection = function( container, source1, source2, cb ) {
+  
+  if( $( container ).find( 'svg' ) ) {
+    removeConnection( container );
+  }
+
+  source1 = setConnector( source1[ 0 ], source1[ 1 ] );
+  source2 = 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 );
+
+  updateConnection( $( rect1 )[0], $( rect2 )[0], $( '#connection' )[0]);
+
+  if( typeof cb == 'function' ) {
+    cb( source1, source2 );
+  }
+
+};
+
+/**************************************************************************************************/
+
+dphelper.updateConnection = 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 = getIntersection( dx , dy , cx1 , cy1 , w1 , h1 );
+  let p2 = getIntersection( -dx , -dy , cx2 , cy2 , w2 , h2 );
+
+  // Distance between edges
+  let dx1 = p2[ 0 ] - p1[ 0 ];
+
+  let d = 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] );
+  
+};
+
+/**************************************************************************************************/
+
+dphelper.getCurve = function( p1 , p2 , dx ) {
+  
+  let curve = dx / 2;
+  let d = " C" + ( curve + p1[0]  ) + "," + p1[1] + " " + ( p2[0] - curve ) + "," + p2[1] + " ";
+  return d;
+  
+};
+
+dphelper.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 ) ];
+  
+};
+
+/**************************************************************************************************/
+
+dphelper.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 );	  
+  
+  }
+
+  //*************************************************************** 
+
+  updateConnection( $( rect1 )[ 0 ], $( rect2 )[ 0 ], $( '#connection' )[ 0 ]);
+
+};
+
+/**************************************************************************************************/
+
+dphelper.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 );
+      updateConnection();
+    }
+
+  }
+
+  function endDrag( evt ) {
+    selectedElement = null;
+  }
+
+};
+
+/**************************************************************************************************/
+
+dphelper.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 ];
+};
+
+/**************************************************************************************************/
+
+dphelper.handleSvgToggle = function( evt , container , source1 , source2 ) {
+
+  if( $( evt.target ).prop( 'checked' ) && $( source1 ).length && $( source2 ).length ) {
+
+    wng.storeCookie.set( $( evt.target ).attr( 'id' ), 1, 365 );
+
+      initConnection( container[0], [ $( source1 )[0], 'right' ], [ $( source2 )[0], 'left' ], function( source1 , source2 ) {
+
+    $( '#parts-left-body' ).on( 'scroll', function( evt ){
+      makeScrollable( $( container )[0], $( '#parts-left-body' )[0], $( source1 )[0], 
+      $( source2 )[0], $( '#parts svg rect' )[0], $( '#parts svg rect' )[ 1 ] );
+    });
+
+  });
+
+  } else {
+
+    dphelper.removeConnection( container );
+    $( '#parts-left-body' ).unbind( 'scroll' );
+    wng.storeCookie.set( $( evt.target ).attr( 'id' ), 0, 365 );
+
+  }
+  
+};
+
+/**************************************************************************************************/
+
+dphelper.removeConnection = function( container ) {
+  
+  $( container ).find( 'svg#pathConnection' ).each( function( i , elm ) {
+    $( elm ).remove();
+  });
+
+};

package/scripts/textChanger.js

@@ -0,0 +1,24 @@
+/*!
+ * dpHelper <https://github.com/passariello/dpHelper>
+ *
+ * capitalize, lower, upper
+ *
+ * Copyright (c) 2021, Dario Passariello.
+ * Licensed under the Apache-2.0 License.
+ */
+
+/***********************************************************************/
+
+dphelper.capitalize = (txt) => {
+  return txt.toLowerCase().replace(/\b\w/g, function (l) { return l.toUpperCase(); });
+};
+
+/******************************************************************************/
+dphelper.lower = (txt) => {
+  return txt.toLowerCase();
+};
+
+/******************************************************************************/
+dphelper.upper = (txt) => {
+  return txt.toUpperCase();
+};