Update

3 files changed, 160 insertions, 0 deletions

diff --git a/Neutron-trunk/resources/lib/pushbar.js/library-info.json b/Neutron-trunk/resources/lib/pushbar.js/library-info.json
new file mode 100644
index 0000000..2045ce8
--- /dev/null
+++ b/Neutron-trunk/resources/lib/pushbar.js/library-info.json
@@ -0,0 +1,7 @@
+{
+    "NeutronLibrary": {
+        "LibraryName": "pushbar.js",
+        "LibraryUsage": "Show pushbar buttons on mobile instead of panels",
+        "LibraryAuthor": "oncebot"
+    }
+}
\ No newline at end of file
diff --git a/Neutron-trunk/resources/lib/pushbar.js/library.css b/Neutron-trunk/resources/lib/pushbar.js/library.css
new file mode 100644
index 0000000..e5c1734
--- /dev/null
+++ b/Neutron-trunk/resources/lib/pushbar.js/library.css
@@ -0,0 +1,74 @@
+html.pushbar_locked {
+    overflow: hidden;
+    -ms-touch-action: none;
+    touch-action: none;
+}
+
+.pushbar_locked .pushbar_main_content.pushbar_blur {
+    filter: blur(15px);
+}
+
+.pushbar_overlay {
+    z-index: -999;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    will-change: opacity;
+    transition: opacity 0.5s ease;
+    opacity: 0;
+    background: #3c3442;
+}
+
+html.pushbar_locked .pushbar_overlay {
+    opacity: 0.8;
+    z-index: 999;
+}
+
+[data-pushbar-id] {
+    z-index: 1000;
+    position: fixed;
+    overflow-y: auto;
+    will-change: transform;
+    transition: transform 0.5s ease;
+    background: #fff;
+}
+
+[data-pushbar-direction="left"][data-pushbar-id], [data-pushbar-direction="right"][data-pushbar-id] {
+    top: 0;
+    width: 256px;
+    max-width: 100%;
+    height: 100%;
+}
+
+[data-pushbar-direction="top"][data-pushbar-id], [data-pushbar-direction="bottom"][data-pushbar-id] {
+    left: 0;
+    width: 100%;
+    min-height: 150px;
+}
+
+[data-pushbar-direction="left"][data-pushbar-id] {
+    left: 0;
+    transform: translateZ(0) translateX(-100%);
+}
+
+[data-pushbar-direction="right"][data-pushbar-id] {
+    right: 0;
+    transform: translateZ(0) translateX(100%);
+}
+
+[data-pushbar-direction="top"][data-pushbar-id] {
+    top: 0;
+    transform: translateZ(0) translateY(-100%);
+}
+
+[data-pushbar-direction="bottom"][data-pushbar-id] {
+    bottom: 0;
+    transform: translateZ(0) translateY(100%);
+}
+
+[data-pushbar-id].opened {
+    display: block;
+    transform: translateX(0px) translateY(0px);
+}
\ No newline at end of file
diff --git a/Neutron-trunk/resources/lib/pushbar.js/library.js b/Neutron-trunk/resources/lib/pushbar.js/library.js
new file mode 100644
index 0000000..4d50246
--- /dev/null
+++ b/Neutron-trunk/resources/lib/pushbar.js/library.js
@@ -0,0 +1,79 @@
+class Pushbar {
+  constructor(config = { overlay: true, blur: false }) {
+      this.activeId;
+      this.activeElement;
+      this.overlayElement;
+      if (config.overlay) {
+          this.overlayElement = document.createElement('div');
+          this.overlayElement.classList.add('pushbar_overlay');
+          document.querySelector('body').appendChild(this.overlayElement);
+      }
+      if (config.blur) {
+          const mainContent = document.querySelector('.pushbar_main_content');
+          if (mainContent) {
+              mainContent.classList.add('pushbar_blur');
+          }
+      }
+      this.bindEvents();
+  }
+
+  emitOpening() {
+      const event = new CustomEvent('pushbar_opening', { bubbles: true, detail: { element: this.activeElement, id: this.activeId } });
+      this.activeElement.dispatchEvent(event);
+  }
+
+  emitClosing() {
+      const event = new CustomEvent('pushbar_closing', { bubbles: true, detail: { element: this.activeElement, id: this.activeId } });
+      this.activeElement.dispatchEvent(event);
+  }
+
+  handleOpenEvent(e) {
+      e.preventDefault();
+      const pushbarId = e.currentTarget.getAttribute('data-pushbar-target');
+      this.open(pushbarId);
+  }
+
+  handleCloseEvent(e) {
+      e.preventDefault();
+      this.close();
+  }
+
+  handleKeyEvent(e) {
+      if (e.keyCode === 27) this.close();
+  }
+
+  bindEvents() {
+      const triggers = document.querySelectorAll('[data-pushbar-target]');
+      const closers = document.querySelectorAll('[data-pushbar-close]');
+      triggers.forEach(trigger => trigger.addEventListener('click', e => this.handleOpenEvent(e), false));
+      closers.forEach(closer => closer.addEventListener('click', e => this.handleCloseEvent(e), false));
+      if (this.overlayElement) {
+          this.overlayElement.addEventListener('click', e => this.handleCloseEvent(e), false);
+      }
+      document.addEventListener('keyup', e => this.handleKeyEvent(e));
+  }
+
+  open(pushbarId) {
+      if (this.activeId === String(pushbarId) || !pushbarId) return;
+      if (this.activeId && this.activeId !== String(pushbarId)) this.close();
+      this.activeId = pushbarId
+      this.activeElement = document.querySelector(`[data-pushbar-id="${this.activeId}"]`)
+      if (!this.activeElement) return;
+      this.emitOpening();
+      this.activeElement.classList.add('opened');
+      const pageRootElement = document.querySelector('html')
+      pageRootElement.classList.add('pushbar_locked');
+      pageRootElement.setAttribute('pushbar', pushbarId)
+  }
+
+  close() {
+      if (!this.activeId) return;
+      this.emitClosing();
+      this.activeElement.classList.remove('opened');
+      const pageRootElement = document.querySelector('html')
+      pageRootElement.classList.remove('pushbar_locked');
+      pageRootElement.removeAttribute('pushbar')
+      this.activeId = null;
+      this.activeElement = null;
+  }
+}
\ No newline at end of file