effective_bootstrap 0.0.8 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6159bfe9bf5e58af814e2d446ee907d3a456a54b
-  data.tar.gz: 2b232d59b9e6904c6b6358e07631294673a0fa78
+  metadata.gz: 0b2267dfe1d4e1eff1fb5aac89a0d5d20d78c621
+  data.tar.gz: b89a7d646b1b77b61a5733d4e5b8cc8738cf1565
 SHA512:
-  metadata.gz: 9111638ac3d4eb19d1ed5b2abd43404300f88af4925460c6fca5980b66e2337d6cdf9c245a6378207fa6c3d809509134c9d264b58f3b40d3c5cec7f65ed16a53
-  data.tar.gz: ade79312e2e0c17f9eabbeff7a2ce2f954b068e0cab86e2d63b9b478f6b97fda4ab96019f47504b17ea0814ba9476a52a732f74947ccab56a164b7c870f02e64
+  metadata.gz: 9377c256b2b8bc038b2a2d4cc5212e4e0cd788fbce62ecb5ac7f72fdcf7ea7d129890b3e4518a53c2ce48a61718c1fa6e391ce24b011bb9f269168626ce235a1
+  data.tar.gz: f781c96aecfd3666bb8885f32f832a9fc204a6d3d2e1f76ad3eaddae6e07d3d6bdcd4c4837e4b051381dbd36af4f3e3b86b7388930c562ae810158dd6c21008d

data/app/assets/javascripts/effective_bootstrap/base.js.coffee

@@ -1,4 +1,5 @@
 this.EffectiveBootstrap ||= new class
+  current_submit: ''              # The $(.form-actions) that clicked
   remote_form_payload: ''         # A fresh form
   remote_form_flash: ''           # Array of Arrays
 
@@ -17,41 +18,36 @@ this.EffectiveBootstrap ||= new class
       $element.addClass('initialized')
 
   validate: (form) ->
-    $form = $(form)
-
-    @reset($form)
-
     valid = form.checkValidity()
+    $form = $(form)
 
-    if valid
-      $form.addClass('form-is-valid')
-      setTimeout((-> EffectiveBootstrap.disable($form)), 0)
-    else
-      $form.addClass('was-validated').addClass('form-is-invalid')
-
-      $('.effective-radios:not(.no-feedback),.effective-checks:not(.no-feedback)').each -> # These controls need a little bit of help with client side validations
-        $(@).addClass(if $(@).find('input:invalid').length > 0 then 'is-invalid' else 'is-valid')
-
-      @flash($form, 'danger')
-
-    if valid and $form.data('remote')
-      $form.one 'ajax:success', (event) -> EffectiveBootstrap.loadRemoteForm($(event.target))
-
-      $form.one 'ajax:error', (event, _, status, message) ->
-        EffectiveBootstrap.reset($(event.target))
-        EffectiveBootstrap.flash($(event.target), 'danger', "Ajax #{status}: #{message}")
+    @clearFlash()
+    @reset($form) if $form.hasClass('was-validated')
 
+    if valid then @submitting($form) else @invalidate($form)
     valid
 
   submitting: ($form) ->
     $form.addClass('form-is-valid').removeClass('form-is-invalid')
-    @disable($form)
+    @spin()
+    setTimeout((-> EffectiveBootstrap.disable($form)), 0)
+
+  invalidate: ($form) ->
+    $form.addClass('was-validated').addClass('form-is-invalid')
+    $form.find('.form-current-submit').removeClass('form-current-submit')
+
+    # These controls need a little bit of help with client side validations
+    $form.find('.effective-radios:not(.no-feedback),.effective-checks:not(.no-feedback)').each ->
+      $(@).addClass(if $(@).find('input:invalid').length > 0 then 'is-invalid' else 'is-valid')
+
+    @flash($form, 'danger')
 
   disable: ($form) ->
     $form.find('[type=submit]').prop('disabled', true)
 
   reset: ($form) ->
     $form.removeClass('was-validated').removeClass('form-is-invalid').removeClass('form-is-valid')
