nitro_rails 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58fecea7521e815c776c017ced0a11c7d9dcf37da50ece5bb1e1ec7917fd5596
-  data.tar.gz: ab26c0d8d11fa746ff7ad749c0e59327f638f70514383d93cbb6ec3e44593539
+  metadata.gz: 7f71c75899ffa891a15764b40d7b2689c0bb60ed23ebd40e6122837958e0a613
+  data.tar.gz: ebd57bac0083b2d6c1b19b0212e5c61c152fe7d8a92194a44113912f59996879
 SHA512:
-  metadata.gz: 3d18abd332c81c5aab048c83ca575bff72e53467ce0586a18d89b778330771c96c1fe0352ee94f6e0be34c5116348ecf4086ea3017062201878aa9bfa7e5f73f
-  data.tar.gz: edc206a091c19e45f4c416a37814fee496307d2bb548933ad1fdd2627c8a3cb568822b2a8bcf3012642e092bec0650ed5cdc110eb6e055122fe89bc55c55ba57
+  metadata.gz: a287da566c8533cf9793ce71405e48a62610862cdd1277361fa7c714af73c3ba03c7555505a19bd7098a34bf3eda713a685ee2628d003e7e2c3cdc2d49c86ba1
+  data.tar.gz: 979d4d22beccf10641a959762e6c91c8bb084746bea0e79dcc880a8fe65efa68c305763e90c6bdf7352138ff66d857376c4d621d3e3955f577fdf973375928a6

data/README.md

