dphelper 0.2.88 → 0.2.89

package/scripts/scrollbar.js

@@ -0,0 +1,293 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Scrollbar",
+    "description" : "",
+    "version" : "0.0.1",
+    "command" : "scrollbar",
+    "subCommand" : [
+      {
+        "name":"custom",
+        "description":"test"
+      },{
+        "name":"indicator",
+        "description":"test"
+      },{
+        "name":"position.get",
+        "description":"test"
+      },{
+        "name":"position.set",
+        "description":"test"
+      },{
+        "name":"smooth",
+        "description":"test"
+      },{
+        "name":"scrollTo",
+        "description":"test"
+      }
+    ],
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  dphelper.scrollbar = {
+
+    custom: ( el, options ) => {
+
+      if(!options['color_1']) options['color_1'] = "black";
+      if(!options['color_1_hover']) options['color_1_hover'] = "black";
+      if(!options['color_2']) options['color_2'] = "transparent";
+      if(!options['color_3']) options['color_3'] = "rgba(30,150,255,.5)";
+      if(!options['type']) options['type'] = "thin";
+      if(!options['behavior']) options['behavior'] = "smooth";
+      if(!options['width']) options['width'] = "16px";
+      if(!options['height']) options['height'] = "16px";
+      if(!options['rounded']) options['rounded'] = "10px";
+      if(!options['margin']) options['margin'] = "0";
+      if(!options['border']) options['border'] = "5px";
+      if(!options['opacity']) options['opacity'] = "1";
+
+      const $style = `${el}{
+                          scrollbar-width:auto;
+                          scrollbar-color: ${options['color_1']};
+                          scrollbar-width: ${options['type']};
+                          scroll-behavior: ${options['behavior']};
+                          scroll-margin: ${options['margin']};
+                          -ms-overflow-style: -ms-autohiding-scrollbar;
+                        }
+                      ${el}::-webkit-scrollbar {
+                          scroll-behavior: ${options['behavior']};
+                          width: ${options['width']};
+                          height: ${options['height']};
+                        }
+                      ${el}::-webkit-scrollbar-thumb {
+                          opacity: ${options['opacity']} !important;
+                          -webkit-border-radius: ${options['rounded']} !important;
+                          -webkit-box-shadow: none !important;
+                          box-shadow: none !important;
+                          border-radius: ${options['rounded']} !important;
+                          background: ${options['color_1']} !important;
+                          background-clip: content-box !important;
+                          border: ${options['border']} solid transparent !important;
+                          min-height: 2px !important;
+                          min-width: 2px !important;
+                        }
+                        ${el}::-webkit-scrollbar-thumb:hover,
+                        ${el}::-webkit-scrollbar-thumb:active{
+                            background: ${options['color_1']} !important;
+                            background-clip: content-box !important;
+                            border: calc( ${ options['border']} - 1.5px ) solid transparent !important;
+                        }
+                        ${el}::-webkit-scrollbar-track {
+                          background: ${options['color_2']};
+                          border-radius: ${options['rounded']};
+                        }
+
+                        ${el}::-webkit-scrollbar-track:hover {
+                          /*background: rgba(128,128,128,.15) !important;*/
+                          background: transparent !important;
+
+                        }
+                        ${el}::-webkit-scrollbar-track:vertical:hover {
+                            /* border-left: 1px solid rgba(0,0,0,.1) !important; */
+                        }
+                        ${el}::-webkit-scrollbar-track:horizontal:hover {
+                            /* border-top: 1px solid rgba(0,0,0,.1) !important; */
+                        }
+                        /*
+                        ${el}::-webkit-scrollbar-thumb:window-inactive {
+                          background: ${options['color_3']}
+                        }
+                        */
+                        select::-webkit-scrollbar-thumb {
+                            border: 4px solid hsl(0 0% 92% / 1) !important;
+                        }
+                        select::-webkit-scrollbar-track {
+                            background: hsl(0 0% 92% / 1) !important;
+                        }
+                        select::-webkit-scrollbar-track:vertical,
+                        select::-webkit-scrollbar-track:horizontal {
+                            border-top: none !important;
+                            border-left: none !important;
+                        }
+                      `;
+
+      let styleToHead = document.createElement( "style" );
+      document.head.appendChild( styleToHead );
+      styleToHead.innerHTML = $style;
+
+    },
+
+    indicator: ( props ) => {
+
+      /**
+      /* This timeout it's to be suse that whole UI is loaded
+      /* Just smaller trick!
+      */
+
+        let cont = document.querySelector( props.el );
+        let sc = document.querySelector('.scrollindicator');
+
+        if( !sc ){
+
+          const createEl = document.createElement('div');
+          createEl.classList.add("scrollindicator");
+          document.querySelector('header').appendChild(createEl);
+
+          createEl.style.cssText = `
+            height:5px;
+            background:#65c45c;
+            position:absolute;
+            bottom:0;
+            left:0;
+            z-index:2
+          `;
+        }
+
+        if( !props.el && sc) {
+          sc.style.width = 0 + '%';
+          return null;
+        }
+
+        try{
+          let sc = document.querySelector('.scrollindicator');
+          cont.addEventListener( 'scroll' , function ( e ) {
+
+            sc.style.width = 0 + '%';
+            let winScroll = this.scrollTop || this.scrollTop;
+            let height = this.scrollHeight - this.clientHeight;
+            let scrolled = Math.min(Math.max(parseInt( (winScroll / height) * 100 ), 0), 100);
+            sc.style.width = scrolled + '%';
+
+            sc.click();
+
+          });
+
+          window.addEventListener('popstate', function ( e ) {
+            sc.style.width = 0;
+          });
+
+        }catch( e ){
+          return;
+        }
+
+      return null;
+
+    },
+
+    position: {
+
+      set: ( el ) => {
+
+        let ar = [$( el ).scrollTop(),$( el ).scrollLeft()];
+        if( ar[0] != null && ar[1] != null ){ dphelper.storage.set( el , ar ); }
+      },
+
+      get: ( el ) => {
+        if( !dphelper.storage.get( el ) ) return;
+        let ar = JSON.parse( dphelper.storage.get( el ) );
+
+        $( el ).scrollTop( ar[0] );
+        $( el ).scrollLeft( ar[1] );
+      }
+
+    },
+
+    smooth: (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);
+          }
+        );
+      }();
+
+    },
+
+    scrollTo: 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"
+      });
+
+    }
+
+  };
+
+  //example: dphelper.scrollbar.custom('*')
+
+  Object.defineProperty( dphelper, 'scrollbar', {
+    writable: false,
+    configurable: false
+  });
+
+  //console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )

