layerpro 0.0.56 → 0.0.60

package/scripts/popup.jsx

@@ -0,0 +1,604 @@
+/*
+Copyright: © 2022 Dario Passariello <dariopassariello@gmail.com>
+License: MIT
+*/
+
+//import React, { useState, useEffect } from "react";
+
+import { GenLayer } from "./GenLayer.jsx"
+import { mouseCoord } from "./mouseCoords.jsx"
+import "./message.jsx"
+
+import "../styles/general.scss"
+
+$.ajaxSetup({
+  async: true,
+  cache: true,
+  global: true
+})
+
+const larX = 300
+const larY = 150
+// const prefs = localStorage.getItem('layerpro')
+
+let isdresizableRes
+let highIndex = 1
+let startX
+let startY
+let startWidth
+let startHeight
+let startLeft
+let startTop
+let startBottom
+let startRight
+let Win = $(window)
+let Body = $('body')
+
+// let oldy;
+// let oldx;
+// let oldw;
+// let oldh;
+
+export const popup = {
+
+  open: function (p) {
+
+    if (!p) return false
+
+    p.id = p.id || Math.round(Math.random() * 1000)
+    p.body = p.body || null
+    p.width = p.width || 640
+    p.height = p.height || 480
+    p.name = p.name || 'popUp_' + p.id
+    p.source = p.source || null
+    p.icon = p.icon || null
+    p.iconize = p.iconize || null
+    p.maximize = p.maximize || null
+    p.isMaximize = p.isMaximize || null
+    p.dockable = p.dockable || null
+    p.close = p.close || null
+    p.raised = p.raised || null
+    p.movable = p.movable || null
+    p.resizable = p.resizable || null
+    p.store = p.store || false
+    p.top = p.top ? p.top : 'auto'
+    p.left = p.left ? p.left : 'auto'
+    p.right = p.right ? p.right : 'auto'
+    p.bottom = p.bottom ? p.bottom : 'auto'
+    p.fadeIn = p.fadeIn || 100
+    p.fadeOut = p.fadeOut || 100
+    p.minWidth = p.minWidth || 340
+    p.minHeight = p.minHeight || 220
+
+    /*******************************************************************/
+
+    // Check if windows is too small;
+    if (p.width < p.minWidth) p.width = p.minWidth
+    if (p.height < p.minHeight) p.height = p.minHeight
+
+    if (p.width === 'auto') p.width = '100%'
+    if (p.height === 'auto') p.height = '100%'
+
+    /*******************************************************************/
+
+    // create popUp container
+    if ($('#popup').length === 0) {
+      $('<div id="popup">', '#popup')
+        .appendTo('body')
+        .css({
+          'pointer-events': 'none',
+          'z-index': popup.zIndex($('*')) + 1
+        })
+    }
+
+    // Creation of final PopUp (avoid to recreate if same id exist)
+    if ($('.popup_window_' + p.id, '#popup').length === 0) {
+      GenLayer(p)
+    }
+
+    /*******************************************************************/
+
+    // window.onresize = function( p ){
+    //   if( Win.width() < 600 ) layerpro.popup.maximize( p );
+    //   console.log('r');
+    // };
+
+    /*******************************************************************/
+
+    layerpro.purge(document)
+    return p
+
+  },
+
+  show: function (item) {
+    item.toggle()
+    return false
+  },
+
+  vfx: function (item, vis, all = false) {
+
+    setTimeout(() => {
+
+      $('[class^="popup_overflow_"]', '#popup')
+        .css('opacity', vis == true ? 1 : 0.5)
+        .find('[class^="popup_body_"]')
+        .css({ 'content-visibility': vis == true ? 'auto' : 'hidden' })
+
+      item.css('opacity', 1)
+
+      if (!all) $('[class^="popup_body_"]', item).css('content-visibility', 'visible')
+
+      return false
+
+    }, 0)
+
+    window.dispatchEvent(new Event('resize'))
+
+  },
+
+  center: function (p) {
+    let _overflow = $('.popup_overflow_' + p.id, '#popup')
+    _overflow.css("top", Math.max(0, ((Win.height() - _overflow.outerHeight()) / 2) + Win.scrollTop()))
+    _overflow.css("left", Math.max(0, ((Win.width() - _overflow.outerWidth()) / 2) + Win.scrollLeft()))
+    return false
+  },
+
+  checkArea: function (e) {
+    return [
+      e.clientX,
+      e.clientY,
+      Win.scrollLeft(),
+      Win.scrollTop(),
+      Win.height(),
+      Win.width()
+    ]
+  },
+
+  close: function (p) {
+
+    if (!p) {
+
+      $("#popup").fadeOut(function () {
+        $(this).remove()
+      })
+
+    } else {
+
+      if (p.raised === true) {
+
+        $('.popup_raised_' + p.id).fadeOut(p.fadeOut, function () {
+          $('.popup_raised_' + p.id).remove()
+        })
+
+      } else {
+
+        $('.popup_overflow_' + p.id).fadeOut(p.fadeOut, function () {
+          $(this).remove()
+          popup.removeDock(p)
+        })
+
+      }
+
+    }
+
+    layerpro.purge(document)
+    localStorage.removeItem('popup_' + p.id)
+    return false
+
+  },
+
+  removeDock: function (p) {
+
+    $(".icon_" + p.id).remove()
+
+    if ($('[class^="popup_overflow_"]', '#popup').length <= 0) {
+      $('#popup_dock').remove()
+      $('#root').css('margin', '0')
+    }
+
+    return false
+
+  },
+
+  iconize: function (p) {
+
+    let _overflow = $('.popup_overflow_' + p.id, '#popup')
+
+    // iconize only if is top layer
+    if (_overflow.find('[class^=popup_window_]').hasClass("zHigh") === false) return false
+
+    popup.vfx(_overflow, false, true)
+
+    if (!_overflow.data('iconize')) {
+
+      _overflow.animate({
+        top: '100%',
+        left: $('.icon_' + p.id, '#popup_dock').offset().left + 15,
+        width: 0,
+        height: 0,
+        opacity: 0
+      }, 200, function () {
+
+        popup.vfx(_overflow, true)
+
+      })
+
+      _overflow.data('iconize', {
+        y: _overflow.offset().top,
+        x: _overflow.offset().left,
+        w: _overflow.width(),
+        h: _overflow.height()
+
+      }, 200)
+
+    } else if (_overflow.data('iconize')) {
+
+      var s = _overflow.data('iconize')
+
+      _overflow.animate({
+        top: s.y,
+        left: s.x,
+        width: s.w,
+        height: s.h,
+        opacity: 1,
+      }, function () {
+
+        popup.vfx(_overflow, true)
+
+      })
+
+      _overflow.removeData('iconize')
+
+    }
+
+    return false
+  },
+
+
+  maximize: function (p) {
+
+    let _overflow = $('.popup_overflow_' + p.id, '#popup')
+    let gap = 6
+
+    popup.vfx(_overflow, false, true)
+
+    if (!_overflow.data('store')) {
+
+      _overflow.data('store', {
+        y: _overflow.offset().top,
+        x: _overflow.offset().left,
+        w: _overflow.width(),
+        h: _overflow.height()
+      })
+
+      _overflow.animate({
+        position: 'absolute',
+        top: -gap,
+        left: -gap,
+        right: -gap,
+        bottom: - gap,
+        width: Win.width() + (gap * 2),
+        height: Win.height() + (gap * 2) - 45,
+      }, function () {
+
+        Win.on("resize.eventItem", function () {
+          _overflow
+            .css({
+              width: Win.width() + (gap * 2),
+              height: Win.height() + (gap * 2) - 40,
+            })
+        })
+
+        $('[class^="resize_"]', _overflow).off('mousedown')
+        popup.vfx(_overflow, true, true)
+
+      })
+
+    } else if (_overflow.data('store')) {
+
+      var s = _overflow.data('store')
+
+      _overflow.animate({
+        top: s.y,
+        left: s.x,
+        width: s.w,
+        height: s.h,
+      }, function () {
+
+        $("[class^='resize_']",)
+          .on('mousedown', function (e) {
+            popup.ResizePopups(e, this)
+          })
+
+        Win.off("resize.eventItem")
+        popup.vfx(_overflow, true)
+
+      })
+
+      _overflow.removeData('store')
+
+    }
+
+    return false
+  },
+
+  movable: function (p) {
+
+    if (!p.movable) return
+
+    let _overflow = $('.popup_overflow_' + p.id, '#popup')
+    let _dragger = $('.popup_drag_' + p.id, _overflow)
+    let _body = $('.popup_body_' + p.id, _overflow)
+
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0
+
+    _dragger.on('mousedown', function (e) {
+      _body.css('pointer-events', 'none')
+
+      if (Win.width() > _overflow.width()) {
+
+        dragMouseDown(e)
+        popup.vfx(_overflow, false)
+
+      } else {
+
+        e.stopImmediatePropagation()
+        return false
+
+      }
+    })
+
+    _dragger.on('dblclick', function (p) {
+      layerpro.popup.maximize(p)
+    })
+
+    function dragMouseDown(e) {
+      pos3 = e.clientX
+      pos4 = e.clientY
+      document.addEventListener('mousemove', elementDrag)
+      document.addEventListener('mouseup', elementDragEnd)
+      return false
+    }
+
+    function elementDrag(e) {
+
+      pos1 = pos3 - e.clientX
+      pos2 = pos4 - e.clientY
+      pos3 = e.clientX
+      pos4 = e.clientY
+
+      if (popup.checkArea(e)[1] < popup.checkArea(e)[4] && Math.sign(popup.checkArea(e)[1]) === 1) _overflow.css('top', (_overflow.offset().top - pos2))
+      if (popup.checkArea(e)[0] < popup.checkArea(e)[5] && Math.sign(popup.checkArea(e)[0]) === 1) _overflow.css('left', (_overflow.offset().left - pos1))
+
+      return false
+
+    }
+
+    function elementDragEnd() {
+      document.onmouseup = null
+      document.onmousemove = null
+      _body.css('pointer-events', 'auto')
+      popup.vfx(_overflow, true)
+      return false
+    }
+
+    return false
+
+  },
+
+  resizable: function (p) {
+
+    if (!p.resizable) return
+
+    let _overflow = $('.popup_overflow_' + p.id, '#popup')
+
+    // EDGE
+    $("<div class='resize_0'>", _overflow).appendTo(_overflow)
+    $("<div class='resize_1'>", _overflow).appendTo(_overflow)
+    $("<div class='resize_2'>", _overflow).appendTo(_overflow)
+    $("<div class='resize_3'>", _overflow).appendTo(_overflow)
+
+    // CORNERS
+    $("<div class='resize_corner_0'>", _overflow).appendTo(_overflow)
+    $("<div class='resize_corner_1'>", _overflow).appendTo(_overflow)
+    $("<div class='resize_corner_2'>", _overflow).appendTo(_overflow)
+    $("<div class='resize_corner_3'>", _overflow).appendTo(_overflow)
+
+    $("[class^='resize_']",)
+      .on('mousedown', function (e) {
+        popup.ResizePopups(e, this)
+      })
+
+    return false
+
+  },
+
+  ResizePopups: function (e, id) {
+
+    let _sizer = $(id)
+    let _parent = _sizer.parent()
+    let cords = mouseCoord(e)
+    Body.css('pointer-events', 'none')
+    _parent.css('pointer-events', 'none')
+
+    popup.vfx(_parent, false)
+
+    document.addEventListener('mousemove', (e) => { popup.doRes(e, id) })
+    document.addEventListener('mouseup', () => { popup.stopRes(id) })
+
+    startX = cords[0]
+    startY = cords[1]
+
+    startWidth = _parent.width()
+    startHeight = _parent.height()
+    startLeft = _parent.position().left
+    startTop = _parent.position().top
+    startBottom = startTop + startHeight + 1
+    startRight = startLeft + startWidth + 1
+
+    isdresizableRes = id
+
+    return false
+
+  },
+
+  doRes: function (e, id) {
+
+    window.dispatchEvent(new Event('resize'))
+
+    const _sizer = $(id)
+    const _parent = _sizer.parent()
+    const cords = mouseCoord(e)
+
+    if (id === isdresizableRes) {
+
+      let X = (startWidth + cords[0] - startX)
+      let Y = (startHeight + cords[1] - startY)
+      let X1 = (startWidth - cords[0] + startX)
+      let Y1 = (startHeight - cords[1] + startY)
+
+      if (X <= 0) { X = 0 }
+      if (Y <= 0) { Y = 0 }
+
+      /********************************************************************************************************************************************/
+
+      // TOP DRAG
+      if (popup.checkArea(e)[1] < popup.checkArea(e)[4] && Math.sign(popup.checkArea(e)[1]) === 1 && _sizer.hasClass("resize_0")) {
+        if (_parent.height() >= larY) { _parent.css({ 'top': Number.parseInt(startBottom - Y1), 'height': Number.parseInt(Y1) }) }
+        if (_parent.height() <= larY && Y1 > larY) { _parent.css({ 'height': Number.parseInt(larY + 1) }) }
+      }
+
+      if (popup.checkArea(e)[0] < popup.checkArea(e)[5] && Math.sign(popup.checkArea(e)[0]) === 1 && // RIGHT DRAG
+        _sizer.hasClass("resize_1")) {
+        if (_parent.width() >= larX) { _parent.css({ 'width': Number.parseInt(X), 'right': Number.parseInt(startLeft - X) }) }
+        if (_parent.width() <= larX) { _parent.css({ 'width': Number.parseInt(larX + 1) }) }
+      }
+
+      if (popup.checkArea(e)[1] < popup.checkArea(e)[4] && Math.sign(popup.checkArea(e)[1]) === 1 && // BOTTOM DRAG
+        _sizer.hasClass("resize_2")) {
+        if (_parent.height() >= larY) { _parent.css({ 'height': Number.parseInt(Y) }) }
+        if (_parent.height() <= larY && Y > larY) { _parent.css({ 'height': Number.parseInt(larY + 1) }) }
+      }
+
+      if (popup.checkArea(e)[0] < popup.checkArea(e)[5] && Math.sign(popup.checkArea(e)[0]) === 1 && // LEFT DRAG
+        _sizer.hasClass("resize_3")) {
+        if (_parent.width() >= larX) { _parent.css({ 'width': Number.parseInt(X1), 'left': Number.parseInt(startRight - X1) }) }
+        if (_parent.width() <= larX && X1 > larX) { _parent.css({ 'width': Number.parseInt(larX + 1) }) }
+      }
+
+      /********************************************************************************************************************************************/
+
+      if (
+        popup.checkArea(e)[1] < popup.checkArea(e)[4] &&
+        popup.checkArea(e)[0] < popup.checkArea(e)[5] &&
+        Math.sign(popup.checkArea(e)[0]) === 1 &&
+        Math.sign(popup.checkArea(e)[1]) === 1
+      ) {
+
+        // TOP LEFT
+        if (_sizer.hasClass("resize_corner_0")) {
+          if (_parent.height() >= larY) { _parent.css({ 'top': Number.parseInt(startBottom - Y1), 'height': Number.parseInt(Y1) }) }
+          if (_parent.height() <= larY && Y1 > larY) { _parent.css({ 'height': Number.parseInt(larY + 1) }) }
+          if (_parent.width() >= larX) { _parent.css({ 'width': Number.parseInt(X1), 'left': Number.parseInt(startRight - X1) }) }
+          if (_parent.width() <= larX && X1 > larX) { _parent.css({ 'width': Number.parseInt(larX + 1) }) }
+        }
+
+        // TOP RIGHT
+        if (_sizer.hasClass("resize_corner_1")) {
+          if (_parent.height() >= larY) { _parent.css({ 'top': Number.parseInt(startBottom - Y1), 'height': Number.parseInt(Y1) }) }
+          if (_parent.height() <= larY && Y1 > larY) { _parent.css({ 'height': Number.parseInt(larY + 1) }) }
+          if (_parent.width() >= larX) { _parent.css({ 'width': Number.parseInt(X), 'right': Number.parseInt(startLeft - X) }) }
+          if (_parent.width() <= larX) { _parent.css({ 'width': Number.parseInt(larX + 1) }) }
+        }
+
+        // BOTTOM RIGHT
+        if (_sizer.hasClass("resize_corner_2")) {
+          if (_parent.height() >= larY) { _parent.css({ 'height': Number.parseInt(Y) }) }
+          if (_parent.height() <= larY && Y > larY) { _parent.css({ 'height': Number.parseInt(larY + 1) }) }
+          if (_parent.width() >= larX) { _parent.css({ 'width': Number.parseInt(X), 'right': Number.parseInt(startLeft - X) }) }
+          if (_parent.width() <= larX) { _parent.css({ 'width': Number.parseInt(larX + 1) }) }
+        }
+
+        // BOTTOM LEFT
+        if (_sizer.hasClass("resize_corner_3")) {
+          if (_parent.height() >= larY) { _parent.css({ 'height': Number.parseInt(Y) }) }
+          if (_parent.height() <= larY && Y > larY) { _parent.css({ 'height': Number.parseInt(larY + 1) }) }
+          if (_parent.width() >= larX) { _parent.css({ 'width': Number.parseInt(X1), 'left': Number.parseInt(startRight - X1) }) }
+          if (_parent.width() <= larX && X1 > larX) { _parent.css({ 'width': Number.parseInt(larX + 1) }) }
+        }
+
+      }
+
+    }
+
+    return false
+
+  },
+
+  stopRes: function (id) {
+
+    let _sizer = $(id)
+    let _parent = _sizer.parent()
+    Body.css('pointer-events', 'auto')
+    _parent.css('pointer-events', 'auto')
+
+    popup.vfx(_parent, true)
+
+    isdresizableRes = false
+    document.onmouseup = null
+    document.onmousemove = null
+
+    return false
+
+  },
+
+  index: function (p) {
+
+    let _overflow = $('[class^="popup_overflow_"]', '#popup')
+
+    $('[class^="popup_window_"]', '#popup').removeClass('zHigh')
+    $('[class^="popup_bar_"]', '#popup').removeClass('pupup_bar_selected')
+    $('[class^="icon_"]', '#popup').removeClass('pupup_bar_selected')
+
+    _overflow.each(function () {
+      $(this, '#popup')
+        .css('zIndex', $(this, '#popup')[0].style.zIndex - 1)
+    })
+
+    $(".icon_" + p.id, '#popup')
+      .addClass('pupup_bar_selected')
+
+    $(".popup_overflow_" + p.id, '#popup')
+      .css('zIndex', popup.zIndex(_overflow))
+
+    $(".popup_bar_" + p.id, '#popup')
+      .addClass('pupup_bar_selected')
+
+    $(".popup_window_" + p.id, '#popup')
+      .addClass('zHigh')
+
+    return false
+
+  },
+
+  zIndex: function (els) {
+
+    els.each(function () {
+      let currentIndex = Number.parseInt($(this, '#popup').css("zIndex"), 10)
+
+      if (currentIndex > highIndex) {
+        highIndex = currentIndex
+      }
+
+    })
+
+    return highIndex + 1
+
+  }
+
+}
+
+/**************************************************************************/
+// MAKE GLOBAL
+
+layerpro.popup = popup