@@ -21,6 +21,24 @@ Or install it yourself as:
 $ gem install nitro_rails
 ```
 
+## Features
+
+### NitroTags
+Similar to content_tag with additional functions.
+```erb 
+<%= nitro_tag(:h1, "Hello World") %>
+```
+
+Allows for hashed styles:
+```erb
+<%= nitro_tag(:div, "Hello World", style: { color: "red", margin_bottom: 20 })
+```
+
+Allows for easy "nitro_id" via resource and attribut
+```erb 
+<%= nitro_tag(:p, resource: @task, attribute: :description) %> <%# data-nitro-id = "task_3:description" %>
+```
+
 ## Contributing
 Contribution directions go here.
 

data/app/assets/config/nitro_rails_manifest.js

@@ -1 +1,3 @@
 //= link_directory ../stylesheets/nitro_rails .css
+//= link_tree ../javascript/nitro_rails .js
+//= link_tree ../images/nitro_rails

data/app/assets/javascript/nitro_rails/application.js

@@ -0,0 +1,4 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
+import "./controllers/index.js"
+import "./turbo_streams/index.js"

data/app/assets/javascript/nitro_rails/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/app/assets/javascript/nitro_rails/controllers/audio_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  // Preload audio files
+  connect() {
+    this.audio = new Audio(`/assets/${this.element.dataset.audio}.mp3`)
+    this.audio.load();
+    this.audio.preload = "auto";
+    // this.audio.time
+  }
+
+  play() {
+    this.audio.currentTime = 20000;
+    this.audio.play();
+  }
+}

data/app/assets/javascript/nitro_rails/controllers/clock_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["time"]
+  static values = { format: String }
+
+  connect() {
+    this.updateTime();
+    this.interval = setInterval(this.updateTime.bind(this), 1000);
+  }
+
+  disconnect() {
+    clearInterval(this.interval);
+  }
+
+  updateTime() {
+    const now = new Date();
+    const options = { hour: 'numeric', minute: 'numeric' };
+    this.timeTarget.textContent = now.toLocaleTimeString(undefined, options);
+  }
+}

data/app/assets/javascript/nitro_rails/controllers/editable_text_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["input", "editor", "form"]
+  static values = { attribute: String }
+
+  connect() {
+    this.inputTarget.value = this.editorTarget.innerText;
+    this.typingTimer;
+  }
+
+  focus() {
+    this.editorTarget.setAttribute('data-reject-broadcasts', '');
+  }
+
+  blur() {
+    this.editorTarget.removeAttribute('data-reject-broadcasts');
+    this.submit();
+  }
+
+  submit() {
+    if(this.inputTarget.value != this.editorTarget.innerText || this.editorTarget.innerText == '') {
+      this.inputTarget.value = this.editorTarget.innerText.trim();
+      this.formTarget.requestSubmit();
+    }
+  }
+
+  handleKeyDown(event) {
+    if(event.key == 'Enter') {
+      this.handleEnterKey(event);
+    } else {
+      clearTimeout(this.typingTimer);
+      this.typingTimer = setTimeout(this.submit.bind(this), 750)
+      if(event.key == 'Backspace') {
+        this.handleBackspaceKey(event);
+      }
+    }
+  }
+
+  handleEnterKey(event) {
+    event.preventDefault();
+    this.editorTarget.dataset.temporaryPlacement = window.getSelection().getRangeAt(0).startOffset;
+    this.editorTarget.blur();
+    return;
+  }
+
+  handleBackspaceKey(event) {
+    const selectionRange = window.getSelection().getRangeAt(0);
+
+    if(selectionRange.startOffset == 0 && selectionRange.endOffset == 0) {
+      event.preventDefault();
+    }
+
+    if(this.editorTarget.innerText.length == 1 || (selectionRange.startOffset == 0 && selectionRange.endOffset == this.editorTarget.innerText.length)) {
+      this.editorTarget.innerText = '';
+    }
+
+    return;
+  }
+
+}

data/app/assets/javascript/nitro_rails/controllers/index.js

@@ -0,0 +1,21 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "./application"
+
+// Load all controllers one by one
+// import EngineController from "./engine_controller"
+// application.register("engine", EngineController)
+
+// const controllers = ["editable_text", "search", "panel", "panel_manager", "resource_collection", "switch"];
+
+const controllers = ["panel", "panel_manager", "editable_text", "time_zone", "togglable_checkbox", "nitro", "clock", "nitro_form", "audio", "nitro_collection", "tabs"];
+
+controllers.forEach((controller) => {
+  import(`./${controller}_controller.js`).then(( { default: module }) => {
+    application.register(controller.replace("_", "-"), module)
+  })
+})
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

data/app/assets/javascript/nitro_rails/controllers/nitro_collection_controller.js

@@ -0,0 +1,127 @@
+// HACK: Needs major refactoring
+
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["template", "collection", "container", "item", "selections", "selectionForm"];
+
+  connect() {
+    this.selectedItems = [];
+    this.dragEvent = {
+      dragging: false,
+      originItem: null,
+      currentItem: null,
+      draggingItem: null
+    };
+  }
+
+  addTemporaryItem() {
+    var content = this.templateTarget.innerHTML;
+    var newElement = document.createElement("div");
+    newElement.innerHTML = content;
+    this.collectionTarget.appendChild(newElement);
+  }
+
+  selectItem(event) {
+    var item = event.currentTarget.closest("[data-nitro-collection-target='item']");
+
+    if(item.dataset.selected === "true") {
+      item.dataset.selected = "false";
+      item.classList.remove("selected");
+      this.selectedItems = this.selectedItems.filter(i => i !== item);
+    } else {
+      item.dataset.selected = "true";
+      item.classList.add("selected");
+      this.selectedItems.push(item);
+    }
+
+    if(this.selectedItems.length > 0) {
+      this.collectionTarget.classList.add("has-selection");
+      this.selectionsTarget.classList.remove("hidden");
+    } else {
+      this.collectionTarget.classList.remove("has-selection");
+      this.selectionsTarget.classList.add("hidden");
+    }
+
+    this.selectionsTarget.querySelector("#selection-count").innerText = `${this.selectedItems.length}`;
+
+    this.selectionFormTargets.forEach((form) => {
+      if(!form.querySelector(`#hidden-selections`)) {
+        var hiddenDiv = document.createElement("div");
+        hiddenDiv.id = "hidden-selections";
+        form.appendChild(hiddenDiv);
+      } 
+
+      const selectionsDiv = form.querySelector(`#hidden-selections`);
+      selectionsDiv.innerHTML = "";
+
+      this.selectedItems.forEach((item, index) => {
+        selectionsDiv.innerHTML += `<input type="hidden" name="selected_ids[]" value="${item.dataset.id}">`;
+      });
+    });
+  }
+
+  startReposition(event) {
+    if(event.target.closest("a, input, button, textarea, .nitro-form-submit")) {
+      return;
+    }
+
+    event.preventDefault();
+    const item = event.currentTarget.closest("[data-nitro-collection-target='item']");
+    const itemClone = item.cloneNode(true);
+
+    this.dragEvent.originItem = item;
+    this.dragEvent.draggingItem = itemClone;
+    this.dragEvent.dragging = true;
+
+    item.classList.add("placeholder");
+
+
+    itemClone.style.position = "absolute";
+    itemClone.style.zIndex = "1000";
+    itemClone.id = "dragging-item";
+    itemClone.classList.add("dragging");
+    itemClone.dataset.action = "mouseup->nitro-collection#endReposition";
+
+    document.addEventListener("mousemove", (e) => {
+      itemClone.style.left = `${e.pageX - itemClone.offsetWidth / 2}px`;
+      itemClone.style.top = `${e.pageY - itemClone.offsetHeight / 2}px`;
+    });
+
+    document.addEventListener("mouseup", (e) => {
+      this.endReposition(e);
+      document.removeEventListener("mousemove", null);
+    });
+
+    this.collectionTarget.appendChild(itemClone);
+
+    itemClone.style.width = `${item.getBoundingClientRect().width}px`;
+    itemClone.style.left = `${event.pageX - itemClone.offsetWidth / 2}px`;
+    itemClone.style.top = `${event.pageY - itemClone.offsetHeight / 2}px`;
+  }
+
+  changePosition(event) {
+    this.dragEvent.currentItem = event.currentTarget.closest("[data-nitro-collection-target='item']");
+
+    if(this.dragEvent.dragging && this.dragEvent.currentItem !== this.dragEvent.originItem) {
+      if(this.dragEvent.currentItem !== this.dragEvent.originItem.nextElementSibling) {
+        this.collectionTarget.insertBefore(this.dragEvent.originItem, this.dragEvent.currentItem);
+      } else {
+        this.collectionTarget.insertBefore(this.dragEvent.originItem, this.dragEvent.currentItem.nextElementSibling);
+      }
+    }
+  }
+
+  endReposition() {
+    if(this.dragEvent.dragging) {
+      this.dragEvent.originItem.classList.remove("placeholder");
+      this.dragEvent.draggingItem.remove();
+      this.dragEvent = {
+        dragging: false,
+        originItem: null,
+        currentItem: null,
+        draggingItem: null
+      };
+    }
+  }
+};

