jquery_ujs_handlers 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 82f95fe1d1bb807c65e766483c5729fbc6a35e72
+  data.tar.gz: f77925f459150e86ef4172832ef3da8dcb0a52cb
+SHA512:
+  metadata.gz: d58569c9417df8cefab039c3aff5430adb7ec8f89632ff951b58096c620b97fd13020185fdcc2acf47246237f59d17a96abe232684dced0228f38b07508c3255
+  data.tar.gz: ade1c0419216d3d461f4b7e426f848497db4514b0fdd862eca12b0a1471002cd825e67fe23dde7f31c65bb572629727f233732dff2bace1857809667238f01bb

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2016 Onur Uyar
+
+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/Rakefile

@@ -0,0 +1,34 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'JqueryUjsHandlers'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/jquery_ujsh.js

@@ -0,0 +1,231 @@
+// This jquery plugin depends on jquery_ujs,
+// ensure below lines added before this file in your pipeline
+// //= require jquery
+// //= require jquery_ujs
+
+'use strict';
+
+(function($, undefined) {
+
+  $.fn.ujsh = function (options) {
+
+    var DEFAULT_ERR_MSG = 'Sorry, something went wrong. Please try again later';
+
+    var ERROR = 'error';
+
+    var SUCCESS = 'success';
+
+    var HINT = 'hint';
+
+    var LIST = 'list';
+
+    var DIALOG = 'dialog';
+
+    var hintTmp = '<span class="ujsh-hint ujsh-hint__{{modifier}}">{{content}}</span>';
+
+    var listTmp = '<ul class="ujsh-list ujsh-list__{{modifier}}"></ul>';
+
+    var listItemTmp = '<li class="ujsh-list--item ujsh-list--item__{{modifier}}">{{content}}</li>';
+
+    var dialogTmp = '' +
+    '<div class="ujsh-dialog ujsh-dialog__{{modifier}}">' +
+    '<div class="ujsh-dialog--wrapper">' +
+      '<div class="ujsh-dialog--container>' +
+        '<div class="ujsh-dialog--header">' +
+          '<a class="ujsh-dialog--button-close" data-ujsh-dialog-close>&times;</a>' +
+        '</div>' +
+        '<div class="ujsh-dialog--body">' +
+          '{{content}}' +
+        '</div>' +
+      '</div>' +
+    '</div>';
+
+    var reporters = {
+      error: {
+        hint: function (request, status, error) {
+          var errors = parseErrors(request);
+          var field, fieldErrors, $field;
+          var hintTmp = options.error.reporting.hint.tmp;
+
+          for (field in errors) {
+            fieldErrors = errors[field];
+            $field = this.find('[type!=hidden][name*="[' + field + ']"]');
+            $field.toggleClass(options.error.className, true);
+            $(hintTmp.replace(/{{content}}/, fieldErrors.join(', '))).insertAfter($field);
+          }
+        },
+        list: function (request, status, error) {
+          this.prepend(requestToErrorList(request));
+        },
+        dialog: function (request, status, error) {
+          var $list = requestToErrorList(request);
+          var dialogTmp = options.error.reporting.dialog.tmp;
+          var $dialog = $(dialogTmp.replace(/{{content}}/, $list[0].outerHTML));
+          $dialog.find('[data-ujsh-dialog-close]').on('click', dialogCloseHandler.bind($dialog));
+          $('body').prepend($dialog);
+        }
+      },
+      success: {
+        list: function (data, status, request) {
+          var $list = $(options.error.reporting.list.tmp);
+          var itemTmp = options.error.reporting.list.itemTmp;
+          $list.append(itemTmp.replace(/{{content}}/, data.notice));
+          this.prepend($list);
+        },
+        dialog: function (data, status, request) {
+          var dialogTmp = options.success.reporting.dialog.tmp;
+          var $dialog = $(dialogTmp.replace(/{{content}}/, data.notice));
+          $dialog.find('[data-ujsh-dialog-close]').on('click', dialogCloseHandler.bind($dialog));
+          $('body').prepend($dialog);
+        }
+      }
+    }
+    
+    var defaultOptions = {
+      before: {
+        disable: false,
+        handler: beforeHandler,
+        clear: true
+      },
+      error: {
+        disable: false,
+        handler: errorHandler,
+        beforeHandler: null,
+        afterHandler: null,
+        redirect: false,
+        className: ERROR,
+        reporting: {
+          style: HINT, // hint, list, dialog
+          hint: {
+            tmp: hintTmp.replace(/{{modifier}}/g, ERROR)
+          },
+          list: {
+            tmp: listTmp.replace(/{{modifier}}/g, ERROR),
+            itemTmp: listItemTmp.replace(/{{modifier}}/g, ERROR),
+          },
+          dialog: {
+            tmp: dialogTmp.replace(/{{modifier}}/g, ERROR)
+          }
+        }
+      },
+      success: {
+        disable: false,
+        handler: successHandler,
+        beforeHandler: null,
+        afterHandler: null,
+        redirect: false,
+        className: SUCCESS,
+        reporting: {
+          style: DIALOG, // list, dialog
+          hint: {
+            tmp: hintTmp.replace(/{{modifier}}/g, SUCCESS)
+          },
+          list: {
+            tmp: listTmp.replace(/{{modifier}}/g, SUCCESS),
+            itemTmp: listItemTmp.replace(/{{modifier}}/g, SUCCESS)
+          },
+          dialog: {
+            tmp: dialogTmp.replace(/{{modifier}}/g, SUCCESS)
+          }
+        }
+      }
+    };
+
+    function dialogCloseHandler () {
+      this.remove();
+    }
+
+    function requestToErrorList (request) {
+      var errors = parseErrors(request);
+      var field, fieldErrors;
+      var $list = $(options.error.reporting.list.tmp);
+      var itemTmp = options.error.reporting.list.itemTmp;
+      var items = [];
+
+      for (field in errors) {
+        fieldErrors = errors[field];
+        items.push(
+          itemTmp.replace(
+            /{{content}}/, 
+            '<strong>' + field.replace(/_/g, ' ') + '</strong> ' + fieldErrors.join(', ')
+          )
+        );
+      }
+      $list.html(items.join(''));
+      return $list;
+    }
+
+    function parseErrors (request) {
+      var errors = request.responseJSON ? (request.responseJSON.errors || request.responseJSON.error || request.responseJSON) : request.responseText || DEFAULT_ERR_MSG;
+      if (typeof errors === 'string') {
+        errors = {'': [errors]};
+      }
+      return errors;
+    }
+
+    function redirect (request) {
+      var location = request.getResponseHeader('Location');
+      if (location) {
+        window.location.href = location;
+      } else {
+        window.location.reload();
+      }
+    }
+
+    function beforeHandler (e) {
+      if (options.before.clear) {
+        $('.ujsh-' + options.error.reporting.style).remove();
+        if (options.error.reporting.style === HINT) {
+          this.find(
+            'input.' + options.error.className + ', ' +
+            'select.' + options.error.className + ', ' +
+            'textarea.' + options.error.className
+          ).toggleClass(options.error.className, false);
+        }
+
+        $('.ujsh-' + options.success.reporting.style).remove();
+      }
+    }
+
+    function errorHandler (e, request, status, error) {
+      if (typeof options.error.beforeFilter === 'function') {
+        options.error.beforeFilter.call(this, e, request, status, error);
+      }
+      if (options.error.redirect) {
+        return redirect(request);
+      }
+      reporters.error[options.error.reporting.style].call(this, request, status, error);
+      if (typeof options.error.afterFilter === 'function') {
+        options.error.afterFilter.call(this, e, request, status, error);
+      }
+    }
+
+    function successHandler (e, data, status, request) {
+      if (typeof options.success.beforeFilter === 'function') {
+        options.success.beforeFilter.call(this, e, data, status, request);
+      }
+      if (options.success.redirect) {
+        return redirect(request);
+      }
+      reporters.success[options.success.reporting.style].call(this, data, status, request);
+      if (typeof options.success.afterFilter === 'function') {
+        options.success.afterFilter.call(this, e, data, status, request);
+      }
+    }
+
+    options = $.extend(true, defaultOptions, options || {});
+    if (this.data('error-redirect')) options.error.redirect = this.data('error-redirect')
+    if (this.data('success-redirect')) options.success.redirect = this.data('success-redirect')
+    if (this.data('error-reporting-style')) options.error.reporting.style = this.data('error-reporting-style')
+    if (this.data('success-reporting-style')) options.error.reporting.style = this.data('success-reporting-style')
+
+    if (!options.before.disable) this.on('ajax:before', options.before.handler.bind(this));
+    if (!options.error.disable) this.on('ajax:error', options.error.handler.bind(this));
+    if (!options.success.disable) this.on('ajax:success', options.success.handler.bind(this));
+
+    this.options = options;
+    this.defaultOptions = defaultOptions;
+
+    return this;
+  }
+})( jQuery );