package/scripts/purge.jsx

@@ -0,0 +1,29 @@
+/*
+Copyright: © 2022 Dario Passariello <dariopassariello@gmail.com>
+License: MIT
+*/
+
+layerpro.purge = (d) => {
+
+  var a = d.attributes, index, l, n
+
+  if (a) {
+    l = a.length
+    for (index = 0; index < l; index += 1) {
+      n = a[index].name
+      if (typeof d[n] === 'function') {
+        //d[n] = null;
+      }
+    }
+  }
+
+  a = d.childNodes
+
+  if (a) {
+    l = a.length
+    for (index = 0; index < l; index += 1) {
+      layerpro.purge(d.childNodes[index])
+    }
+  }
+
+}

package/scripts/smoothScroll.js

@@ -0,0 +1,69 @@
+/*
+Copyright: © 2022 Dario Passariello <dariopassariello@gmail.com>
+License: MIT
+*/
+
+//(function () {
+//	new SmoothScroll( document, 120, 12 );
+//})();
+
+function SmoothScroll(target, speed, smooth) {
+  if (target === document)
+    target = (document.scrollingElement || document.documentElement || document.body.parentNode || document.body)
+
+  var moving = false
+  var pos = target.scrollTop
+  var frame = target === document.body && document.documentElement ? document.documentElement : target
+
+  target.addEventListener('mousewheel', scrolled, { passive: false })
+  target.addEventListener('DOMMouseScroll', scrolled, { passive: false })
+
+  function scrolled(e) {
+    e.preventDefault() // disable default scrolling
+
+    var 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
+
+    var delta = (pos - target.scrollTop) / smooth
+
+    target.scrollTop += delta
+
+    if (Math.abs(delta) > 0.5) {
+      requestFrame(update)
+    } else {
+      moving = false
+    }
+  }
+
+  var requestFrame = function () { // requestAnimationFrame cross browser
+    return (
+      window.requestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.oRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function (function_) {
+        window.setTimeout(function_, 1000 / 50)
+      }
+    )
+  }()
+
+}