modalist 1.0.3 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53028ebc1dacdef9d576a4e9f21061bd00172a9070b4c161554da6f5cddc06fa
-  data.tar.gz: e1dd7149960ad31054211201458406c48d7f17e35a9a848c572fff4828f04e24
+  metadata.gz: cc9791cd9988e334e98cd849c3eeff2fb56117db6bbdb2773b763b744aae09f7
+  data.tar.gz: 4c6d521c95218d503b337e9b1aaa0de6419954f962dfb60df1a9ef01b9b50e5c
 SHA512:
-  metadata.gz: 5d7315cbca574bbb81d2b007516a1202ea3ea2bdb874008750d7a458edbe9a64237f363044e867ac382d7690f2ae265d0cba56514b29a45b6cf30432c802cbd0
-  data.tar.gz: 5b96ae247bad1b60dfd4642433e2fd75ef579add4d45946ad04d47a9829c451c7946a90454ba2ed1dbf6d3489a674457d4cdf3dacdf8e918b710ea027c626d0b
+  metadata.gz: 9c57d52e6af4fe4554d2382252ddd04c6720b107211c82a160b833cc5ee008223094f565a489eb4fef566cbd2bbe1ba77245dc072d18a1c5893f2dd142ad3d29
+  data.tar.gz: 1d5c9c45a18cae4a20cf7ba26b55f881789c5cd2692c2badd88a95755bc978a79f16ac634ed252b9860cfd9d717788bd2560b6f7f39df1ac46d25c87ceb8de18

data/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 * nothing yet
 
+### 2.0.p - 2018/02/09
+
+* features
+    * updated Modalist.js to 2.0.0
+
 ### 1.0.3 - 2018/01/07
 
 * bugfixes

data/README.md

@@ -2,13 +2,14 @@
 
 [![Gem Version](https://badge.fury.io/rb/modalist.svg)](https://badge.fury.io/rb/modalist) <img src="https://travis-ci.org/jonhue/modalist.svg?branch=master" />
 
-Modalist is a powerful ajaxified modal solution for Rails. Here is how it works:
+Modalist is a powerful & lightweight (not necessarily but primarily ajaxified) modal plugin. Here is how it works:
 
-1) You trigger a modal opening from your frontend code
-2) Modalist fetches the modal contents from your specific modal-controller-action with AJAX
-3) The modal opens
+1) You create a distinct Modalist object for every modal style.
+2) You trigger a modal from your frontend code passing custom parameters
+3) Modalist fetches the modal contents with AJAX while showing a loader (skippable if not desired)
+4) The modal opens
 