data/app/assets/javascript/nitro_rails/controllers/nitro_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  changeClasses(event) {
+    console.log("Changing classes");
+    var data = new FormData(event.target)
+    console.log(data.keys());
+    console.log(data.get("daypoint[num_stars]"));
+    var newNum = data.get("daypoint[num_stars]");
+    document.querySelector('[data-broadcast-tag="daypoint-69"]').classList.remove("stars-1", "stars-2", "stars-3", "stars-4", "stars-5");
+    document.querySelector('[data-broadcast-tag="daypoint-69"]').classList.add("stars-" + newNum);
+    // document.querySelector("[data-broadcast-tag='daypoint-69'").toggleClass("stars-" + newNum, true);
+
+    // data.getAll.for
+
+    for (const [name, value] of data.entries()) {
+      console.log(name + ": " + value);
+    }
+  }
+
+  simulateResponse() {
+    console.log("Simulating response");
+    // var data = new FormData();
+    // data.append("daypoint[num_stars]", "3");
+    // var event = {
+    //   target: document.querySelector('[data-broadcast-tag="daypoint-69"]')
+    // };
+    // this.changeClasses(event);
+  }
+
+  link(event) {
+    var url = event.currentTarget.getAttribute("data-nitro-link");
+    window.location.href = url;
+  }
+};

data/app/assets/javascript/nitro_rails/controllers/nitro_form_controller.js