data/lib/jquery_ujs_handlers/engine.rb

@@ -0,0 +1,4 @@
+module JqueryUjsHandlers
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/jquery_ujs_handlers/version.rb

@@ -0,0 +1,3 @@
+module JqueryUjsHandlers
+  VERSION = "0.0.1"
+end

data/lib/jquery_ujs_handlers.rb

@@ -0,0 +1,4 @@
+require 'jquery_ujs_handlers/version'
+require 'jquery_ujs_handlers/engine'
+module JqueryUjsHandlers
+end

data/lib/tasks/jquery_ujs_handlers_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :jquery_ujs_handlers do
+#   # Task goes here
+# end

data/test/dummy/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Rails.application.load_tasks

data/test/dummy/app/assets/javascripts/application.js

@@ -0,0 +1,34 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require jquery_ujsh
+//= require turbolinks
+//= require_tree . 
+  
+$(document).on('page:change', function () {
+  $('form.new_user[data-remote]').ujsh({
+    // error:{reporting:{style:'dialog'}},
+    success:{redirect: true}
+  });
+  $('form.edit_user[data-remote]').ujsh({
+    error:{reporting:{style:'hint'}},
+    success:{reporting:{style:'dialog'}}
+  });
+  $('a[data-remote]').ujsh({
+    error:{reporting:{style:'dialog'}},
+    success: {reporting:{style: 'dialog'}, afterFilter: function (e, data, status, request) {
+      $(e.currentTarget).parents('tr').remove();
+    }}
+  });
+})

