RubyGems - headmin - Versions diffs - 0.2.8 → 0.3.4 - Mend

headmin 0.2.8 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (271) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 97d58b9cf116a2017929bd0460593bedc48a2be8e8d53011b6db46fc3ee1df5f
-  data.tar.gz: 379caa2715bb6c22efe961996420ce9fe0c8a6dc17ee88847d0d9661da768328
+  metadata.gz: ad3c5fca4f0e3c7c03fcf5a1b45887c7e247bb21b37b521a46afed5fe25fdfb6
+  data.tar.gz: 1c2a9d3d91fa0bdc3162e12ddffd44147943ed5035d40919bebf11d8f6e6447d
 SHA512:
-  metadata.gz: 5d0452d83d31e5ac38ce1d75fc3d189d0400343d1f0ca82690e9d4c284a5acdae9dba36862b0a2aeba0784ca1c6cb1241970752de836b03cf62a08cbedf32b23
-  data.tar.gz: 01e9857909d763690fbf63ab0efe901f49894594060e3945b777b025414a5c294c2a5af475f47d1cc21ac9757cd5341610ee555a197eb30340e949219ac1accf
+  metadata.gz: ee176196b6f86c2253b5564b9e49b16f58c2b24789856a126a3c98d76a32759d17fa9c0c985206cec590a967de9da26657d04fd3ecba176dbaef20c613558ff3
+  data.tar.gz: ebd63d265dcbfba01c31a84304634dacb4e8a5642577cffab64eddbdcc91a7c2fd1f51d162b67b7bc3ec1fee2ef0695f3c509510f98e6ba7c322c2adaea75c37

data/.ruby-version CHANGED Viewed

	@@ -1 +1 @@
1	- ruby-3.0.0
1	+ ruby-3.1.0

data/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,31 @@
-## [Unreleased]
+# Headmin Changelog
-## [0.0.1] - 2021-03-14
+## 0.3
-- Initial release
+- Support for import maps added
+- Headmin is now works with Rails 7
+- All JS is moved to Stimulus controllers thus deprecating the need for a custom initialization process
+- Makeover of `headmin/forms/file`
+    - added attribute `dropzone` to enable drag&drop
+    - added attribute `preview` to enable previews
+- Image previews for `headmin/forms/image` are not enabled by default anymore. To enable you can add `preview: true`. To
+  render previews for attachments add them as nested_attributes to your model
+```rb
+has_one_attached :image
+accepts_nested_attributes_for :image_attachment
+```
+- **BREAK**: CKEditor has been removed in favor of RedactorX.
+  Download a purchased copy of RedactorX and add it to your `<head>` like this:
+```html
+<head>
+    <script src="<%= asset_path('redactorx') %>" type="module"></script>
+</head>
+```
+## 0.2.8
+- ...

data/Gemfile CHANGED Viewed

@@ -8,4 +8,4 @@ gemspec
 gem "rake", "~> 13.0"
 gem "minitest", "~> 5.0"
-gem "rubocop", "~> 1.7"
+gem "standard", "~> 1.7"

data/Gemfile.lock CHANGED Viewed

@@ -1,56 +1,71 @@
 PATH
   remote: .
   specs:
-    headmin (0.2.7)
-      closure_tree
+    headmin (0.3.3)
+      closure_tree (~> 7.4)
+      inline_svg (~> 1.7)
+      redcarpet (~> 3.5)
+      rouge (~> 3.27)
 GEM
   remote: https://rubygems.org/
   specs:
-    activemodel (6.1.4.1)
-      activesupport (= 6.1.4.1)
-    activerecord (6.1.4.1)
-      activemodel (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
-    activesupport (6.1.4.1)
+    activemodel (7.0.1)
+      activesupport (= 7.0.1)
+    activerecord (7.0.1)
+      activemodel (= 7.0.1)
+      activesupport (= 7.0.1)
+    activesupport (7.0.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
     ast (2.4.2)
     closure_tree (7.4.0)
       activerecord (>= 4.2.10)
       with_advisory_lock (>= 4.0.0)
     concurrent-ruby (1.1.9)
-    i18n (1.8.11)
+    i18n (1.9.1)
       concurrent-ruby (~> 1.0)
+    inline_svg (1.8.0)
+      activesupport (>= 3.0)
+      nokogiri (>= 1.6)
     minitest (5.14.4)
-    parallel (1.20.1)
-    parser (3.0.0.0)
+    nokogiri (1.13.1-x86_64-darwin)
+      racc (~> 1.4)
+    parallel (1.21.0)
+    parser (3.1.0.0)
       ast (~> 2.4.1)
-    rainbow (3.0.0)
+    racc (1.6.0)
+    rainbow (3.1.1)
     rake (13.0.3)
-    regexp_parser (2.1.1)
-    rexml (3.2.4)
-    rubocop (1.11.0)
+    redcarpet (3.5.1)
+    regexp_parser (2.2.0)
+    rexml (3.2.5)
+    rouge (3.27.0)
+    rubocop (1.25.0)
       parallel (~> 1.10)
-      parser (>= 3.0.0.0)
+      parser (>= 3.1.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml
-      rubocop-ast (>= 1.2.0, < 2.0)
+      rubocop-ast (>= 1.15.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.4.1)
-      parser (>= 2.7.1.5)
+    rubocop-ast (1.15.1)
+      parser (>= 3.0.1.1)
+    rubocop-performance (1.13.2)
+      rubocop (>= 1.7.0, < 2.0)
+      rubocop-ast (>= 0.4.0)
     ruby-progressbar (1.11.0)
+    standard (1.7.0)
+      rubocop (= 1.25.0)
+      rubocop-performance (= 1.13.2)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.0.0)
+    unicode-display_width (2.1.0)
     with_advisory_lock (4.6.0)
       activerecord (>= 4.2)
-    zeitwerk (2.5.1)
 PLATFORMS
   x86_64-darwin-19
@@ -59,7 +74,7 @@ DEPENDENCIES
   headmin!
   minitest (~> 5.0)
   rake (~> 13.0)
-  rubocop (~> 1.7)
+  standard (~> 1.7)
 BUNDLED WITH
-   2.2.14
+   2.3.3

data/README.md CHANGED Viewed

@@ -1,4 +1,5 @@
 # Headmin
 A complete library of commonly used components to build an admin interface in your Ruby on Rails project.
 [![Gem Version](https://badge.fury.io/rb/headmin.svg)](https://rubygems.org/gems/headmin)
@@ -6,77 +7,98 @@ A complete library of commonly used components to build an admin interface in yo
 ## Installation
-Add this line to your application's Gemfile:
+To install Headmin into your current Rails application use bundler:
-```ruby
-gem 'headmin'
+```shell
+$ bundle add 'headmin'
 ```
-And then execute:
+## Usage
+All assets are available via the asset pipeline and can be called as if it was available in your application.
-```shell
-$ bundle install
+### Stylesheets
+Import all SCSS stylesheets like this:
+```scss
+@import "headmin";
+```
+- Asset Pipeline: `Sprockets` & `sassc-rails` will pickup the correct file automatically
+- Node: Use a build tool like `ESBuild`, `Webpack` or `Rollup` to find the right file via Headmins' package.json
+### Javascript
+Import the `Headmin` class into your script and initialize it. This will append its Stimulus controllers to
+the `window.Stimulus object` if it's available.
+```js
+import {Headmin} from 'headmin'
+Headmin.start()
 ```
-Add headmin to list of node modules
+### Node or not to Node
+With the introduction of importmap in Rails 7, you're no longer required to use node for your frontend assets.
+By default all assets are available via the asset pipeline and added to the default importmap.rb.
+If you want to use node because you're tied to a specific build tool, you can add Headmin as a dependency to your package.json.
 ```shell
 $ yarn add headmin
 ```
-## Usage
-Add the Headmin helpers to the Admin helper file
+## Helpers
+Add the Headmin helpers to your helper file. We recommend using namespaces.
 ```ruby
+# In a, preferably namespaced, view helper
 module AdminHelper
   include Headmin::AdminHelper
 end
 ```
-Import the Headmin class into your script.
-```js
-import {Headmin} from 'headmin'
-document.addEventListener("DOMContentLoaded", function () {
-    Headmin.start()
-})
-```
-Finally import Headmin in your stylesheet.
-```scss
-@import '~headmin/src/scss/headmin.scss';
-```
-### Integrations
-- [Blocks](docs/blocks.md)
-- [Fields](docs/fields.md)
-- [Blocks + Fields = Magic](docs/blocks-and-fields.md)
-- [Devise](docs/devise.md)
 ## Development
 For development purposes it's helpful to have both the test project and Headmin located in the same directory.
 In Gemfile
 ```ruby
 gem "headmin", path: "../headmin"
 ```
 In package.json
 ```json
 {
   "dependencies": {
-    "bar": "file:../headmin"
+    "headmin": "link:../headmin"
   }
 }
 ```
+To see frontend changes update live in development run
+```shell
+# Watches changes and builds them on-the-fly
+yarn dev
+```
+### Javascript
+When adding new dependencies, make sure you add them to the `package.json` file as well as the `importmap.rb` file.
 ## Testing
-If you want to test a specific feature in a staging environment without releasing the gem, you can refer to the remote repo in your Gemfile and package.json.
+If you want to test a specific feature in a staging environment without releasing the gem, you can refer to the remote
+repo in your Gemfile and package.json.
 In Gemfile
 ```ruby
 gem 'headmin', git: 'git@github.com:insiting/headmin.git', branch: 'feature/test'
 ```
 In package.json
 ```json
 {
   "dependencies": {
@@ -87,50 +109,35 @@ In package.json
 ```
 ## Releasing
-After integration a new feature of fixing a bug, first commit and push your changes.
-Build the assets for production
-```shell
-$ nvm use
-$ yarn build
-```
+After integration a new feature of fixing a bug, first commit and push your changes.
-Update the version number of the gem
+Update the gem
 ```shell
 # First bundle if new runtime dependencies were added
 $ bundle
-$ git push
-# Update the version number and tag the release
+# Update the version number, push commits and tag the release
 $ gem bump -v {patch,minor,major,...} --push --tag
 # Release to Rubygems
 $ gem release
 ```
-Update the node module
-```
-# Manually update the version number in package.json
-$ npm publish
-```
+Update the node package
-## Deployment
-Update the Headmin gem to the latest version
 ```shell
-$ bundle update headmin
-```
-Update the Headmin node module ot the latest version
-```shell
-$ yarn upgrade headmin
+# Manually update the version number in package.json
+$ yarn build
+$ npm publish
 ```
-Deploy your app as usual
 ## Contributing
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/headmin. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/headmin/blob/master/CODE_OF_CONDUCT.md).
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/headmin. This project is intended
+to be a safe, welcoming space for collaboration, and contributors are expected to adhere to
+the [code of conduct](https://github.com/[USERNAME]/headmin/blob/master/CODE_OF_CONDUCT.md).
 ## License
@@ -138,4 +145,5 @@ The gem is available as open source under the terms of the [MIT License](https:/
 ## Code of Conduct
-Everyone interacting in the Headmin project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/headmin/blob/master/CODE_OF_CONDUCT.md).
+Everyone interacting in the Headmin project's codebases, issue trackers, chat rooms and mailing lists is expected to
+follow the [code of conduct](https://github.com/[USERNAME]/headmin/blob/master/CODE_OF_CONDUCT.md).

data/app/assets/config/headmin_manifest.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ //= link_tree ../images
2	+ //= link_tree ../javascripts

data/app/assets/images/document.docx ADDED Viewed

Binary file

data/{src/scss/headmin/filters.scss → app/assets/images/document.pdf} RENAMED Viewed

File without changes

data/app/assets/images/image.jpg ADDED Viewed

Binary file

data/app/assets/images/spreadsheet.xls ADDED Viewed

Binary file

data/app/assets/images/video.mp4 ADDED Viewed

Binary file

data/app/assets/javascripts/headmin/config/i18n.js ADDED Viewed

@@ -0,0 +1,11 @@
+export default class {
+    static get locale() {
+        if (window.I18n === undefined) {
+            const locale = document.querySelector('html').getAttribute('lang')
+            window.I18n = {
+                locale: locale || 'en'
+            }
+        }
+        return window.I18n.locale
+    }
+}

data/{src/js → app/assets/javascripts}/headmin/controllers/blocks_controller.js RENAMED Viewed

@@ -1,6 +1,5 @@
 import {Controller} from "@hotwired/stimulus"
 import Sortable from "sortablejs";
-import { createPopper } from '@popperjs/core';
 export default class extends Controller {
     static get targets() {

data/{src/js → app/assets/javascripts}/headmin/controllers/date_range_controller.js RENAMED Viewed

@@ -1,6 +1,4 @@
 import {Controller} from "@hotwired/stimulus"
-import Sortable from "sortablejs";
-import { createPopper } from '@popperjs/core';
 export default class extends Controller {
     static get targets() {

data/app/assets/javascripts/headmin/controllers/dropzone_controller.js ADDED Viewed

@@ -0,0 +1,33 @@
+import {Controller} from "@hotwired/stimulus"
+// References:
+// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+export default class extends Controller {
+    static get targets() {
+        return ["input"]
+    }
+    connect() {
+        this.element.classList.add('h-dropzone')
+        // Drag
+        this.inputTarget.addEventListener('dragover', (event) => {
+            this.element.classList.add('dragover')
+        })
+        this.inputTarget.addEventListener('dragleave', (event) => {
+            this.element.classList.remove('dragover')
+        })
+        this.inputTarget.addEventListener('drop', (event) => {
+            this.element.classList.remove('dragover')
+        })
+        // Focus
+        this.inputTarget.addEventListener('focusin', (event) => {
+            this.element.classList.add('active')
+        })
+        this.inputTarget.addEventListener('focusout', (event) => {
+            this.element.classList.remove('active')
+        })
+    }
+}

data/app/assets/javascripts/headmin/controllers/file_preview_controller.js ADDED Viewed

@@ -0,0 +1,244 @@
+import {Controller} from "@hotwired/stimulus"
+// References:
+// https://developer.mozilla.org/en-US/docs/Web/API/FileReader
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+export default class extends Controller {
+    static get targets() {
+        return ["thumbnails", "template", "input", "placeholder", "thumbnail", "thumbnailDestroy"]
+    }
+    connect() {
+        this.thumbnailWidth = this.firstThumbnailWidth()
+        this.thumbnailHeight = this.firstThumbnailHeight()
+    }
+    preview() {
+        this.removeThumbnails()
+        this.addThumbnails()
+        this.togglePlaceholder()
+    }
+    togglePlaceholder() {
+        if (this.hasFilesSelected()) {
+            this.hidePlaceholder()
+        } else {
+            this.showPlaceholder()
+        }
+    }
+    hasFilesSelected() {
+        return this.hasInputFiles() || this.hasVisibleAttachments()
+    }
+    hasVisibleAttachments() {
+        return this.visibleAttachments().length > 0
+    }
+    hasAttachments() {
+        return this.attachments().length > 0
+    }
+    hasInputFiles() {
+        return this.inputFiles().length > 0
+    }
+    attachments() {
+        return this.thumbnailTargets.filter((thumbnail) => {
+            return this.isAttachment(thumbnail)
+        })
+    }
+    visibleAttachments() {
+        return this.attachments().filter((thumbnail) => {
+            return !thumbnail.classList.contains('d-none')
+        })
+    }
+    inputFiles() {
+        return Array.from(this.inputTarget.files)
+    }
+    writeInputFiles(files) {
+        const dataTransfer = new DataTransfer();
+        files.forEach((file) => {
+            dataTransfer.items.add(file);
+        })
+        this.inputTarget.files = dataTransfer.files;
+    }
+    remove(event) {
+        const thumbnail = event.target.closest('[data-file-preview-target="thumbnail"]')
+        this.removeThumbnail(thumbnail, event.params.name)
+        this.togglePlaceholder()
+    }
+    isAttachment(thumbnail) {
+        return thumbnail.querySelector('[data-file-preview-target="thumbnailDestroy"]')
+    }
+    removeInputFile(thumbnail, fileName) {
+        let files = this.inputFiles()
+        files = files.filter((file) => {
+            return file.name !== fileName
+        })
+        thumbnail.remove()
+        this.writeInputFiles(files)
+    }
+    removeAttachment(thumbnail) {
+        const destroyInput = thumbnail.querySelector('[data-file-preview-target="thumbnailDestroy"]')
+        destroyInput.value = '1';
+        thumbnail.classList.add('d-none')
+    }
+    showPlaceholder() {
+        this.placeholderTarget.classList.remove('d-none')
+    }
+    hidePlaceholder() {
+        this.placeholderTarget.classList.add('d-none')
+    }
+    removeThumbnails() {
+        this.thumbnailTargets.forEach((thumbnail) => {
+            this.removeThumbnail(thumbnail)
+        })
+    }
+    removeThumbnail(thumbnail, filename) {
+        if (this.isAttachment(thumbnail)) {
+            this.removeAttachment(thumbnail)
+        } else {
+            this.removeInputFile(thumbnail, filename)
+        }
+    }
+    addThumbnails() {
+        const files = this.inputFiles()
+        files.forEach((file) => {
+            let thumbnail = this.generateDummyThumbnail()
+            this.appendThumbnail(thumbnail)
+            this.updateThumbnail(this.lastThumbnail(), file)
+        })
+    }
+    generateDummyThumbnail() {
+        return this.templateTarget.content.cloneNode(true)
+    }
+    appendThumbnail(thumbnail) {
+        return this.thumbnailsTarget.appendChild(thumbnail)
+    }
+    updateThumbnail(thumbnail, file) {
+        this.updateThumbnailRemoveButton(thumbnail, file.name)
+        const title = this.titleForFile(file)
+        this.updateThumbnailTitle(thumbnail, title)
+        const icon = this.iconForMimeType(file.type)
+        this.updateThumbnailIcon(thumbnail, icon)
+        if (this.isImage(file)) {
+            this.updateThumbnailImage(thumbnail, file)
+        }
+    }
+    updateThumbnailImage(thumbnail, file) {
+        this.fileToBase64(file).then(base64 => {
+            this.updateThumbnailBackground(thumbnail, base64)
+            this.removeThumbnailIcon(thumbnail)
+        })
+    }
+    titleForFile(file) {
+        const byteSizeString = this.bytesToString(file.size)
+        return `${file.name} (${byteSizeString})`
+    }
+    bytesToString(bytes) {
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+    }
+    updateThumbnailRemoveButton(thumbnail, fileName) {
+        const removeButton = thumbnail.querySelector('.h-form-file-thumbnail-remove')
+        if(removeButton) {
+            removeButton.dataset.filePreviewNameParam = fileName
+        }
+    }
+    updateThumbnailTitle(thumbnail, title) {
+        thumbnail.title = title
+    }
+    updateThumbnailBackground(thumbnail, url) {
+        let thumbnailBackground = thumbnail.querySelector('.h-thumbnail-bg')
+        thumbnailBackground.style.backgroundImage = `url('${url}')`
+    }
+    removeThumbnailIcon(thumbnail) {
+        thumbnail.querySelector('.h-thumbnail-bg').innerHTML = ''
+    }
+    updateThumbnailIcon(thumbnail, icon) {
+        thumbnail.querySelector('.h-thumbnail-bg').innerHTML = icon
+    }
+    iconForMimeType(mimeType) {
+        const typeMap = {
+            image: ['image/bmp', 'image/gif', 'image/vnd.microsoft.icon', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/tiff', 'image/webp'],
+            play: ['video/mp4', 'video/mpeg', 'video/ogg', 'video/mp2t', 'video/webm', 'video/3gpp', 'video/3gpp2'],
+            music: ['audio/aac', 'audio/midi', 'audio/x-midi', 'audio/mpeg', 'audio/ogg', 'audio/opus', 'audio/wav', 'audio/webm', 'audio/3gpp', 'audio/3gpp2'],
+            word: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+            ppt: ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
+            excel: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+            slides: ['application/vnd.oasis.opendocument.presentation'],
+            spreadsheet: ['application/vnd.oasis.opendocument.spreadsheet'],
+            richtext: ['application/vnd.oasis.opendocument.text'],
+            zip: ['application/zip application/x-7z-compressed', 'application/x-bzip application/x-bzip2 application/gzip application/vnd.rar'],
+            pdf: ['application/pdf']
+        }
+        const icon_name = Object.keys(typeMap).find(key => typeMap[key].includes(mimeType));
+        const full_icon_name = ['bi', 'file', 'earmark', icon_name].filter(e => typeof e === 'string' && e !== '').join('-')
+        return `<i class="bi ${full_icon_name} h-thumbnail-icon"></i>`
+    }
+    isImage(file) {
+        return file.type.match(/^image/) !== null;
+    }
+    fileToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        });
+    }
+    thumbnails() {
+        return this.thumbnailsTarget.querySelectorAll('.img-thumbnail')
+    }
+    firstThumbnail() {
+        return this.thumbnailsTarget.firstElementChild
+    }
+    lastThumbnail() {
+        return this.thumbnailsTarget.lastElementChild
+    }
+    firstThumbnailWidth() {
+        return this.firstThumbnail().style.width;
+    }
+    firstThumbnailHeight() {
+        return this.firstThumbnail().style.height;
+    }
+}