@@ -0,0 +1,81 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["form", "field", "collection"]
+  static values = {
+    resourceTarget: String
+  }
+
+  submit(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.formTarget.requestSubmit();
+
+    if(this.formTarget.dataset.nitroEffects) {
+      console.log(this.formTarget.dataset.nitroEffects);
+      this.formTarget.dataset.nitroEffects.split(" ").forEach((effect) => {
+        if(this[effect]) {
+          this[effect]();
+        }
+      });
+    }
+  }
+
+  insertItems(){
+
+  }
+
+  addToAffiliatedLists(affiliation, value, field) {
+    document.querySelectorAll(`[data-nitro-collection-id="${affiliation}"]`).forEach((element) => {
+      var collectionController = window.Stimulus.getControllerForElementAndIdentifier(element, "nitro-collection");
+      collectionController.addTemporaryItem();
+    });
+  }
+
+  attributeEffects(){
+    this.fieldTargets.forEach((field) => {
+      field.dataset.nitroEffects.split(" ").forEach((effect) => {
+        if(this[effect]) {
+          this[effect](field.dataset.nitroAttribute, field.value, field);
+        }
+      });
+      console.log(field.dataset.nitroEffects)
+    });
+  }
+
+  updateStatusClass(attribute, value) {
+    console.log(`Updating status class for ${attribute} with value ${value}`);
+    document.querySelectorAll(`[data-nitro-id="${this.resourceTargetValue}"], [data-nitro-id="${this.resourceTargetValue}:${attribute}"]`).forEach((element) => {
+      // Remove classes starting with attribute 
+      element.classList.forEach((className) => {
+        if(className.startsWith(attribute)) {
+          element.classList.remove(className);
+        }
+      });
+
+      element.classList.add(`${attribute}-${value}`);
+    });
+    
+    this.resourceTargetValue
+  }
+
+  toggleBooleanStatusClass(attribute, value, field) {
+    document.querySelectorAll(`[data-nitro-id="${this.resourceTargetValue}"]`).forEach((element) => {
+      if(field.checked) {
+        element.classList.add(`${attribute}`);
+      } else {
+        element.classList.remove(`${attribute}`);
+      }
+    });
+  }
+
+  removeItem() {
+    document.querySelectorAll(`[data-nitro-id="${this.resourceTargetValue}"]`).forEach((element) => {
+      element.remove();
+    });
+  }
+
+  connect() {
+    console.log("Nitro Form Connected!");
+  }
+};

data/app/assets/javascript/nitro_rails/controllers/panel_controller.js

@@ -0,0 +1,70 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["turboFrame"]
+
+  connect() {
+    this.initialPanelTop = null;
+    this.isCardFullyExpanded = false;
+    console.log("Panel Connected!");
+    // this.element.addEventListener('wheel', this.handleScroll.bind(this));
+  }
+
+  open() {
+    let path = this.turboFrameTarget.src 
+    path = new URL(path, window.location.href);
+    path.searchParams.delete("panel_request");
+    Turbo.visit(path, { action: "advance" });
+  }
+
+  beforeVisit(event) {
+    console.log(event);
+    console.log(event.srcElement.src);
+    // event.srcElement.src = event.srcElement.src + "?panel_request=true";
+
+    const { fetchOptions } = event.detail;
+
+    // Add your custom header
+    fetchOptions.headers["Turbo-Panel-Request"] = "true";
+    console.log(fetchOptions.headers);
+
+  }
+
+  close() {
+    this.element.remove();
+  }
+
+  scroll(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("SCROLLING PANEL");
+    console.log(event);
+  }
+
+  handleScroll(event) {
+    if (!this.isCardFullyExpanded) {
+      event.preventDefault();
+      const scrollDirection = event.deltaY * -1; // Positive when scrolling down, negative when scrolling up
+
+      // Initialize initialPanelTop if it's not set
+      if (this.initialPanelTop === null) {
+        const panelPosition = this.element.getBoundingClientRect();
+        this.initialPanelTop = panelPosition.top;
+      }
+
+      // Calculate new position based on scroll direction
+      let newTopPosition = this.initialPanelTop + scrollDirection;
+      newTopPosition = Math.max(newTopPosition, 0); // Ensure the panel does not move above the top of the screen
+
+      // Move the panel by updating its CSS transform property
+      this.element.style.transform = `translateY(${newTopPosition}px)`;
+
+      if (newTopPosition === 0) {
+        this.isCardFullyExpanded = true; // The card is now fully expanded
+      } else {
+        // Update initialPanelTop for the next scroll event
+        this.initialPanelTop = newTopPosition;
+      }
+    }
+  }
+}

data/app/assets/javascript/nitro_rails/controllers/panel_manager_controller.js

