beyond_canvas 0.6.4.pre → 0.7.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69b9311ccfa66b8ff9b358476c40005dae8084848abb4408d1deecfacfd485eb
-  data.tar.gz: 2a5ac1f10b54e41f04f997e88b58f37ef52c85a0d63507d0b1a06f053b322ffd
+  metadata.gz: 57ce3075063f9f943f9b4a4fa47580696046a4d23563e70a3fc1a40c578592f9
+  data.tar.gz: b7a63f7471c95a67c8c436a6291826878d79acf913faeb13539f3604c1341820
 SHA512:
-  metadata.gz: a214821f18cfd0e7ef9be448f6a7a9b44f0bae9b5e4da1d9154c10f989da2005c7f40ab4b2e7002058b4595a59bf7f8df408ff25bb346a23a1bfa3eebe3b2aa6
-  data.tar.gz: 45a919581e32011b4a64838237601ec2004d327776d861b264551d35442ff0e51202abe9ae1ecc441d7aaad23501a392dda6eefedf54bbb0e06ac0df6dd1d245
+  metadata.gz: cb70bf7931a673e05d1040923d9c4fdfaffd1c50a6a9f03e3b5b9aca0937c488d03923b6971a9c69d871ab0f6291493dec782399b6097d69e24cbc12aad841c8
+  data.tar.gz: 93f84bcd9bc6027fe4e25ea77213ae8a818d6edb0c4f0f683d71da5ff9fb7fbd14768aaa80edf31197a04a01661ce58de76561afd34f0a03d6269651163408fb

data/CHANGELOG.md

@@ -1,3 +1,14 @@
+### v0.7.0.pre
+
+* deprecations
+  * Use custom `stylesheet_link_tag` and `javascript_include_tag` on head
+
+* enhancements
+  * Make `lib/generators/templates/beyond_canvas_form_utils.rb` rubocop compatible
+
+* features
+  * Add loading buttons
+
 ### v0.6.4.pre
 
 * bug-fixes

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    beyond_canvas (0.6.4.pre)
+    beyond_canvas (0.7.0.pre)
       bourbon (~> 5.1)
       inline_svg (~> 1.5)
       sassc-rails (~> 2.1)
@@ -34,13 +34,13 @@ GEM
       thor (~> 0.19)
     builder (3.2.4)
     colorize (0.8.1)
-    concurrent-ruby (1.1.5)
-    crass (1.0.5)
+    concurrent-ruby (1.1.6)
+    crass (1.0.6)
     erubi (1.9.0)
-    ffi (1.11.3)
-    i18n (1.7.1)
+    ffi (1.12.2)
+    i18n (1.8.2)
       concurrent-ruby (~> 1.0)
-    inline_svg (1.6.0)
+    inline_svg (1.7.0)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     loofah (2.4.0)
@@ -48,10 +48,10 @@ GEM
       nokogiri (>= 1.5.9)
     method_source (0.9.2)
     mini_portile2 (2.4.0)
-    minitest (5.13.0)
-    nokogiri (1.10.7)
+    minitest (5.14.0)
+    nokogiri (1.10.8)
       mini_portile2 (~> 2.4.0)
-    rack (2.0.8)
+    rack (2.2.2)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails-dom-testing (2.0.3)

data/app/assets/javascripts/beyond_canvas.js

@@ -1 +1,2 @@
 //= require flash
+//= require buttons

data/app/assets/javascripts/buttons.js

