bulma-phlex-rails 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ad0e3e804dc9faff6ac9cbdf36b8b037584553ed9abfbcf3419e71d59a303b27
-  data.tar.gz: c2a35b63fe132af025e3560e4e020e0fcd9659f45befdf93d2d4ece1cc13120c
+  metadata.gz: 9ccde325abe028d8ab12fb8dfbcd754814274554029fffe1c443c21d0936c6e1
+  data.tar.gz: 0e526e0539626fa8b17780e9ce1db8edc2d81b68c4808fa0fcb108dad44e1944
 SHA512:
-  metadata.gz: 4aa3c95dd7418630d1095174a9c856c68389f4497e7c771321915739e91c4760c9676e524b5151f1ec12b827ef44a73ea54a374ff22f870dc2f851ba4c78db5c
-  data.tar.gz: f1a842f1c1c6af94222373b104d507578263eecb0d61f5770244f9bb2649a76b8f5fe28df7e93971eac88cca1a988afc709694558dfddc9a77692cfaa257d8c0
+  metadata.gz: fca248f599cd3f0793a37864c791e451b8e9019639e093dea13b27dc5a5443dc21b85959201f14763a896edf8f094c22907fd45854b74c6302dce3f5712430e0
+  data.tar.gz: 0e7e6196221edf59fb6c1303d4ef0e74d30522dfbb37e9c7c2ff8a15f3e90f33a6c3f65c142776ce1f9a53d155ab8e6860c909335bafe9ccd464e25c11b3d64e

data/app/javascript/controllers/bulma_phlex/dropdown_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus";
+
+/*
+  To use this Stimulus controller, add the controller to your dropdown container
+  and the action to your dropdown button:
+
+    <div class="dropdown" data-controller="bulma_phlex--dropdown">
+      <button data-action="bulma_phlex--dropdown#toggle">
+        Dropdown
+      </button>
+      <div class="dropdown-menu">...</div>
+    </div>
+
+  This will toggle the dropdown menu when the button is clicked.
+*/
+
+export default class extends Controller {
+  connect() {
+    this.closeHandler = this.close.bind(this);
+    document.addEventListener("click", this.closeHandler);
+  }
+
+  disconnect() {
+    if (this.closeHandler) {
+      document.removeEventListener("click", this.closeHandler);
+      this.closeHandler = null;
+    }
+  }
+
+  toggle(event) {
+    event.stopPropagation();
+    this.element.classList.toggle("is-active");
+  }
+
+  close(_event) {
+    this.element.classList.remove("is-active");
+  }
+}

data/app/javascript/controllers/bulma_phlex/file_input_display_controller.js

@@ -0,0 +1,82 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["fileInput", "fileList"]
+
+  acceptValues = []
+
+  connect() {
+    this.show()
+    this.#parseAcceptAttribute()
+  }
+
+  show() {
+    const preview = this.fileListTarget;
+    this.#clear(preview)
+
+    const curFiles = this.fileInputTarget.files;
+    if (curFiles.length === 0) {
+      const para = document.createElement("p")
+      para.textContent = "No files currently selected for upload"
+      preview.appendChild(para)
+    } else {
+      const list = document.createElement("ul")
+      preview.appendChild(list)
+  
+      for (const file of curFiles) {
+        const listItem = document.createElement("li")
+        listItem.textContent =  this.#fileTextContent(file)
+        list.appendChild(listItem);
+      }
+    }
+  }
+
+  #clear(preview) {
+    while (preview.firstChild) {
+      preview.removeChild(preview.firstChild);
+    }
+  }
+
+  #fileTextContent(file) {
+    if (this.#validFileType(file)) {
+      return this.#fileInfo(file);
+    } else {
+      return `File name ${file.name}: Not a valid file type. Update your selection.`;
+    }
+  }
+
+  #validFileType(file) {
+    // If no accept attribute is specified, accept all files
+    if (this.acceptValues.length === 0) {
+      return true
+    }
+
+    const fileExtension = `.${file.name.split('.').pop().toLowerCase()}`
+    const fileMimeType = file.type.toLowerCase()
+
+    // Check if the file matches any of the accept criteria
+    return this.acceptValues.some(acceptValue => {
+      if (acceptValue.startsWith('.')) {
+        // Check file extension (e.g. ".jpg")
+        return acceptValue.toLowerCase() === fileExtension
+      } else if (acceptValue.includes('/*')) {
+        // Check MIME type with wildcard (e.g. "image/*")
+        const acceptGroup = acceptValue.split('/')[0]
+        return fileMimeType.startsWith(`${acceptGroup}/`)
+      } else {
+        // Check specific MIME type (e.g. "image/jpeg")
+        return acceptValue === fileMimeType
+      }
+    })
+  }
+
+  #fileInfo(file) {
+    return `${file.name} (${file.size} bytes)`
+  }
+
+  #parseAcceptAttribute() {
+    if (this.fileInputTarget.accept) {
+      this.acceptValues = this.fileInputTarget.accept.split(',').map(type => type.trim())
+    }
+  }
+}

data/app/javascript/controllers/bulma_phlex/navigation_bar_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "burger", "menu" ]
+
+  toggle(_event) {
+    this.burgerTarget.classList.toggle('is-active');
+    this.menuTarget.classList.toggle('is-active');
+  }
+}

data/app/javascript/controllers/bulma_phlex/tabs_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["tab", "content"];
+
+  showTabContent(event) {
+    event.preventDefault();
+
+    const id = event.currentTarget.dataset.tabContent;
+    this.showTabAndContentForId(id);
+  }
+
+  showTabAndContentForId(id) {
+    this.manageTabs(id);
+    this.manageContent(id);
+  }
+
+  manageTabs(id) {
+    this.tabTargets.forEach((tab) => {
+      if (tab.dataset.tabContent === id) {
+        tab.classList.add("is-active");
+      } else {
+        tab.classList.remove("is-active");
+      }
+    });
+  }
+
+  manageContent(id) {
+    this.contentTargets.forEach((content) => {
+      if (content.id === id) {
+        content.classList.remove("is-hidden");
+      } else {
+        content.classList.add("is-hidden");
+      }
+    });
+  }
+}

data/config/importmap.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+pin_all_from File.expand_path("../app/javascript/controllers/bulma_phlex", __dir__), under: "controllers/bulma_phlex"

data/lib/bulma_phlex/rails/version.rb

@@ -2,6 +2,6 @@
 
 module BulmaPhlex
   module Rails
-    VERSION = "0.2.0"
+    VERSION = "0.2.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Todd Kummer
@@ -73,6 +73,11 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- app/javascript/controllers/bulma_phlex/dropdown_controller.js
+- app/javascript/controllers/bulma_phlex/file_input_display_controller.js
+- app/javascript/controllers/bulma_phlex/navigation_bar_controller.js
+- app/javascript/controllers/bulma_phlex/tabs_controller.js
+- config/importmap.rb
 - lib/bulma-phlex-rails.rb
 - lib/bulma_phlex/rails.rb
 - lib/bulma_phlex/rails/engine.rb