@@ -0,0 +1,89 @@
+import { Controller } from '@hotwired/stimulus';
+import { deviceInfoHelper } from '../helpers/device_info_helper';
+import { screenInfoHelper } from '../helpers/screen_info_helper';
+
+// Needs a complete overhaul, probably so that links and panels are connected without panel containers
+export default class extends Controller {
+  static targets = ["panelTemplate", "container", "panel"]
+  connect() {
+  }
+
+  morph(event) {
+    this.containerTargets.forEach((panel) => {
+      console.log(panel);
+    });
+  }
+
+  closeOtherPanels(event) {
+    let activePanels = this.panelTargets.filter((panel) => {
+      return panel.closest('.panel-container').classList.contains("active");
+    });
+
+    let currentPanelContainer = event.target.closest('.panel-container');
+    activePanels.forEach((panel) => {
+
+      if(panel.closest('.panel-container') !== currentPanelContainer) {
+        panel.closest('.panel-container').classList.remove("active");
+        panel.classList.add("hidden");
+      }
+    });
+  }
+
+  closeAllPanels(event) {
+    if(event.target === event.currentTarget) {
+      this.panelTargets.forEach((panel) => {
+        panel.closest('.panel-container').classList.remove("active");
+        panel.classList.add("hidden");
+      });
+    }
+  }
+
+  initializePanel(anchor, panelContainer, panelID) {
+    const panel = this.panelTemplateTarget.cloneNode(true);
+    
+    panel.id = panelID;
+
+    // Add panel request parameter to path 
+    let path = new URL(anchor.getAttribute("href"), window.location.href);
+    path.searchParams.append("panel_request", "true");
+
+    
+
+    if(anchor.dataset.panelPresentation) {
+      console.log(anchor.dataset);
+      panel.classList.add(anchor.dataset.panelPresentation);
+    }
+
+    panel.dataset.panelManagerTarget = "panel";
+    panelContainer.appendChild(panel);
+    panel.querySelector("turbo-frame").src = anchor.getAttribute("href");
+    return panel;
+  }
+
+  toggle(event) {
+    if(deviceInfoHelper.isIOSApp() || this.isInPanel(event)) {
+      console.log("HERE");
+      return;
+    }
+
+    event.preventDefault();
+
+    let anchor = event.currentTarget;
+    let panelContainer = (anchor.closest('.panel-container') || document.body);
+
+    let panelID = `panel-${anchor.dataset.panelId}`;
+    let panel = (panelContainer.querySelector(`#${panelID}`) || this.initializePanel(anchor, panelContainer, panelID));
+  
+    if(panel.classList.contains("hidden")) {
+      panel.classList.remove("hidden");
+      panelContainer.classList.add("active");
+    } else {
+      panel.classList.add("hidden");
+      panelContainer.classList.remove("active");
+    }
+  }
+
+  isInPanel(event) {
+    return event.currentTarget.closest('[data-controller~="panel"]') !== null;
+  }
+}

data/app/assets/javascript/nitro_rails/controllers/tabs_controller.js

@@ -0,0 +1,81 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tab", "screen", "screens"]
+
+  connect(event) {
+    if(this.element.dataset.tabsLoaded === "true") {
+      return
+    }
+
+    this.tabId = this.element.id || "tab";
+    const source = this.element.closest("turbo-frame");
+    let urlParams;
+    
+    if (source && source.src) {
+      urlParams = new URLSearchParams(source.src.split("?")[1]);
+    } else {
+      urlParams = new URLSearchParams(window.location.search);
+    }
+
+    const tab = urlParams.get(this.tabId);
+
+    if (tab) {
+      const selectedTab = this.tabTargets.find((searchTab) => searchTab.dataset.tabsScreen === tab);
+
+      if (selectedTab) {
+        this.#showScreen(selectedTab);
+      }
+    } else {
+      this.#showScreen(this.tabTargets[0]);
+    }
+
+    this.element.dataset.tabsLoaded = "true";
+  }
+
+  changeScreens(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    let selectedScreen = this.#showScreen(event.currentTarget);
+    console.log(selectedScreen);
+    let masonry = selectedScreen.querySelectorAll(".masonry");
+
+    if (masonry.length > 0) {
+      masonry.forEach((m) => {
+        let stimulusController = this.application.getControllerForElementAndIdentifier(m, "masonry")
+        stimulusController.layout()
+      })
+    }
+  }
+
+  #showScreen(tab) {
+    const screenName = tab.dataset.tabsScreen
+    this.#addQueryParamToCurrentUrl(this.tabId, screenName)
+    this.#clearState();
+
+    tab.classList.add("active")
+
+    let screenTarget = this.screensTarget.querySelector(`[data-tabs-screen="${screenName}"]`);
+    if (screenTarget) {
+      screenTarget.classList.remove("hidden")
+    }
+    return screenTarget;
+  }
+
+  #addQueryParamToCurrentUrl(key, value) {
+    const url = new URL(window.location.href);
+    url.searchParams.set(key, value);
+    window.history.replaceState({}, '', url);
+  }
+
+  #clearState() {
+    this.tabTargets.forEach((tab) => {
+      tab.classList.remove("active");
+    })
+
+    this.screenTargets.forEach((screen) => {
+      screen.classList.add("hidden");
+    })
+  }
+}