Pos module user invites

pos-module-user-invites/LICENSE

@@ -0,0 +1,20 @@
+Copyright platformOS and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

pos-module-user-invites/app/lib/hooks/hook_user_invites_current_profile.liquid

@@ -0,0 +1,4 @@
+{% liquid
+  function profile = 'modules/user/helpers/current_profile'
+  return profile
+%}

pos-module-user-invites/modules/common-styling/public/assets/js/dependency-proseMirror.js

@@ -0,0 +1,31 @@
+// import { EditorState } from 'prosemirror-state';
+// import { EditorView } from 'prosemirror-view';
+// import { Schema, DOMParser } from 'prosemirror-model';
+// import { exampleSetup } from 'prosemirror-example-setup';
+// import { schema, defaultMarkdownParser, defaultMarkdownSerializer } from 'prosemirror-markdown';
+// import { addMentionNodes, addTagNodes, getMentionsPlugin } from 'prosemirror-mentions'
+// import { getSingletonHighlighter } from 'shiki';
+// import { createHighlightPlugin } from 'prosemirror-highlight'
+// import { createParser } from 'prosemirror-highlight/shiki'
+
+// import 'prosemirror-view/style/prosemirror.css'
+// import 'prosemirror-menu/style/menu.css'
+// import 'prosemirror-example-setup/style/style.css'
+
+
+// // const proseMirrorSchema = new Schema({
+// //   nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+// //   marks: schema.spec.marks
+// // });
+
+
+// const highlighter = await getSingletonHighlighter({
+//   themes: ['github-light'],
+//   langs: ['javascript', 'typescript', 'python'],
+// });
+
+// const parser = createParser(highlighter);
+
+// const shikiPlugin = createHighlightPlugin({ parser });
+
+// export { EditorView, EditorState, DOMParser, schema, exampleSetup, addMentionNodes, addTagNodes, getMentionsPlugin, defaultMarkdownParser, defaultMarkdownSerializer, shikiPlugin }

pos-module-user-invites/modules/common-styling/public/assets/js/pos-code.js

@@ -0,0 +1,52 @@
+  /*
+  code highlighting
+*/
+
+
+pos.modules.code = function(settings){
+
+  // cache 'this' value not to be overwritten later
+  const module = this;
+
+
+  // purpose:		settings that are being used across the module
+  // ------------------------------------------------------------------------
+  module.settings = {};
+
+  // code container (dom node)
+  module.settings.container = settings.container;
+  // unique id for the module (string)
+  module.settings.id = settings.id;
+  // to enable debug mode (bool)
+  module.settings.debug = (typeof settings.debug === 'boolean') ? settings.debug : false;
+
+  // highlightjs instance
+  module.settings.highlightJs = hljs;
+
+
+  // purpose:		initializes the component
+  // ------------------------------------------------------------------------
+  module.init = () => {
+    if(!module.settings.id){
+      console.error('Please provide unique ID for the code module instance', module.settings.container);
+    }
+
+    pos.modules.debug(module.settings.debug, module.settings.id, 'Initializing code tools', module.settings.container);
+
+    module.highlight();
+  }
+
+
+  // purpose:		highlights the code
+  // ------------------------------------------------------------------------
+  module.highlight = () => {
+    module.settings.highlightJs.highlightElement(module.settings.container);
+
+    pos.modules.debug(module.settings.debug, module.settings.id, 'Highlighted code', module.settings.container);
+  };
+
+
+
+  module.init();
+
+};

pos-module-user-invites/modules/common-styling/public/assets/js/pos-collapsible.js