package/scripts/shortcut.js

@@ -0,0 +1,83 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "Shortcut",
+    "description" : "",
+    "version" : "0.0.1",
+    "command" : "shortcut",
+    "example" : "",
+    "author" : "Dario Passariello",
+    "active" : true,
+    "subCommand" : []
+  };
+
+  dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  dphelper.shortcut = ( e, trigger ) => {
+    const code = e.which ? e.which : e.keyCode;
+
+    (e) = {
+      tes: console.log('try')
+    };
+
+    if( !trigger ) trigger = {
+
+      "data" : [
+        {
+          "key" : "83",
+          "ctrl" : true,
+          "active" : true,
+          "description" : "CTRL+S",
+          //"element" : "#formSave",
+          "function" : ""
+        },
+        {
+          "key" : "27",
+          "ctrl" : false,
+          "active" : true,
+          "description" : "ESC",
+          "element" : "",
+          "function" : ""
+        },
+        {
+          "key" : "80",
+          "ctrl" : true,
+          "active" : true,
+          "description" : "CTRL+P",
+          "element" : "",
+          "function" : "function(){ Print }"
+        }
+      ]
+    };
+
+    trigger.map( list => {
+
+      // IF CTRL COMMAND
+      if ( e.ctrlKey || e.metaKey && list.ctrl === true ) {
+        if( code === parseInt(list.key) && list.active === true ){
+          if( list.element ) simulateClick( list.element );
+          if( list.function ) JSON.stringify( list.function );
+          e.preventDefault();
+          return;
+        }
+      }
+
+    });
+
+  };
+
+  Object.defineProperty( dphelper, 'shortcut', {
+    writable: false,
+    configurable: false
+  });
+
+  //console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )

package/scripts/socket.js