+    $form.find('.form-current-submit').removeClass('form-current-submit')
 
     # Clear any server side validation on individual inputs
     $form.find('.alert.is-invalid').remove()
@@ -60,29 +56,48 @@ this.EffectiveBootstrap ||= new class
 
     $form.find('[type=submit]').removeAttr('disabled')
 
-  flash: ($form, status, message, skip_success = false) ->
-    $actions = $form.children('.form-actions')
+  spin: -> @current_submit.addClass('form-current-submit') if @current_submit.length > 0
 
-    if status == 'danger' || status == 'error'
-      $actions.find('.eb-icon-x').show().delay(1000).fadeOut('slow')
-    else
-      $actions.find('.eb-icon-check').show().delay(1000).fadeOut('slow')
+  beforeAjax: ($form) ->
+    return unless $form.data('remote')
 
-    if message? && !(status == 'success' && skip_success)
-      $actions.prepend(@buildFlash(status, message))
+    $form.one 'ajax:success', (event, thing, another) ->
+      EffectiveBootstrap.loadFromAjax($(event.target), $(event.target).data('method') == 'delete')
+
+    $form.one 'ajax:error', (event, _, status, message) ->
+      EffectiveBootstrap.reset($(event.target))
+      EffectiveBootstrap.flash($(event.target), 'danger', "Ajax #{status}: #{message}")
 
   # Loads remote for payload that was placed here by effective_resources create.js.erb and update.js.erb
-  loadRemoteForm: ($target) ->
-    if @remote_form_payload?
+  loadFromAjax: ($target, was_delete) ->
+    $target = $target.closest('form') unless $target.is('form')
+
+    if @remote_form_payload.length > 0
       $form = @remote_form_payload.find("form[data-remote-index='#{$target.data('remote-index')}']")
       $form = @remote_form_payload.find('form') if $form.length == 0
       $target.replaceWith($form)
 
-    if @remote_form_flash?
-      for flash in @remote_form_flash
-        @flash($form, flash[0], flash[1], true)
+    # We update the current submit to point to the new one.
+    unless was_delete
+      if @current_submit.length > 0
+        @current_submit = $form.find("##{@current_submit.attr('id')}.form-actions")
+
+      if @remote_form_flash.length > 0 && was_delete == false
+        for flash in @remote_form_flash
+          @flash($form, flash[0], flash[1], true)
+
+    @remote_form_payload = ''; @remote_form_flash = ''; @current_submit = '';
+
+  flash: ($form, status, message, skip_success = false) ->
+    if status == 'danger' || status == 'error'
+      @current_submit.find('.eb-icon-x').show().delay(1000).fadeOut('slow')
+    else
+      @current_submit.find('.eb-icon-check').show().delay(1000).fadeOut('slow')
 