@@ -0,0 +1,113 @@
+/*
+  handles collapsible lists
+*/
+
+
+window.pos.modules.collapsible = function(userSettings){
+
+  // cache 'this' value not to be overwritten later
+  const module = this;
+
+
+  // purpose:		settings that are being used across the module
+  // ------------------------------------------------------------------------
+  module.settings = {};
+  // dialog container (dom node)
+  module.settings.container = userSettings.container;
+  // id used to mark the module (string)
+  module.settings.id = userSettings.id || module.settings.container.id;
+  // selector for toggle button selector (string)
+  module.settings.toggleButtonSelector = userSettings.toggleButtonSelector || '.pos-collapsible-toggle';
+  // selector for container with submenu (string)
+  module.settings.childrenContainerSelector = userSettings.childrenContainerSelector || '.pos-collapsible-children';
+  // to enable debug mode (bool)
+  module.settings.debug = (userSettings?.debug) ? userSettings.debug : false;
+
+
+
+  // purpose:		initializes the component
+  // ------------------------------------------------------------------------
+  module.init = () => {
+    pos.modules.debug(module.settings.debug, module.settings.id, 'Initializing collapsible list', module.settings);
+
+    module.settings.container.addEventListener('click', event => {
+      if(event.target.matches(module.settings.toggleButtonSelector)){
+        event.preventDefault();
+
+        module.toggle(event.target.parentElement);
+      }
+    });
+
+    module.settings.container.addEventListener('keydown', module.keyboard);
+  };
+
+
+  // purpose:		expands a submenu
+  // arguments: list item that you want to expand (dom node)
+  // ------------------------------------------------------------------------
+  module.open = menu => {
+    menu.querySelector(module.settings.childrenContainerSelector).removeAttribute('inert');
+    menu.querySelector(module.settings.toggleButtonSelector).setAttribute('aria-expanded', true);
+
+    pos.modules.debug(module.settings.debug, module.settings.id, 'Expanded menu', menu);
+    document.dispatchEvent(new CustomEvent('pos-collapsible-opened', { bubbles: true, detail: { target: menu, container: module.settings.container, id: module.settings.id } }));
+    pos.modules.debug(module.settings.debug, 'event', 'pos-collapsible-opened', { target: menu, container: module.settings.container, id: module.settings.id });
+  };
+
+
+  // purpose:		collapses a submenu
+  // arguments: list item that you want to collapse (dom node)
+  // ------------------------------------------------------------------------
+  module.close = menu => {
+
+    menu.querySelector(module.settings.childrenContainerSelector).setAttribute('inert', '');
+    menu.querySelector(module.settings.childrenContainerSelector).querySelectorAll(`${module.settings.childrenContainerSelector}`).forEach(submenu => {
+      pos.modules.debug(module.settings.debug, module.settings.id, 'Collapsed submenu', submenu);
+
+      submenu.setAttribute('inert', '');
+    });
+    menu.querySelector(module.settings.toggleButtonSelector).setAttribute('aria-expanded', false);
+
+    pos.modules.debug(module.settings.debug, module.settings.id, 'Collapsed menu', menu);
+    document.dispatchEvent(new CustomEvent('pos-collapsible-closed', { bubbles: true, detail: { target: menu, container: module.settings.container, id: module.settings.id } }));
+    pos.modules.debug(module.settings.debug, 'event', 'pos-collapsible-closed', { target: menu, container: module.settings.container, id: module.settings.id });
+  };
+
+
+  // purpose:   expands hidden menu or collapses already visible one
+  // arguments: list item that you want to toggle (dom node)
+  // ------------------------------------------------------------------------
+  module.toggle = menu => {
+    if(menu.querySelector(module.settings.childrenContainerSelector).inert){
+      module.open(menu);
+    } else {
+      module.close(menu);
+    }
+  };
+
+
+  // purpose:		handles keyboard navigation
+  // ------------------------------------------------------------------------
+  module.keyboard = event => {
+    if(event.key === 'ArrowRight'){
+      event.preventDefault();
+
+      if(document.activeElement.parentElement.querySelector(module.settings.toggleButtonSelector)){
+        module.open(event.target.parentElement);
+      }
+    }
+    else if(event.key === 'ArrowLeft'){
+      event.preventDefault();
+
+      if(document.activeElement.parentElement.querySelector(module.settings.toggleButtonSelector)){
+        module.close(event.target.parentElement);
+      }
+    }
+  };
+
+
+
+
+  module.init();
+
+};

pos-module-user-invites/modules/common-styling/public/assets/js/pos-debug.js