@@ -0,0 +1,65 @@
+$(document).ready(function() {
+  ('use strict');
+
+  $('[class^="button"]').each(function() {
+    var button = $(this);
+
+    // Add width attribute and save old width
+    button.width(button.width());
+    button.data('oldWidth', button.width());
+
+    // Add the spinner
+    button.prepend(`
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>`
+    );
+
+    // Bind ajax:success and ajax:error to the form the button belongs to
+    button
+      .closest('form')
+      .on('ajax:success', function() {
+        hideSpinner(button);
+        enableActionElements();
+      })
+      .on('ajax:error', function() {
+        hideSpinner(button);
+        enableActionElements();
+      });
+  });
+
+  // Bind click event to buttons
+  $('[class^="button"]').click(function() {
+    disableActionElements();
+    showSpinner($(this));
+  });
+});
+
+function showSpinner(button) {
+  // Adjust the width of the button
+  button.width(button.width() + $('.spinner').outerWidth(true));
+  // Show the spinner
+  setTimeout(function() {
+    button.find('.spinner').css('display', 'flex');
+  }, 125);
+}
+
+function hideSpinner(button) {
+  // Hide the spinner
+  button.find('.spinner').hide();
+  // Adjust the width of the button
+  button.width(button.data('oldWidth'));
+}
+
+function disableActionElements() {
+  $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
+    $(this).addClass('actions--disabled');
+  });
+}
+function enableActionElements() {
+  $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
+    $(this).removeClass("actions--disabled");
+  });
+}

data/app/assets/javascripts/flash.js