data/test/dummy/app/assets/javascripts/users.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

data/test/dummy/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/test/dummy/app/assets/stylesheets/scaffold.css

@@ -0,0 +1,56 @@
+body { background-color: #fff; color: #333; }
+
+body, p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size:   13px;
+  line-height: 18px;
+}
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px;
+}
+
+a { color: #000; }
+a:visited { color: #666; }
+a:hover { color: #fff; background-color:#000; }
+
+div.field, div.actions {
+  margin-bottom: 10px;
+}
+
+#notice {
+  color: green;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+}
+
+#error_explanation h2 {
+  text-align: left;
+  font-weight: bold;
+  padding: 5px 5px 5px 15px;
+  font-size: 12px;
+  margin: -7px;
+  margin-bottom: 0px;
+  background-color: #c00;
+  color: #fff;
+}
+
+#error_explanation ul li {
+  font-size: 12px;
+  list-style: square;
+}

data/test/dummy/app/assets/stylesheets/users.css

@@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/

data/test/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,5 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+end

data/test/dummy/app/controllers/users_controller.rb

@@ -0,0 +1,73 @@
+class UsersController < ApplicationController
+  before_action :set_user, only: [:show, :edit, :update, :destroy]
+
+  # GET /users
+  def index
+    @users = User.all
+  end
+
+  # GET /users/1
+  def show
+  end
+
+  # GET /users/new
+  def new
+    @user = User.new
+  end
+
+  # GET /users/1/edit
+  def edit
+  end
+
+  # POST /users
+  def create
+    @user = User.new(user_params)
+    
+    respond_to do |format|
+      if @user.save
+        format.html { redirect_to @user, notice: 'User was successfully created.' }
+        format.json { render :json => @user, location: user_path(@user) }
+      else
+        format.html { render :new }
+        format.json { render :json => @user.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PATCH/PUT /users/1
+  def update
+    respond_to do |format|
+      if @user.update(user_params)
+        format.html { redirect_to @user, notice: 'User was successfully updated.' }
+        format.json { render :json => {notice: 'User was successfully updated.'} }
+      else
+        format.html { render :edit }
+        format.json { render :json => @user.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /users/1
+  def destroy
+    respond_to do |format|
+      if @user.destroy
+        format.html { redirect_to users_url, notice: 'User was successfully destroyed.' }
+        format.json { render :json => {notice: 'User was successfully destroyed.'} }
+      else
+        format.html { redirect_to users_url, alert: 'User was not destroyed.' }
+        format.json { render :json => @user.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_user
+      @user = User.find(params[:id])
+    end
+
+    # Only allow a trusted parameter "white list" through.
+    def user_params
+      params.require(:user).permit(:name, :email, :age, :gender, :terms_accepted)
+    end
+end

data/test/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test/dummy/app/helpers/users_helper.rb

@@ -0,0 +1,2 @@
+module UsersHelper
+end

data/test/dummy/app/models/user.rb

@@ -0,0 +1,6 @@
+class User < ActiveRecord::Base
+  enum gender: [:male, :female]
+  validates_presence_of :name
+  validates :terms_accepted, acceptance: { accept: true }
+  validates :gender, inclusion: {in: genders.keys}
+end

data/test/dummy/app/views/layouts/application.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dummy</title>
+  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/test/dummy/app/views/users/_form.html.erb

@@ -0,0 +1,37 @@
+<%= form_for(@user, format: :json, remote: true, html: {data:{error_reporting_style: 'dialog'}}) do |f| %>
+  <% if @user.errors.any? %>
+    <div id="error_explanation">
+      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
+
+      <ul>
+      <% @user.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="field">
+    <%= f.label :name %><br>
+    <%= f.text_field :name %>
+  </div>
+  <div class="field">
+    <%= f.label :email %><br>
+    <%= f.text_field :email %>
+  </div>
+  <div class="field">
+    <%= f.label :age %><br>
+    <%= f.number_field :age %>
+  </div>
+  <div class="field">
+    <%= f.label :gender %><br>
+    <%= f.select :gender, @user.class.genders.keys, include_blank: true %>
+  </div>
+  <div class="field">
+    <%= f.label :terms_accepted %><br>
+    <%= f.check_box :terms_accepted %>
+  </div>
+  <div class="actions">
+    <%= f.submit %>
+  </div>
+<% end %>

data/test/dummy/app/views/users/edit.html.erb

@@ -0,0 +1,6 @@
+<h1>Editing User</h1>
+
+<%= render 'form' %>
+
+<%= link_to 'Show', @user %> |
+<%= link_to 'Back', users_path %>

data/test/dummy/app/views/users/index.html.erb

@@ -0,0 +1,35 @@
+<p id="notice"><%= notice %></p>
+
+<h1>Listing Users</h1>
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Age</th>
+      <th>Gender</th>
+      <th>Terms accepted</th>
+      <th colspan="3"></th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% @users.each do |user| %>
+      <tr>
+        <td><%= user.name %></td>
+        <td><%= user.email %></td>
+        <td><%= user.age %></td>
+        <td><%= user.gender %></td>
+        <td><%= user.terms_accepted %></td>
+        <td><%= link_to 'Show', user %></td>
+        <td><%= link_to 'Edit', edit_user_path(user) %></td>
+        <td><%= link_to 'Destroy', user, method: :delete, data: { type: :json, remote: true, confirm: 'Are you sure?' } %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<br>
+
+<%= link_to 'New User', new_user_path %>

data/test/dummy/app/views/users/new.html.erb

@@ -0,0 +1,5 @@
+<h1>New User</h1>
+
+<%= render 'form' %>
+
+<%= link_to 'Back', users_path %>