-    @remote_form_payload = ''; @remote_form_flash = '';
+    if message? && !(status == 'success' && skip_success)
+      @current_submit.prepend(@buildFlash(status, message))
+
+  clearFlash: -> @current_submit.find('.alert').remove() if @current_submit.length > 0
 
   buildFlash: (status, message) ->
     $("
@@ -94,9 +109,20 @@ this.EffectiveBootstrap ||= new class
       </div>
     ")
 
+  setCurrentSubmit: ($submit) -> @current_submit = $submit if $submit.is('.form-actions')
+
 $ -> EffectiveBootstrap.initialize()
 $(document).on 'turbolinks:load', -> EffectiveBootstrap.initialize()
 $(document).on 'cocoon:after-insert', -> EffectiveBootstrap.initialize()
 $(document).on 'effective-bootstrap:initialize', (event) -> EffectiveBootstrap.initialize(event.currentTarget)
 
-$(document).on 'ajax:beforeSend', 'form[data-remote]', -> this.checkValidity()
+# Sets EffectiveBootstrap. current_click.
+# This displays the spinner here, and directs any flash messages before and after loadRemoteForm
+$(document).on 'click', '.form-actions a[data-remote],.form-actions button[type=submit]', (event) ->
+  EffectiveBootstrap.setCurrentSubmit($(@).parent())
+  EffectiveBootstrap.spin()
+
+# This actually attached the handlers to a remote ajax form when it or an action inside it triggers a remote thing.
+$(document).on 'ajax:beforeSend', 'form[data-remote]', (event) ->
+  EffectiveBootstrap.beforeAjax($(@))
+  this.checkValidity()

data/app/assets/stylesheets/effective_bootstrap/forms.scss

@@ -6,32 +6,50 @@
 
   .alert {
     position: absolute;
-    top: -4.0em;
+    top: 4.0em;
+  }
+}
+
+.form-actions-inline.justify-content-end {
+  margin-left: 0.5em;
+
+  svg {
+    position: absolute;
+    left: -1.6em;
+  }
+}
+
+.form-actions-inline.justify-content-start {
+  margin-right: 0.5em;
+
+  svg {
+    position: absolute;
+    right: -1.6em;
   }
 }
 
 .form-actions-bordered {
   border-top: solid 1px #eee;
-  margin-top: 1rem;
+  margin-top: 1em;
 
-  > * { margin-top: 1rem; }
+  > a,button { margin-top: 1em; }
 }
 
 .form-actions.justify-content-start {
-  > * { margin-right: 0.5rem; }
+  > a,button { margin-right: 0.5em; }
 }
 
 .form-actions.justify-content-end {
-  > * { margin-left: 0.5rem; }
+  > a,button { margin-left: 0.5em; }
 }
 
 .form-actions.justify-content-center {
-  > * { margin-left: 0.5rem; }
+  > a,button { margin-left: 0.5em; }
 }
 
 // Spinner
 .form-actions .eb-icon-spinner { display: none; }