@@ -0,0 +1,32 @@
+/*
+  initializes pos modules
+*/
+
+
+
+// purpose:		debuging method that outputs data into the console
+// arguments: should the function run (bool)
+//            id of the module for which the debug data is printed (string)
+//            textual information about what is happening (string)
+//            optional data printed and parsed in the console (any)
+// ------------------------------------------------------------------------
+pos.modules.debug = (active, moduleId, information, data = '') => {
+  if(active || pos.debug){
+
+    if(moduleId === 'event'){
+      console.log(`%c⚑%c${information}`, 'padding: .2em .5em; background-color: #000; color: #fff; border-radius: 4px;', 'margin-inline-start: .5em; padding: .2em .5em; background-color: #000; color: #fff; border-radius: 4px;', data);
+    } else {
+
+      const stringToColor = (string, saturation = 100, lightness = 80) => {
+        let hash = 0;
+        for (let i = 0; i < string.length; i++) {
+          hash = string.charCodeAt(i) + ((hash << 5) - hash);
+          hash = (hash & hash) * 100;
+        }
+        return `hsl(${(hash % 360)}, ${saturation}%, ${lightness}%)`;
+      }
+
+      console.log(`%c${moduleId}%c ${information}`, `padding: .2em .5em; background-color: ${stringToColor(moduleId)}; border-radius: 4px;`, 'all: revert;', data);
+    }
+  }
+};

pos-module-user-invites/modules/common-styling/public/assets/js/pos-dialog.js

@@ -0,0 +1,87 @@
+  /*
+  handles openind and closing the dialog box
+
+  usage:
+*/
+
+
+
+// purpose:   opens and closes the dialog box
+// arguments: 
+// ************************************************************************
+window.pos.modules.dialog = function(userSettings){
+
+  // cache 'this' value not to be overwritten later
+  const module = this;
+
+  // purpose:		settings that are being used across the module
+  // ------------------------------------------------------------------------
+  module.settings = {};
+  // dialog container (dom node)
+  module.settings.container = userSettings.container;
+  // modal trigger (dom node)
+  module.settings.trigger = userSettings.trigger;
+  // id used to mark the module (string)
+  module.settings.id = userSettings.id || module.settings.trigger.dataset.dialogtarget;
+  // close button (dom nodes)
+  module.settings.closeButtons = userSettings.closeButtons || module.settings.container?.querySelectorAll('.pos-dialog-close');
+  // to enable debug mode (bool)
+  module.settings.debug = (userSettings?.debug) ? userSettings.debug : false;
+
+
+
+  // purpose:		initializes the component
+  // ------------------------------------------------------------------------
+  module.init = () => {
+    pos.modules.debug(module.settings.debug, module.settings.id, 'Initializing dialog', module.settings);
+
+    if(!module.settings.container){
+      console.error('Could not find dialog container with ID ' + module.settings.id + ' while it\'s trigger is present', module.settings.trigger);
+    }
+
+    module.settings.trigger.addEventListener('click', event => {
+      event.preventDefault();
+
+      module.open();
+    });
+
+    module.settings.container?.addEventListener('toggle', event => {
+      if(event.newState === 'open'){
+        pos.modules.debug(module.settings.debug, module.settings.id, 'Dialog opened', module.settings.container);
+        document.dispatchEvent(new CustomEvent('pos-dialog-opened', { bubbles: true, detail: { target: module.settings.container, id: module.settings.id } }));
+        pos.modules.debug(module.settings.debug, 'event', 'pos-dialog-opened', { target: module.settings.container, id: module.settings.id });
+      } else if(event.newState === 'closed') {
+        pos.modules.debug(module.settings.debug, module.settings.id, 'Dialog closed', module.settings.container);
+        document.dispatchEvent(new CustomEvent('pos-dialog-closed', { bubbles: true, detail: { target: module.settings.container, id: module.settings.id } }));
+        pos.modules.debug(module.settings.debug, 'event', 'pos-dialog-closed', { target: module.settings.container, id: module.settings.id });
+      }
+    });
+  };
+
+
+  // purpose:		opens the dialog
+  // ------------------------------------------------------------------------
+  module.open = () => {
+    module.settings.container.showModal();
+
+    module.settings.closeButtons.forEach(button => {
+      button.addEventListener('click', module.close);
+    });
+  };
+
+
+  // purpose:		closes the dialog
+  // ------------------------------------------------------------------------
+  module.close = () => {
+    module.settings.closeButtons.forEach(button => {
+      button.addEventListener('click', module.close);
+    })
+
+    module.settings.container.close();
+  }
+
+
+
+  module.init();
+
+};