-Modalist does not reinvent the wheel and uses todays best modal-engine [iziModal.js](https://github.com/dolce/iziModal) to backup its code.
+Learn more about **[Modalist.js](https://github.com/jonhue/modalist.js)**.
 
 ---
 
@@ -23,6 +24,7 @@ Modalist does not reinvent the wheel and uses todays best modal-engine [iziModal
 * [To Do](#to-do)
 * [Contributing](#contributing)
     * [Contributors](#contributors)
+    * [Semantic versioning](#semantic-versioning)
 * [License](#license)
 
 ---
@@ -51,23 +53,20 @@ gem 'modalist', github: 'jonhue/modalist'
 
 ## Usage
 
-First let's add the necessary assets to your pipeline:
+First let's import the necessary assets:
 
-```js
-//= require jquery
-//= require iziModal
-//= require modalist
+```javascript
+import Modalist from 'modalist';
+Modalist.init();
+let modalist = new Modalist;
 ```
 
-```css
-/*
- *= require iziModal
- *= require modalist.min
-*/
+```sass
+@import "animate.css"
+@import "modalist/src/modalist"
+@import "modalist/src/modalist-theme"
 ```
 
-**Note:** If you are using a package manager like Yarn, import the latest [iziModal](https://github.com/dolce/iziModal) and [modalist](https://github.com/jonhue/modalist.js) code instead.
-
 Specify where modals should be located in your view:
 
 ```haml
@@ -76,13 +75,13 @@ Specify where modals should be located in your view:
     %head
         -# ...
     %body
-        = render_modalist
+        = component 'modalist'
         = yield
 ```
 
 ### Controllers
 
-Modallist simulates Rails' MVC structure. To add a new modal to your app you have to create a new controller action, route and view:
+Modallist simulates Rails' MVC structure. To add a new modal to your app, you have to create a new controller action, route and view:
 
 ```ruby
 class SettingsController < ApplicationController
@@ -91,7 +90,7 @@ class SettingsController < ApplicationController
         # a regular controller action
     end
 
-    def modalist
+    def modal
         modalist
         # a modalist controller action
     end
@@ -104,7 +103,7 @@ Rails.application.routes.draw do
 
     get 'settings', to: 'settings#index'
     scope :settings, as: :settings do
-        get 'modalist', to: 'settings#modalist'
+        get 'modal', to: 'settings#modal'
     end
 
 end
@@ -113,7 +112,7 @@ end
 In most cases you only want to allow AJAX requests to be able to reach your modal-controller-actions:
 
 ```ruby
-get 'modalist', to: 'settings#modalist', constraints: Modalist::Ajax.new
+get 'modal', to: 'settings#modal', constraints: Modalist::Ajax.new
 ```
 
 ### Views
@@ -126,7 +125,7 @@ In your Modalist views are a couple of helper methods available:
 
 **`modalist_actions(&block)`:** Specify actions (preferably icons wrapped in links) which will be displayed on the right side of your modal header. Takes a block.
 
-**`modalist_close`:** Renders a default modal close action. Can be passed to `modalist_actions`.
+**`modalist_closer`:** Renders a default modal close action. Can be passed to `modalist_actions`.
 
 #### Example
 
@@ -134,31 +133,29 @@ In your Modalist views are a couple of helper methods available:
 - modalist_title 'Modal'
 - modalist_subtitle 'Subtitle'
 - modalist_actions do
-    = modalist_close
+    = component 'modalist/closer'
 
 Content ...
 ```
 
 ### Styles
 
-To customize the styles of your modals, require the vendored default styles and then override them with your custom CSS.
-
-It is often useful to be able to provide view-specific styles. Modalist therefore adds classes for controller and action to the `.modalist--content` element which wraps your modals content. Here is how you can utilize it:
+It is often useful to be able to provide view-specific styles. Modalist therefore adds classes for controller and action to the `.modalist--content-body` element which wraps your modals content. Here is how you can utilize it:
 
 ```css
-/* settings#modalist */
-.modalist--content.settings.modalist {
+/* settings#modal */
+.modalist--content-body.settings.modal {
     /* ... */
 }
-/* nested/settings#modalist */
-.modalist--content.nested.settings.modalist {
+/* nested/settings#modal */
+.modalist--content-body.nested.settings.modal {
     /* ... */
 }
 ```
 
 ### Modalist.js
 
-Continue reading [here](https://github.com/jonhue/modalist.js) to learn how to use modalist.js to open modals and fetch their content vie AJAX.
+Continue reading [here](https://github.com/jonhue/modalist.js) to learn how to use Modalist.js to open modals and fetch content via AJAX.
 
 ---
 
@@ -182,6 +179,10 @@ Give the people some :heart: who are working on this project. See them all at:
 
 https://github.com/jonhue/modalist/graphs/contributors
 
+### Semantic Versioning
+
+Modalist follows Semantic Versioning 2.0 as defined at http://semver.org.
+
 ## License
 
 MIT License

data/app/helpers/modalist/modal_helper.rb

@@ -1,14 +1,6 @@
 module Modalist
     module ModalHelper
 
-        def render_modalist
-            render partial: 'modalist/modal'
-        end
-
-        def modalist_close
-            render partial: 'modalist/close'
-        end
-
         def modalist_title title
             area :modalist_title, title
         end

data/app/views/layouts/modalist.html.erb

@@ -1,5 +1,5 @@
 <% if area(:modalist_title).length > 0 %>
-<div class="modalist--header">
+<div class="modalist--content-header">
     <div class="wrapper">
         <h4><%= area :modalist_title %></h4>
         <% if area(:modalist_subtitle).length > 0 %>
@@ -14,6 +14,6 @@
 </div>
 <% end %>
 
-<div class="modalist--content <%= modalist_class_hierarchy [params[:controller].split('/').each { |n| n }, action_name] %>">
+<div class="modalist--content-body <%= modalist_class_hierarchy [params[:controller].split('/').each { |n| n }, action_name] %>">
     <%= yield %>
 </div>

data/app/views/mozaic/_modalist.html.erb

@@ -0,0 +1,13 @@
+<div id="modalist--overlay">
+    <div class="modalist--loader">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800&gt;n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length&gt;a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
+    </div>
+</div>
+<div class="modalist">
+    <div class="modalist--loader">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800&gt;n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length&gt;a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
+    </div>
+    <div class="modalist--content">
+        <%= block %>
+    </div>
+</div>

data/app/views/mozaic/modalist/closer.html.erb

@@ -0,0 +1,8 @@
+<%= link_to 'javascript:void(0)', class: 'modalist--closer' do %>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
+        <g stroke-width="2" transform="translate(0, 0)">
+            <line fill="none" stroke="#657786" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="16" y1="8" x2="8" y2="16" stroke-linejoin="miter"></line>
+            <line fill="none" stroke="#657786" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="16" y1="16" x2="8" y2="8" stroke-linejoin="miter"></line>
+        </g>
+    </svg>
+<% end %>

data/lib/modalist/railtie.rb

@@ -3,6 +3,13 @@ require 'rails/railtie'
 module Modalist
     class Railtie < Rails::Railtie
 
+        initializer 'modalist.mozaic' do
+            Mozaic.configure do |config|
+                config.define_component 'modalist'
+                config.define_component 'modalist/closer'
+            end
+        end
+
         initializer 'modalist.action_controller' do
             ActiveSupport.on_load :action_controller do
                 include Modalist::RenderHelper

data/lib/modalist/version.rb

@@ -1,5 +1,5 @@
 module Modalist
 
-    VERSION = '1.0.3'
+    VERSION = '2.0.0'
 
 end

data/lib/modalist.rb

@@ -1,3 +1,4 @@
+require 'mozaic'
 require 'modalist/version'
 
 module Modalist

metadata

@@ -1,17 +1,17 @@
 --- !ruby/object:Gem::Specification
 name: modalist
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 2.0.0
 platform: ruby
 authors:
 - Jonas Hübotter
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-01-07 00:00:00.000000000 Z
+date: 2018-02-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: rails
+  name: railties
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -25,19 +25,33 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '5.0'
 - !ruby/object:Gem::Dependency
-  name: nestive-rails
+  name: actionpack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: mozaic
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.0'
+        version: '2.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.0'
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
@@ -66,7 +80,8 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.52'
-description: A powerful ajaxified modal solution for Rails apps.
+description: Modalist is a powerful & lightweight (not necessarily but primarily ajaxified)
+  modal plugin.
 email:
 - me@jonhue.me
 executables: []
@@ -79,21 +94,13 @@ files:
 - app/helpers/modalist/modal_helper.rb
 - app/helpers/modalist/render_helper.rb
 - app/views/layouts/modalist.html.erb
-- app/views/modalist/_close.html.erb
-- app/views/modalist/_modal.html.erb
+- app/views/mozaic/_modalist.html.erb
+- app/views/mozaic/modalist/closer.html.erb
 - lib/modalist.rb
 - lib/modalist/ajax.rb
 - lib/modalist/engine.rb
 - lib/modalist/railtie.rb
 - lib/modalist/version.rb
-- vendor/assets/javascripts/iziModal.js
-- vendor/assets/javascripts/iziModal.min.js
-- vendor/assets/javascripts/modalist.js
-- vendor/assets/javascripts/modalist.min.js
-- vendor/assets/stylesheets/iziModal.css
-- vendor/assets/stylesheets/iziModal.min.css
-- vendor/assets/stylesheets/modailst.min.css
-- vendor/assets/stylesheets/modalist.sass
 homepage: https://github.com/jonhue/modalist
 licenses:
 - MIT
@@ -117,5 +124,5 @@ rubyforge_project:
 rubygems_version: 2.7.4
 signing_key: 
 specification_version: 4
-summary: A powerful ajaxified modal solution for Rails apps
+summary: A powerful & (really) lightweight AJAX modal plugin
 test_files: []

data/app/views/modalist/_close.html.erb

@@ -1,4 +0,0 @@
-<%= link_to 'javascript:void(0)', class: 'modalist--close', data: { izimodal_close: true } do %>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g stroke-width="2" transform="translate(0, 0)"><line fill="none" stroke="#657786" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="16" y1="8" x2="8" y2="16" stroke-linejoin="miter"></line>
-<line fill="none" stroke="#657786" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="16" y1="16" x2="8" y2="8" stroke-linejoin="miter"></line></g></svg>
-<% end %>

data/app/views/modalist/_modal.html.erb

@@ -1,2 +0,0 @@
-<div id="modalist">
-</div>