@@ -0,0 +1,184 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+///////////////////////////////////////////////////////////////////////////////////
+
+var description = {
+  "name" : "Socket",
+  "description" : "",
+  "version" : "0.0.1",
+  "command" : "socket",
+  "subCommand" : [
+    {
+      "name":"info",
+      "description":""
+    },
+    {
+      "name":"start",
+      "description":"test"
+    },
+    {
+      "name":"conn",
+      "description":"test"
+    },
+    {
+      "name":"connect",
+      "description":"test"
+    },
+    {
+      "name":"open",
+      "description":"test"
+    },
+    {
+      "name":"send",
+      "description":"test"
+    },
+    {
+      "name":"receive",
+      "description":"test"
+    },
+    {
+      "name":"keepAlive",
+      "description":""
+    }
+  ],
+  "example" : "",
+  "author" : "Dario Passariello",
+  "active" : true
+};
+
+dphelper._list.scripts.push( description );
+
+///////////////////////////////////////////////////////////////////////////////////
+
+dphelper.socket = {
+
+  info: () => {
+    return 'Created by Dario Passariello'
+  },
+
+  start: ( element , server ) => {
+    dphelper.socket.connect( server )
+    dphelper.socket.receive( element )
+  },
+
+  conn: ( id , server ) => {
+    if( !id || !server ){
+      console.log( 'please use connect!' )
+      return
+    }
+    const ws = new WebSocket( server )
+    ws.binaryType = "string"
+    ws.headers = {
+        test: "test"
+    }
+    return [ ws, id ]
+  },
+
+  ///////////////////////////////////////////
+
+  connect: ( server ) => {
+    if( !server ) return
+    dphelper.socket.open( dphelper.tool.uuid.v5() , server )
+  },
+
+  ///////////////////////////////////////////
+
+  open: ( id , server ) => {
+    if( !id ) return
+    dphelper.socket.connection = dphelper.socket.conn( id , server )
+    console.log( id )
+    dphelper.socket.connection[0].onopen = () => console.debug( id + ' connected')
+    dphelper.socket.connection[0].onclose = ( event ) =>  console.debug( ( event.wasClean ) ? 'Disconnected' :  'Connection break: ' + ( event.reason || event.code ) )
+    dphelper.socket.connection[0].onerror = ( err ) => console.error( err.message )
+    // socket.onmessage = ( event ) => console.debug( event.data ) }
+
+  },
+
+  ///////////////////////////////////////////
+
+  send: ( mex ) => {
+    if( !dphelper.socket.connection[1] ) return
+    let ws = dphelper.socket.connection[0]
+    let id = dphelper.socket.connection[1]
+    //ws.addEventListener( 'open' , function ( event ) { console.log( event ) });
+    var obj = `{"${id}":"${mex}"}`
+    ws.send( obj )
+  },
+
+  ///////////////////////////////////////////
+
+  receive: ( element ) => {
+    if( !dphelper.socket.connection[1] ) return
+    let ws = dphelper.socket.connection[0]
+
+    ws.addEventListener( 'message', function ( message ) {
+
+      try{
+
+        var data = Object.values( JSON.parse( message.data ) )
+
+        console.debug( `%cMEX: %c` + message.data, "color: orange", "" )
+
+        if( $( element ) ){
+          $( element ).prepend( data[0] + "<br/>" )
+          //$( element ).append( data[0] + "<br/>" )
+        }
+        return data[0]
+
+      } catch (e) {
+
+        console.error( `error: ${e}` )
+
+      }
+
+    });
+
+  },
+
+  keepAlive: () => {
+
+    var tm
+    function ping() {
+      dphelper.socket.send('__ping__')
+      tm = setTimeout(function () {
+        // console.log('ping')
+        /// ---connection closed ///
+      }, 5000)
+    }
+
+    function pong() {
+      // console.log('pong')
+      clearTimeout(tm)
+    }
+
+    intraGlobal.ws.onopen = function () {
+      // console.log('open')
+      setInterval( ping, 30000 )
+    }
+
+    intraGlobal.ws.onmessage = function (evt) {
+      var ck = Object.values( JSON.parse( evt.data ) )
+      // console.log( evt )
+      // console.log( '>', ck[0] )
+      if ( ck[0] === '__ping__') {
+        pong()
+        return
+      }
+      //////-- other operation --//
+    }
+
+  }
+
+}
+
+Object.defineProperty( dphelper, 'socket', {
+  writable: false,
+  configurable: false
+});
+
+//console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )

package/scripts/state.js

@@ -0,0 +1,87 @@
+/*!
+  dpHelper
+  Copyright (c) 2021 Dario Passariello <dariopassariello@gmail.com>
+  Licensed under the Apache-2.0, see
+  https://dario.passariello.ca
+*/
+
+/***********************************************************************/
+
+  var description = {
+    "name" : "State",
+    "description" : "",
+    "version" : "0.0.1",
+    "command" : "state",
+    "subCommand" : [],
+    "example" : "state() or dphelper.state()",
+    "author" : "Dario Passariello",
+    "active" : true
+  };
+
+  dphelper._list.scripts.push( description );
+
+/***********************************************************************/
+
+  dphelper.state = function ( key, value ){
+
+    // LIST ALL ARRAY FROM STATE
+    if( !key && !value ){
+
+      // NEW ARRAY
+      let final = [];
+
+      // GET CLEAN ARRAY FROM JSON
+      let clear = dphelper.obj.toArray( dphelper.state );
+
+      // FINAL ARRAY (remove functions)
+      clear.map( ( list , i )  => {
+        if( typeof list[1] === 'function' ) return;
+        final[ list[0] ] = list[1];
+        //final.push( list );
+      });
+
+    return dphelper.array.toObj( final );
+
+    }else{
+
+      // CHECK
+      if( ( !key && value ) ){
+        console.debug( 'Error: State works in this way: state( key, value ) or only key' );
+        void 0;
+
+        // RETURN
+        }else if( key && !value ){
+          //return dphelper.state[ key ];
+
+        // SAVE
+        }else if( key && value ){
+
+          // check if is a function
+          if( typeof dphelper?.state[ key ] === 'function' ){
+            return `Error, ${ key } is a protect function name`;
+          }else{
+            // if ok register
+            dphelper.state[ key ] = value;
+          }
+
+      }
+
+    }
+
+  };
+
+  // OPTIONS
+  this.delete = ( key ) => dphelper.state[ key ] = undefined;
+  //thi._deleteAll = () => dphelper.state = [];
+
+  // SIMPLIFY STATE CALL
+  window.state = dphelper.state;
+
+  //////////////////////////////////////////////////////////////////////////////
+
+  Object.defineProperty( dphelper, 'state', {
+    writable: false,
+    configurable: false
+  });
+
+  //console.log( Object.getOwnPropertyDescriptor( dphelper, 'socket' ) )