modalist 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 1cbf3abd0b4787f3ab6afb23b2846b05a0dd92a4de370e388ce249242e29f0f3
+  data.tar.gz: 38dfacf7c7d68db70b7444e7e8e7bd03a775773287ca35adf36b7b94c175fa1b
+SHA512:
+  metadata.gz: 47caee6ccf5fb50518790a4ae534448110b4836262651f284b729471c14fa8132bb1dc1c91f0ed3a050479a8bb8a091b591203c6fb793d85bd243dad614f07ca
+  data.tar.gz: dc75cd91513f0e666c01914e2bb3b6c6467c22f3077d9d0f8371c110bef7b1c5b2a8f2d35b23f2c167ca1d3cf2a21d2db442e12c50e1c6eb6a173ac44b698a81

data/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+### master
+
+* nothing yet
+
+### 1.0.0 - 2018-01-06
+
+* initial release

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Jonas Hübotter
+
+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.

data/README.md

@@ -0,0 +1,302 @@
+# Modalist
+
+[![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:
+
+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
+
+Modalist does not reinvent the wheel and uses the best modal-engine [iziModal.js](https://github.com/dolce/iziModal) to backup its code.
+
+---
+
+## Table of Contents
+
+* [Installation](#installation)
+* [Usage](#usage)
+    * [Controllers](#controllers)
+    * [Views](#views)
+    * [Trigger a modal](#trigger-a-modal)
+    * [Modalist functions](#modalist-functions)
+    * [Options](#options)
+    * [Styles](#styles)
+    * [Events](#events)
+* [To Do](#to-do)
+* [Contributing](#contributing)
+    * [Contributors](#contributors)
+* [License](#license)
+
+---
+
+## Installation
+
+Modalist works with Rails 5 onwards. You can add it to your `Gemfile` with:
+
+```ruby
+gem 'modalist'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install modalist
+
+If you always want to be up to date fetch the latest from GitHub in your `Gemfile`:
+
+```ruby
+gem 'modalist', github: 'jonhue/modalist'
+```
+
+## Usage
+
+First let's add the necessary assets to your pipeline:
+
+```js
+//= require jquery
+//= require iziModal
+//= require modalist
+```
+
+```css
+/*
+ *= require iziModal
+ *= require modalist
+*/
+```
+
+**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
+!!!
+%html
+    %head
+        -# ...
+    %body
+        = 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:
+
+```ruby
+class SettingsController < ApplicationController
+
+    def index
+        # a regular controller action
+    end
+
+    def modalist
+        modalist
+        # a modalist controller action
+    end
+
+end
+```
+
+```ruby
+Rails.application.routes.draw do
+
+    get 'settings', to: 'settings#index'
+    scope :settings, as: :settings do
+        get 'modalist', to: 'settings#modalist'
+    end
+
+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
+```
+
+### Views
+
+In your Modalist views are a couple of helper methods available:
+
+**`modalist_title(title)`:** This will specify a title for your modal. If you omit this in your view, your modal will not have a header. Takes a string.
+
+**`modalist_subtitle(subtitle)`:** Add a subtitle to your modal header. Takes a string.
+
+**`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`.
+
+#### Example
+
+```haml
+- modalist_title 'Modal'
+- modalist_subtitle 'Subtitle'
+- modalist_actions do
+    = modalist_close
+
+Content ...
+```
+
+### Trigger a modal
+
+There are numerous ways to trigger/open a modal with Modalist.
+
+One options is to open the modal by calling a JavaScript function - more on that [here](#functions).
+
+#### Links
+
+The most common scenario is using a link to trigger the opening of a modal:
+
+```haml
+= link_to 'Open modal', settings_modalist_url, class: 'modalist--trigger'
+```
+
+You can use [data attributes](#options) to pass options customizing the modal.
+
+#### Forms
+
+When you want to open a modal after submitting a form - this is as simple as it gets:
+
+```haml
+= simple_form_for @setting, settings_modalist_url(id: @setting.id), method: :get do |f|
+    -# ...
+    = f.input :submit, input_html: { class: 'modalist--trigger', data: { modalist_form: true } }
+```
+
+You can use [data attributes](#options) to pass options customizing the modal.
+
+#### Elements
+
+You can also trigger a modal from any other HTML element in your view:
+
+```haml
+.modalist--trigger{ data: { modalist_url: settings_modalist_url } }
+```
+
+You can use [data attributes](#options) to pass options customizing the modal.
+
+### Modalist functions
+
+Modalist's JavaScript component provides a set of functions to handle your modals:
+
+#### Open modals
+
+```js
+Modalist.open({ url: 'http://localhost:3000/settings/modal' });
+```
+
+You can pass [options](#options) to customize the modal:
+
+```js
+Modalist.open({
+    url: 'http://localhost:3000/settings/modal',
+    form: false,
+    fullScreen: false
+});
+```
+
+#### Close modals
+
+```js
+Modalist.close();
+```
+
+### Options
+
+There are two sets of options you can pass to Modalist. Those who get passed on initialization and those who get passed on any subsequent calls of a function.
+
+#### Initialization
+
+**`ìziModal`:** Options hash utilized to initialize [iziModal](https://github.com/dolce/iziModal).
+
+#### Subsequent calls
+
+**`url`:** URL to fetch content of the modal from. Takes a string.
+
+**`form`:** Submit a form and use the response to populate the modal. Takes a string to specify a jQuery selector for the form or `false`.
+
+**`fullScreen`:** Show a full screen modal instead of the default windowed modal. Takes a 'true', `'mobile'` (uses a full screen modal on devices smaller than `800px`) or `false`.
+
+### 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:
+
+```css
+/* settings#modalist */
+.modalist--content.settings.modalist {
+    /* ... */
+}
+/* nested/settings#modalist */
+.modalist--content.nested.settings.modalist {
+    /* ... */
+}
+```
+
+### Events
+
+Modalist emits events that allow you to track the navigation lifecycle and respond to content loading. Modalist fires events on the `$(document)` object.
+
+* `modalist:click` fires when you click a Modal enabled link to trigger a modal opening. The clicked element is the event target. Access the requested location with `event.data.url`.
+
+* `modalist:request-start` fires before Modal issues a network request to fetch the modal content.
+
+* `modalist:request-end` fires after the network request completes.
+
+* `modalist:before-render` fires before rendering the content.
+
+* `modalist:render` fires after Modal renders the content in the modal.
+
+* `modalist:load` fires after Modal completed preparing and opened the modal.
+
+---
+
+## To Do
+
+[Here](https://github.com/jonhue/modalist/projects/1) is the full list of current projects.
+
+To propose your ideas, initiate the discussion by adding a [new issue](https://github.com/jonhue/modalist/issues/new).
+
+---
+
+## Contributing
+
+We hope that you will consider contributing to Modalist. Please read this short overview for some information about how to get started:
+
+[Learn more about contributing to this repository](CONTRIBUTING.md), [Code of Conduct](CODE_OF_CONDUCT.md)
+
+### Contributors
+
+Give the people some :heart: who are working on this project. See them all at:
+
+https://github.com/jonhue/modalist/graphs/contributors
+
+## License
+
+MIT License
+
+Copyright (c) 2017 Jonas Hübotter
+
+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.

data/app/helpers/modalist/modal_helper.rb

@@ -0,0 +1,29 @@
+module Modalist
+    module ModalHelper
+
+        def modalist
+            render 'modalist/modal'
+        end
+
+        def modalist_close
+            render 'modalist/close'
+        end
+
+        def modalist_title title
+            area :modalist_title, title
+        end
+
+        def modalist_subtitle subtitle
+            area :modalist_subtitle, subtitle
+        end
+
+        def modalist_actions &block
+            area :modalist_actions, capture(&block)
+        end
+
+        def modalist_class_hierarchy options = [], delimiter = ' '
+            options.map(&:inspect).join(delimiter).gsub('"', '').gsub(',', '').gsub('[', '').gsub(']', '')
+        end
+
+    end
+end

data/app/helpers/modalist/render_helper.rb

@@ -0,0 +1,9 @@
+module Modalist
+    module RenderHelper
+
+        def modalist
+            render layout: 'modalist'
+        end
+
+    end
+end

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

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

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

@@ -0,0 +1,4 @@
+<%= 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

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

data/lib/modalist/ajax.rb

@@ -0,0 +1,9 @@
+module Modalist
+    class Ajax
+
+        def matches? request
+            request.xhr?
+        end
+
+    end
+end

data/lib/modalist/engine.rb

@@ -0,0 +1,6 @@
+require 'rails/railtie'
+
+module Modalist
+    class Engine < ::Rails::Engine
+    end
+end

data/lib/modalist/railtie.rb

@@ -0,0 +1,13 @@
+require 'rails/railtie'
+
+module Modalist
+    class Railtie < Rails::Railtie
+
+        initializer 'modalist.action_controller' do
+            ActiveSupport.on_load :action_controller do
+                include Modalist::RenderHelper
+            end
+        end
+
+    end
+end

data/lib/modalist/version.rb

@@ -0,0 +1,5 @@
+module Modalist
+
+    VERSION = '1.0.0'
+
+end

data/lib/modalist.rb

@@ -0,0 +1,10 @@
+require 'modalist/version'
+
+module Modalist
+
+    autoload :Ajax, 'modalist/ajax'
+
+    require 'modalist/engine'
+    require 'modalist/railtie'
+
+end