layerpro 0.0.56 → 0.0.60

package/node/gitDeploy.js

@@ -0,0 +1,7 @@
+const moment = require('moment')
+const execSync = require('node:child_process').execSync
+const dateTime = moment().format('YYYYMMDDHHmmss')
+const pjson = require('../package.json')
+
+//https://stackoverflow.com/questions/55021363/how-to-pass-current-datetime-in-npm-script-for-git-commit-message-in-windows-and
+execSync(`cd .. && git add . && git commit -m \"ver. ${pjson.version} / ${dateTime}\" && git pull && git push --all`, { stdio: [0, 1, 2] })

package/node/goLive.js

@@ -0,0 +1,7 @@
+const moment = require('moment')
+const execSync = require('node:child_process').execSync
+const dateTime = moment().format('YYYYMMDDHHmmss')
+const pjson = require('../package.json')
+
+//https://stackoverflow.com/questions/55021363/how-to-pass-current-datetime-in-npm-script-for-git-commit-message-in-windows-and
+execSync(`cli-confirm \"Do you want go live?\" && npm version patch --force && cd.. && webpack --progress --color --mode production --config webpack.config.js && cd dist && npm publish`, { stdio: [0, 1, 2] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "layerpro",
-  "version": "0.0.56",
+  "version": "0.0.60",
   "description": "Manage your popups and customize them",
   "deprecated": false,
   "appCode": "layerpro",
@@ -28,7 +28,7 @@
     "typings/styles.d.ts"
   ],
   "engines": {
-    "node": ">=0.10.0"
+    "node": ">=4.0.0"
   },
   "scripts": {
     "make-dist": "webpack --progress --color --mode production --config webpack.config.js",
@@ -36,8 +36,8 @@
     "git-tag": "cd node && node createTag",
     "backup": "backup.bat",
     "goLive": "cd node && node goLive",
-    "test_jest": "jest --watchAll --coverage --testEnvironment jsdom",
-    "test_lint": "eslint --fix"
+    "test_jest": "jest --watchAll --coverage",
+    "test_lint": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
   },
   "eslintConfig": {
     "globals": {
@@ -83,46 +83,58 @@
     "url": "https://github.com/passariello/layerpro/issues"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "5.31.0",
     "css-loader": "6.7.1",
-    "eslint": "8.14.0",
+    "eslint": "8.20.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "26.6.0",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-unicorn": "43.0.2",
     "file-loader": "6.2.0",
-    "jest": "27.5.1",
-    "less-loader": "10.2.0",
-    "sass-loader": "12.6.0",
+    "jest": "28.1.3",
+    "less-loader": "11.0.0",
+    "sass-loader": "13.0.2",
     "style-loader": "3.3.1",
-    "webpack-cli": "4.9.2"
+    "webpack-cli": "4.10.0"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.17.10",
-    "@babel/preset-env": "7.17.10",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "7.16.7",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/user-event": "^14.0.0",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-transform-runtime": "7.18.9",
+    "@babel/preset-env": "7.18.9",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/user-event": "^14.3.0",
+    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@typescript-eslint/parser": "5.31.0",
     "babel-loader": "8.2.5",
     "classnames": "2.3.1",
     "cli-confirm": "1.0.1",
-    "compression-webpack-plugin": "9.2.0",
-    "concurrently": "7.1.0",
-    "copy-webpack-plugin": "10.2.4",
+    "compression-webpack-plugin": "10.0.0",
+    "concurrently": "7.3.0",
+    "copy-webpack-plugin": "11.0.0",
     "css": "3.0.0",
-    "dotenv": "16.0.0",
+    "dotenv": "16.0.1",
+    "enzyme": "3.11.0",
     "enzyme-to-json": "3.6.2",
     "fs": "0.0.1-security",
     "html-webpack-plugin": "5.5.0",
     "jquery": "3.6.0",
     "jsdom-worker": "0.2.1",
-    "jshint": "^2.13.4",
-    "less": "4.1.2",
-    "moment": "2.29.3",
+    "jshint": "^2.13.5",
+    "less": "4.1.3",
+    "moment": "2.29.4",
     "path": "0.12.7",
     "progress-bar-webpack-plugin": "2.1.0",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "require": "0.4.4",
-    "sass": "1.51.0",
-    "ts-jest": "27.1.4",
-    "webpack": "5.72.0"
+    "sass": "1.54.0",
+    "terser-webpack-plugin": "5.3.3",
+    "ts-jest": "28.0.7",
+    "typescript": "4.7.4",
+    "webpack": "5.74.0"
   }
 }

package/scripts/GenLayer.jsx

@@ -0,0 +1,234 @@
+/*
+Copyright: © 2022 Dario Passariello <dariopassariello@gmail.com>
+License: MIT
+*/
+
+import { createRoot } from 'react-dom/client'
+
+export const GenLayer = (p) => {
+
+  var root // FUCKYOU FACEBOOK!
+
+  let pContainer = p.raised === true ? '.popup_raised_' + p.id : '#popup'
+
+  $('[class^="popup_window_"]', pContainer).removeClass('zHigh')
+  $('[class^="popup_bar_"]', pContainer).removeClass('pupup_bar_selected')
+  $('[class^="icon_"]', pContainer).removeClass('pupup_bar_selected')
+
+  if (p.raised === true) {
+    $('<div class="popup_raised_' + p.id + '">', pContainer)
+      .appendTo('#popup')
+      .css({
+        'pointer-events': 'auto',
+        'z-index': layerpro.popup.zIndex($('[class^="popup_overflow_"]', pContainer)) + 1000
+      })
+  }
+
+  $('<div class="popup_overflow_' + p.id + '">', pContainer)
+    .appendTo(pContainer)
+    .css({
+      'top': p.top,
+      'left': p.left,
+      'right': p.right,
+      'bottom': p.bottom,
+      'width': p.width,
+      'height': p.height,
+      'min-width': p.minWidth,
+      'min-height': p.minHeight,
+      'pointer-events': 'auto',
+      'z-index': layerpro.popup.zIndex($('[class^="popup_overflow_"]', pContainer)) + 1
+    })
+    .on("mousedown", function (e) { layerpro.popup.index(p) })
+    .hide()
+    .fadeIn(p.fadeIn)
+
+  let item = $('<div class="popup_window_' + p.id + '">', pContainer)
+    //.on("mouseup", function( e ){ layerpro.popup.index( p ); })
+    .appendTo('.popup_overflow_' + p.id)
+    .css({ 'pointer-events': 'auto' })
+    .addClass('zHigh')
+
+  /*******************************************************************/
+  // CHECK IF NEED CENTERED
+
+  const pos = [p.top, p.left, p.bottom, p.right]
+  const sum = pos.reduce((sumSoFar, nextValue) => {
+    if (typeof nextValue === "number" && isFinite(nextValue)) { return sumSoFar + nextValue }
+    return sumSoFar
+  }, 0)
+
+  if (sum === 0) layerpro.popup.center(p)
+
+  /*******************************************************************/
+  // BAR
+
+  $('<div class="popup_bar_' + p.id + '">', pContainer)
+    .appendTo(item)
+    .addClass('pupup_bar_selected')
+
+  $('<div class="popup_icon_' + p.id + '">' + p.icon + '</div>', pContainer)
+    .appendTo(".popup_bar_" + p.id)
+
+  $('<div class="popup_drag_' + p.id + '">' + p.name + '</div>', pContainer)
+    .appendTo(".popup_bar_" + p.id)
+
+  $('<div class="popup_option_' + p.id + '">', pContainer)
+    .appendTo(".popup_bar_" + p.id)
+
+  /*******************************************************************/
+  // DOCK GENERATION
+
+  if (p.iconize === true && $('#popup_dock').length === 0) {
+
+    $('#root').css('margin', '0 0 var( --dock-height ) 0')
+
+    let dock = `<div id="popup_dock">
+      <div id="popup_dock_icon"></div>
+      <div id="popup_dock_list"></div>
+      <div id="popup_dock_options"></div>
+    </div>`
+
+    $(dock)
+      .appendTo('#popup')
+      .css({
+        'pointer-events': 'auto',
+        'z-index': layerpro.popup.zIndex($('#popup')) + 1000
+      })
+
+  }
+
+  /*******************************************************************/
+  // DOCK BEHAVIOR
+
+  if ($('#popup_dock').length > 0 && p.dockable === true) {
+    let dock_icon = `
+      <div class="icon_${p.id}">
+        <span>${p.icon}</span>
+        <span>${p.name}</span>
+      `
+
+    $(dock_icon, '#popup_dock')
+      .appendTo('#popup_dock_list')
+      .addClass('pupup_bar_selected')
+      .find("span")
+      .on('click', function () {
+
+        if ($(".popup_overflow_" + p.id + ':hidden')) {
+          layerpro.popup.iconize(p)
+          layerpro.popup.index(p)
+        } else {
+          layerpro.popup.iconize(p)
+        }
+
+        layerpro.popup.index(p)
+
+      })
+
+    $(`<button class="icon_close_${p.id}">X</button>`, '#popup_dock')
+      .appendTo(`.icon_${p.id}`)
+      .on('click', function () { layerpro.popup.close(p) })
+  }
+
+  /*******************************************************************/
+  // ICONIFICATION
+
+  if (p.iconize === true) {
+    $('<button class="button_iconize_' + p.id + ' iconize">', '#popup')
+      .appendTo(".popup_option_" + p.id)
+      .on('click', function () { layerpro.popup.iconize(p) })
+  }
+
+  /*******************************************************************/
+  // MAXIMIZATION
+
+  if (p.maximize === true) {
+    $('<button class="button_maximize_' + p.id + ' maximize">', '#popup')
+      .appendTo(".popup_option_" + p.id)
+      .on('click', function () { layerpro.popup.maximize(p) })
+  }
+
+  /*******************************************************************/
+  // CLOSE
+
+  if (p.close === true) {
+    $('<button class="button_close_' + p.id + ' close">', '#popup')
+      .appendTo(".popup_option_" + p.id)
+      .on('click', function () { layerpro.popup.close(p) })
+  }
+
+  /*******************************************************************/
+  // BODY
+
+  let _overflow = $('<div class="popup_overflow_' + p.id + '">', '#popup')
+
+  $('<div class="popup_internal_' + p.id + '">', _overflow)
+    .appendTo(item)
+
+  $('<div class="popup_body_' + p.id + '">', _overflow)
+    .appendTo(".popup_internal_" + p.id)
+    .hide()
+    .fadeIn(p.fadeIn, function () { showBody() })
+
+  const showBody = () => {
+    if (p.body && !p.source) {
+      if (p.body.props) {
+
+        if (!p?.body?.props?.children) return (console.debug('You need to pass a component to LayerPro'))
+
+        if (!root) root = createRoot($('.popup_body_' + p.id)[0])
+        root.render(p.body.props.children)
+        $('.popup_body_' + p.id).delay(900).fadeIn(100)
+
+        //createRoot( $('.popup_body_' + p.id )[0] ).render( p.body.props.children );
+
+      } else {
+
+        $('.popup_body_' + p.id).html(p.body)
+
+      }
+    }
+    return false
+  }
+
+  /*******************************************************************/
+  // SOURCE
+
+  if (p.source) {
+
+    $('.popup_body_' + p.id).load(p.source, function (responseTxt, statusTxt, jqXHR) {
+
+      if (statusTxt === "success") {
+        $(this)
+          .hide()
+          .html(responseTxt)
+          .fadeIn(p.fadeIn)
+        /*.animate({ scrollTop:0 }, 500, 'swing');	*/
+        //console.log( responseTxt );
+      }
+
+      if (statusTxt === "error") {
+        console.log("Error: " + jqXHR.status + " " + jqXHR.statusText)
+      }
+
+    })
+
+  }
+
+  /*******************************************************************/
+  // MOVABLE
+
+  if (p.movable) layerpro.popup.movable(p)
+
+  /*******************************************************************/
+  // RESIZE
+
+  if (p.resizable) layerpro.popup.resizable(p)
+
+  /*******************************************************************/
+  // START MAXIMIZED
+
+  if (p.isMaximize) layerpro.popup.maximize(p)
+
+  return false
+
+}

package/scripts/message.jsx

@@ -0,0 +1,280 @@
+/*
+Copyright: © 2022 Dario Passariello <dariopassariello@gmail.com>
+License: MIT
+*/
+
+/*****************************************************************************************/
+// ALERT
+
+layerpro.alert = (txt) => {
+
+  const pUp = layerpro.popup.open({
+    id: "__alert",
+    body: "",
+    source: "",
+    width: 380,
+    height: 220,
+    name: "Warning",
+    icon: "&#9888;",
+    iconize: false,
+    maximize: false,
+    close: true,
+    isMaximize: false,
+    dockable: false,
+    raised: true,
+    movable: true,
+    resizable: false,
+    store: false,
+    top: "",
+    left: "",
+    right: "",
+    bottom: "",
+    fadeIn: "",
+    fadeOut: "",
+    minWidth: "",
+    minHeight: "",
+  })
+
+  let view = ""
+  view += "<div class='popup_prompt'>"
+  view += '<div class="popup_message_body">'
+  view += '<center>'
+  view += txt
+  view += "</center>"
+  view += '</div>'
+  view += '<button id="a_' + pUp.id + '" type="button">CLOSE</button>'
+
+  $('.popup_body_' + pUp.id)
+    .html(view)
+
+  $('#a_' + pUp.id)
+    .css('width', '100%')
+    .on('click', function (e) { layerpro.popup.close(pUp) })
+
+  return false
+}
+
+/*****************************************************************************************/
+// MESSAGE
+
+layerpro.message = (txt) => {
+
+  let pUp = layerpro.popup.open({
+    id: "__message",
+    body: "",
+    width: 380,
+    height: 220,
+    name: 'Message',
+    source: "",
+    icon: "&#9965;",
+    iconize: false,
+    maximize: false,
+    close: true,
+    isMaximize: false,
+    dockable: false,
+    raised: true,
+    movable: true,
+    resizable: false,
+    store: false,
+    top: "",
+    left: "",
+    right: "",
+    bottom: "",
+    fadeIn: "",
+    fadeOut: "",
+    minWidth: "",
+    minHeight: "",
+  })
+
+  let view = ""
+  view += "<div class='popup_prompt'>"
+  view += '<div class="popup_message_body">'
+  view += '<center>'
+  view += txt
+  view += "</center>"
+  view += '</div>'
+  view += '<button id="a_' + pUp.id + '" type="button">CLOSE</button>'
+
+  $('.popup_body_' + pUp.id)
+    .html(view)
+
+  $('#a_' + pUp.id)
+    .css('width', '100%')
+    .on('click', function () { layerpro.popup.close(pUp) })
+
+  return false
+}
+
+/*****************************************************************************************/
+// CONFIRM
+
+layerpro.confirm = (txt, function_, noFunction) => {
+
+  if ($('.confirm').length === 0) {
+
+    let pUp = layerpro.popup.open({
+      id: "__confirm",
+      body: "",
+      source: "",
+      width: 380,
+      height: 220,
+      name: 'Confirm',
+      icon: "&#9745;",
+      iconize: false,
+      maximize: false,
+      close: true,
+      isMaximize: false,
+      dockable: false,
+      raised: true,
+      movable: true,
+      resizable: false,
+      store: false,
+      top: "",
+      left: "",
+      right: "",
+      bottom: "",
+      fadeIn: "",
+      fadeOut: "",
+      minWidth: "",
+      minHeight: "",
+    })
+
+    let view = ""
+    view += "<div class='popup_prompt'>"
+    view += '<div class="popup_message_body">'
+    view += '<center>'
+    view += txt
+    view += "</center>"
+    view += '</div>'
+    view += '<button id="a_' + pUp.id + '" type="button">CONFIRM</button>'
+    view += '<button id="b_' + pUp.id + '" type="button">CANCEL</button>'
+
+    $('.popup_body_' + pUp.id)
+      .html(view)
+
+    $('#a_' + pUp.id).on('click', function () {
+      if (function_) { function_() }
+      layerpro.popup.close(pUp)
+    })
+
+    $('#b_' + pUp.id).on('click', function () {
+      if (noFunction) { noFunction() }
+      layerpro.popup.close(pUp)
+    })
+
+  }
+
+  return false
+}
+
+/*****************************************************************************************/
+// PROMPT
+
+layerpro.prompt = (txt, value) => {
+
+  // txt = JSON.stringify( txt );
+  // value = JSON.stringify( value ) || "_prompt";
+  value = value || "_prompt"
+
+  let pUp = layerpro.popup.open({
+    id: "__prompt",
+    body: "",
+    source: "",
+    width: 380,
+    height: 220,
+    name: 'Prompt',
+    icon: "&#9998;",
+    iconize: false,
+    maximize: false,
+    close: true,
+    isMaximize: false,
+    dockable: false,
+    raised: true,
+    movable: true,
+    resizable: false,
+    store: false,
+    top: "",
+    left: "",
+    right: "",
+    bottom: "",
+    fadeIn: "",
+    fadeOut: "",
+    minWidth: "",
+    minHeight: "",
+  })
+
+  let view = ""
+  view += "<div class='popup_prompt'>"
+  view += '<div class="popup_message_body">'
+  view += '<center>'
+  view += txt
+  view += "</center>"
+  view += '</div>'
+  view += '<input id="input_' + pUp.id + '" type="text" placeholder="write here" /><br/>'
+  view += '<button id="a_' + pUp.id + '" type="button">OK</button>'
+  view += '<button id="b_' + pUp.id + '" type="button">CANCEL</button>'
+  view += "</div>"
+
+  $('.popup_body_' + pUp.id)
+    .html(view)
+
+  $('#input_' + pUp.id)
+    .on('focus', function () { $(this).attr('placeholder', "") })
+    .on('blur', function () { $(this).attr('placeholder', "write here") })
+
+  $('#a_' + pUp.id).on('click', function (e) {
+
+    if ($('#input_' + pUp.id).val() > '') {
+
+      // localStorage.setItem( value , JSON.stringify( $('#input_' + pUp.id).val() ) );
+      // layerpro.popup.close( pUp );
+
+      layerpro.popup.close(pUp)
+      return JSON.stringify($('#input_' + pUp.id).val())
+
+    } else {
+      alert(`input can't be empty!`)
+    }
+
+  })
+
+  $('#b_' + pUp.id).on('click', function (e) {
+    layerpro.popup.close(pUp)
+  })
+
+  return false
+}
+
+
+/********************************************************** */
+
+export const CustomMessage = () => {
+
+  // MESSAGE
+  // ***********************************************************************
+  window.message = (txt) => {
+    layerpro.message(txt)
+  }
+
+  // ALERT
+  // ***********************************************************************
+  window.alert = (txt) => {
+    layerpro.alert(txt)
+  }
+
+  // CONFIRM
+  // ***********************************************************************
+  window.confirm = (txt, function_, noFunction) => {
+    layerpro.confirm(txt, function_, noFunction)
+  }
+
+  // PROMPT
+  // ***********************************************************************
+  window.prompt = (txt, function_, event) => {
+    layerpro.prompt(txt, function_, event)
+  }
+
+}
+
+CustomMessage()
+

package/scripts/mouseCoords.jsx

@@ -0,0 +1,45 @@
+/*
+Copyright: © 2022 Dario Passariello <dariopassariello@gmail.com>
+License: MIT
+*/
+
+export const mouseCoord = function (e) {
+
+  let mClientX = e.clientX
+  let mClientY = e.clientY
+  let mScreenX = e.screenX
+  let mScreenY = e.screenY
+
+  return [mClientX, mClientY, mScreenX, mScreenY]
+
+}
+
+/*****************************************************************************************/
+
+let xDirection = ""
+let yDirection = ""
+let oldX = 0
+let oldY = 0
+
+export const getMouseDirection = function (e) {
+
+  xDirection = oldX < e.pageX ? 1 : 0
+
+  yDirection = oldY < e.pageY ? "down" : "up"
+
+  oldX = e.pageX
+  oldY = e.pageY
+
+  console.log(xDirection)
+
+  return xDirection
+
+}
+
+//document.querySelector( "body" ).addEventListener( "mousemove" , getMouseDirection, false );
+
+
+
+
+
+