@@ -1,5 +1,5 @@
-document.addEventListener('turbolinks:load', function() {
-  'use strict'
+$(document).ready(function() {
+  ('use strict');
 
   $('.flash').each(function() {
     $(this).css('right', -$(this).width() + 'px');
@@ -14,8 +14,11 @@ document.addEventListener('turbolinks:load', function() {
   });
 
   function closeAlert() {
-    $('.flash').removeClass('flash--shown').delay(700).queue(function() {
-      $(this).remove();
-    });
+    $('.flash')
+      .removeClass('flash--shown')
+      .delay(700)
+      .queue(function() {
+        $(this).remove();
+      });
   }
 });

data/app/assets/stylesheets/_beyond_canvas.sass

@@ -6,6 +6,7 @@
 
 @import 'utilities/mixins'
 
+@import 'components/actions'
 @import 'components/buttons'
 @import 'components/cards'
 @import 'components/comments'
@@ -18,3 +19,4 @@
 @import 'components/notices'
 @import 'components/relative'
 @import 'components/tables'
+@import 'components/spinner'

data/app/assets/stylesheets/components/_actions.sass

@@ -0,0 +1,5 @@
+.actions
+
+  &--disabled
+    cursor: not-allowed
+    pointer-events: none

data/app/assets/stylesheets/components/_buttons.sass

@@ -2,11 +2,14 @@
   +padding($button-padding)
   @if $button-box-shadow != true
     padding-top: 7px
+  align-items: center
   border-radius: $button-border-radius
   border-width: 1px
   border-style: solid
   cursor: pointer
+  display: flex
   font-weight: $button-font-weight
+  justify-content: flex-end
   line-height: 1
   outline: none
   transition: $main-transition
@@ -15,6 +18,12 @@
   +background-color-darken($background, 10%)
   color: $color
 
+  .spinner
+    display: none
+
+    > div
+      background-color: $color
+
   &:hover
     border-color: darken($background, 10%)
 
@@ -23,6 +32,12 @@
   border-color: $background
   color: $background
 
+  .spinner
+    display: none
+
+    > div
+      background-color: $background
+
   &:hover
     background-color: lighten($background, 40%)
 

data/app/assets/stylesheets/components/spinner.sass

@@ -0,0 +1,38 @@
+.spinner
+  display: flex
+  margin-right: 12px
+  width: 24px
+  text-align: center
+
+  > div
+    margin: 0 !important
+    width: 8px
+    height: 8px
+    border-radius: 100%
+    display: inline-block
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both
+
+  .bounce1
+    -webkit-animation-delay: -0.32s
+    animation-delay: -0.32s
+
+  .bounce2
+    -webkit-animation-delay: -0.16s
+    animation-delay: -0.16s
+
+@-webkit-keyframes sk-bouncedelay
+  0%, 80%, 100%
+    -webkit-transform: scale(0)
+
+  40%
+    -webkit-transform: scale(1)
+
+@keyframes sk-bouncedelay
+  0%, 80%, 100%
+    -webkit-transform: scale(0)
+    transform: scale(0)
+
+  40%
+    -webkit-transform: scale(1)
+    transform: scale(1)

data/app/views/beyond_canvas/shared/_head.html.slim

@@ -3,10 +3,10 @@ head
   meta content='width=device-width, initial-scale=1.0' name='viewport' /
   link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" rel="stylesheet" /
   script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
-  - if defined? Turbolinks
-    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
-    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
-  - else
-    = stylesheet_link_tag 'application'
-    = javascript_include_tag 'application'
+
+  - stylesheet_link_tag = BeyondCanvas.configuration.stylesheet_link_tag
+  - javascript_include_tag = BeyondCanvas.configuration.javascript_include_tag
+  = stylesheet_link_tag(stylesheet_link_tag) unless stylesheet_link_tag.nil?
+  = javascript_include_tag(javascript_include_tag) unless javascript_include_tag.nil?
+
   = render 'beyond_canvas/custom/public_head'

data/lib/beyond_canvas.rb

@@ -26,10 +26,12 @@ module BeyondCanvas
   end
 
   class Configuration
-    attr_accessor :public_logo
+    attr_accessor :public_logo, :stylesheet_link_tag, :javascript_include_tag
 
     def initialize
       @public_logo = nil
+      @stylesheet_link_tag = nil
+      @javascript_include_tag = nil
     end
   end
 end

data/lib/beyond_canvas/version.rb

@@ -1,3 +1,3 @@
 module BeyondCanvas
-  VERSION = "0.6.4.pre".freeze
+  VERSION = "0.7.0.pre".freeze
 end

data/lib/generators/templates/beyond_canvas.rb

@@ -2,4 +2,7 @@
 
 BeyondCanvas.setup do |config|
   # config.public_logo = "logo.png"
+
+  # config.stylesheet_link_tag = 'application'
+  # config.javascript_include_tag = 'application'
 end

data/lib/generators/templates/beyond_canvas_form_utils.rb

@@ -1,19 +1,22 @@
 # frozen_string_literal: true
 
-ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
+# Adds form__error class to the inputs after sending a form when errors
+ActionView::Base.field_error_proc = proc do |html_tag, _instance|
+  include ActionView::Helpers::SanitizeHelper
+
   if html_tag =~ /<(input|textarea|select)/
-    error_class = "input__error".freeze
+    error_class = 'form__error'
 
     doc = Nokogiri::XML(html_tag)
     doc.children.each do |field|
-      unless field["type"] == "hidden"
-        unless field["class"] =~ /\berror\b/
-          field["class"] = "#{field['class']} #{error_class}".strip
-        end
-      end
+      next if field['type'] == 'hidden'
+
+      next if field['class'] =~ /\berror\b/
+
+      field['class'] = "#{field['class']} #{error_class}".strip
     end
 
-    doc.to_html.html_safe
+    sanitize doc.to_html
   else
     html_tag
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: beyond_canvas
 version: !ruby/object:Gem::Version
-  version: 0.6.4.pre
+  version: 0.7.0.pre
 platform: ruby
 authors:
 - Unai Abrisketa
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-01-08 00:00:00.000000000 Z
+date: 2020-02-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: colorize
@@ -98,8 +98,10 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/beyond_canvas.js
+- app/assets/javascripts/buttons.js
 - app/assets/javascripts/flash.js
 - app/assets/stylesheets/_beyond_canvas.sass
+- app/assets/stylesheets/components/_actions.sass
 - app/assets/stylesheets/components/_buttons.sass
 - app/assets/stylesheets/components/_cards.sass
 - app/assets/stylesheets/components/_comments.sass
@@ -112,6 +114,7 @@ files:
 - app/assets/stylesheets/components/_notices.sass
 - app/assets/stylesheets/components/_relative.sass
 - app/assets/stylesheets/components/_tables.sass
+- app/assets/stylesheets/components/spinner.sass
 - app/assets/stylesheets/settings/_reset_css.sass
 - app/assets/stylesheets/settings/_typography.sass
 - app/assets/stylesheets/settings/_variables.sass