-.form-is-valid .form-actions .eb-icon-spinner { display: inline; }
+.form-actions.form-current-submit .eb-icon-spinner { display: inline; }
 
 // Radio and Checkbox fieldsets
 fieldset.form-group > label {

data/app/models/effective/form_builder.rb

@@ -36,6 +36,11 @@ module Effective
       Effective::FormInputs::DatetimeField.new(name, options, builder: self).to_html { super(name, options) }
     end
 
+    def delete(name = 'Remove', url = nil, options = {}, &block)
+      options[:href] ||= url
+      Effective::FormInputs::Delete.new(name, options, builder: self).to_html(&block)
+    end
+
     def email_field(name, options = {})
       Effective::FormInputs::EmailField.new(name, options, builder: self).to_html { super(name, options) }
     end

data/app/models/effective/form_input.rb

@@ -348,7 +348,7 @@ module Effective
         "#{sanitized_object_name}_#{index}_#{sanitized_method_name}"
       else
         "#{sanitized_object_name}_#{sanitized_method_name}"
-      end
+      end.downcase.parameterize
     end
 
     def sanitized_object_name

data/app/models/effective/form_inputs/delete.rb

@@ -0,0 +1,87 @@
+module Effective
+  module FormInputs
+    class Delete < Effective::FormInput
+
+      def to_html(&block)
+        return super unless (form_readonly? || form_disabled?)
+      end
+
+      def build_input(&block)
+        tags = [
+          icon('check', style: 'display: none;'),
+          icon('x', style: 'display: none;'),
+          icon('spinner'),
+          (block_given? ? capture(&block) : content_tag(:a, name, options[:input]))
+        ]
+
+        (left? ? tags.reverse.join : tags.join).html_safe
+      end
+
+      def label_options
+        false
+      end
+
+      def wrapper_options
+        @right = true unless (left? || center? || right?)
+
+        classes = [
+          ('row' if layout == :horizontal),
+          'form-group form-actions',
+          ('form-actions-inline' if inline?),
+          ('form-actions-bordered' if border?),
+          ('justify-content-start' if left? && layout == :vertical),
+          ('justify-content-center' if center? && layout == :vertical),
+          ('justify-content-end' if right? && layout == :vertical)
+        ].compact.join(' ')
+
+        { class: classes, id: tag_id }
+      end
+
+      def input_html_options
+        { class: 'btn btn-warning', data: { method: :delete, remote: true, confirm: "Delete #{object}?"} }
+      end
+
+      def border?
+        false
+      end
+
+      def inline?
+        return @form_actions_inline unless @form_actions_inline.nil?
+        @form_actions_inline = (options.delete(:inline) || false)
+      end
+
+      def left?
+        return @left unless @left.nil?
+        @left = (options.delete(:left) || false)
+      end
+
+      def center?
+        return @center unless @center.nil?
+        @center = (options.delete(:center) || false)
+      end
+
+      def right?
+        return @right unless @right.nil?
+        @right = (options.delete(:right) || false)
+      end
+
+      def feedback_options
+        # case layout
+        # when :inline
+        #   false
+        # else
+        #   {
+        #     valid: { class: 'valid-feedback', text: 'Looks good! Submitting...' },
+        #     invalid: {
+        #       class: 'invalid-feedback',
+        #       text: 'one or more errors are present. please fix the errors above and try again.'
+        #     }
+        #   }
+        # end
+        false
+      end
+
+
+    end
+  end
+end

data/app/models/effective/form_inputs/form_group.rb

@@ -2,23 +2,12 @@ module Effective
   module FormInputs
     class FormGroup < Effective::FormInput
 
-      def input_html_options
-        if layout == :horizontal
-          { class: 'form-group col-sm-10' }
-        else
-          { class: 'form-group' }
-        end
+      def build_input(&block)
+        content_tag(:label, (name || '&nbsp;').html_safe) + capture(&block)
       end
 
-      def to_html(&block)
-        case layout
-        when :horizontal
-          build_wrapper do
-            content_tag(:div, '', class: 'col-sm-2') + content_tag(:div, capture(&block), options[:input])
-          end
-        else
-          content_tag(:div, capture(&block), options[:input])
-        end
+      def feedback_options
+        false
       end
 
     end

data/app/models/effective/form_inputs/submit.rb

@@ -23,13 +23,14 @@ module Effective
         classes = [
           ('row' if layout == :horizontal),
           'form-group form-actions',
+          ('form-actions-inline' if inline?),
           ('form-actions-bordered' if border?),
           ('justify-content-start' if left? && layout == :vertical),
           ('justify-content-center' if center? && layout == :vertical),
           ('justify-content-end' if right? && layout == :vertical)
         ].compact.join(' ')
 
-        { class: classes }
+        { class: classes, id: tag_id }
       end
 
       def input_html_options
@@ -47,6 +48,12 @@ module Effective
         @border = options.key?(:border) ? options.delete(:border) : true
       end
 
+      # Changes the svg feedback to use position absolute.
+      def inline?
+        return @form_actions_inline unless @form_actions_inline.nil?
+        @form_actions_inline = (options.delete(:inline) || false)
+      end
+
       def left?
         return @left unless @left.nil?
         @left = (options.delete(:left) || false)

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.0.8'.freeze
+  VERSION = '0.0.9'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.9
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-04-19 00:00:00.000000000 Z
+date: 2018-04-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -419,6 +419,7 @@ files:
 - app/models/effective/form_inputs/collection_input.rb
 - app/models/effective/form_inputs/date_field.rb
 - app/models/effective/form_inputs/datetime_field.rb
+- app/models/effective/form_inputs/delete.rb
 - app/models/effective/form_inputs/email_field.rb
 - app/models/effective/form_inputs/error_field.rb
 - app/models/effective/form_inputs/file_field.rb