myg 2.4.0 → 2.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd0adc23c9a2221fbe2467b95aba935a0a5c07c3b04d9dc65c2c78704b6fa537
-  data.tar.gz: 896d97d0379fec8ca42417ce11d1cc2f8610f6231e38655495ccfec749e6bd19
+  metadata.gz: 8c29952c97ba88bea732f66414be85f5444e5754bf338c28cd2ecdb7a706eabb
+  data.tar.gz: 1df6280cae3bf39d6746452c3fbedb897aee28c8bdb5d86161273960c50ac689
 SHA512:
-  metadata.gz: 55cd958b1a15530ff4f0b997ab88a741ae65aea70ee8823a6aa8559c2f2ee5c5a0f4cd1f007f6f3f406619564a8844be7ff50c207e64aec080dc93833d927ae9
-  data.tar.gz: 2e9e493688f80677874a763c7f730b971dd8fe2f30e021317ea2c3d97beb07ecfac7c976ee5ef77bd47a40abc932b4bed1909fe4dc1aadeba2dcbc644bbeeba3
+  metadata.gz: 8b8d1112614a403feb425d508aa5021932a813501f03fe04907ee1aa5108d0eca188fecd15a235a351fab59bcacd95e1a8eb343120ef202d53a4cf7a1a4c5ea1
+  data.tar.gz: c3b91b66ee1b6c44d3d5b1f75db29ca767c7f5ca286da4a0713d9cfbbfbb18ac2da960d023db64f0755a0050a5b4b9e150aba63b89dc6f40824c74b2279e0bab

data/CHANGELOG.md

@@ -4,6 +4,12 @@
 
 * nothing yet
 
+### 2.5.0 - 2018/03/01
+
+* features
+    * added `tabs` generator
+    * added `tabs` component
+
 ### 2.4.0 - 2018/02/25
 
 * features

data/README.md

@@ -82,6 +82,8 @@ These are the components currently supported by Myg on Rails:
 * [`radio`](components/myg/radio.md)
 * [`slider`](components/myg/slider.md)
 * [`switch`](components/myg/switch.md)
+* [`tabs`](components/myg/tabs.md)
+* [`toast`](components/myg/toast.md)
 * [`toolbar`](components/myg/toolbar.md)
 
 You feel a component is missing? Create an issue to make us aware, or implement it yourself. Pull requests are welcome.

data/app/views/mozaic/myg/_switch.html.erb

@@ -1,5 +1,6 @@
 <% class_name = options.delete :class_name %>
 <% attribute = options.delete :attribute %>
+<% values = options.delete(:values) || [0, 1] %>
 <% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
 <% id = class_name ? "#{class_name.to_s.downcase}_#{attribute}" : "#{attribute}" %>
 <% wrapper_html = {
@@ -9,10 +10,12 @@
     type: 'checkbox',
     class: ['mdc-switch__native-control', options.dig(:input_html, :class)].join(' '),
     name: name,
-    id: id
+    id: id,
+    value: values.last
 } %>
 
 <%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
+    <input value="<%= values.first %>" type="hidden" name="<%= name %>" />
     <%= tag 'input', (options[:input_html] || {}).merge(input_html) %>
     <div class="mdc-switch__background">
         <div class="mdc-switch__knob"></div>

data/app/views/mozaic/myg/_tabs.html.erb

@@ -0,0 +1,45 @@
+<% nav_html = {
+    class: ['myg-tabs mdc-tab-bar', options.dig(:nav_html, :class)].join(' '),
+    update: {
+        history: options[:update_history]
+    }
+} %>
+<% wrapper_html = {
+    class: ['myg-tabs--panels', options.dig(:wrapper_html, :class)].join(' ')
+} %>
+
+<%= content_tag 'nav', (options[:nav_html] || {}).merge(nav_html) do %>
+    <% options[:tabs]&.each do |tab| %>
+        <% tab_html = {
+            class: ['mdc-tab', options.dig(:tab_html, :class), ('mdc-tab--active' if tab[:active])].join(' '),
+            aria: {
+                controls: tab[:id]
+            },
+            role: 'tab'
+        } %>
+        <%= link_to tab[:name], tab[:href] || "##{tab[:id]}", (options[:tab_html] || {}).merge(tab_html) %>
+    <% end %>
+    <span class="mdc-tab-bar__indicator"></span>
+<% end %>
+<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
+    <% if options[:async] %>
+        <div class="myg-tabs--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="myg-tabs--panel" id="myg-tabs--panel-success" role="tabpanel" aria-hidden="true"></div>
+        <div class="myg-tabs--panel" id="myg-tabs--panel-error" role="tabpanel" aria-hidden="true"></div>
+    <% end %>
+    <% options[:tabs]&.each do |tab| %>
+        <% panel_html = {
+            class: ['myg-tabs--panel', options.dig(:panel_html, :class), ('myg-tabs--shown' if tab[:active])].join(' '),
+            id: tab[:id],
+            role: 'tabpanel',
+            aria: {
+                hidden: (tab[:active] ? false : true)
+            }
+        } %>
+        <%= content_tag 'div', (options[:panel_html] || {}).merge(panel_html) do %>
+            <%= tab[:content] || render(partial: tab[:partial], locals: tab[:partial_locales]) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/views/mozaic/myg/_toast.html.erb

@@ -1,5 +1,5 @@
 <% html = {
-    class: ['myg-toast mdc-snackbar', options[:class]].join(' '),
+    class: ['myg-toast mdc-snackbar mdc-snackbar--align-start', options[:class]].join(' '),
     aria: {
         live: 'assertive',
         atomic: true,

data/lib/generators/myg/tabs_generator.rb

@@ -0,0 +1,23 @@
+require 'rails/generators'
+require 'rails/generators/migration'
+
+class Myg::TabsGenerator < Rails::Generators::Base
+
+    include Rails::Generators::Migration
+
+    source_root File.join File.dirname(__FILE__), '../templates/tabs'
+    desc 'Generate a Myg tabs template'
+
+    class_option :controller, desc: 'Tabs controller', type: :string, aliases: '-c'
+    class_option :method_names, desc: 'Tab method names', type: :array, aliases: '-m'
+
+    def create_templates
+        template '_tabs.html.erb', "app/views/#{options[:controller]}/_tabs.html.erb"
+        options[:method_names]&.each do |name|
+            @name = name
+            template 'tab.html.erb', "app/views/#{options[:controller]}/_#{name}.html.erb"
+            template '_tab.html.erb', "app/views/#{options[:controller]}/#{name}.html.erb"
+        end
+    end
+
+end

data/lib/generators/templates/tabs/_tab.html.erb

@@ -0,0 +1 @@
+<h1><%= @name.titleize %></h1>

data/lib/generators/templates/tabs/_tabs.html.erb

@@ -0,0 +1,3 @@
+<h1>Title</h1>
+
+<%%= component 'myg/tabs', update_history: true, tabs: <%= options[:method_names]&.map! { |t| { name: t.titleize, id: t, partial: t } } %> %>

data/lib/generators/templates/tabs/tab.html.erb

@@ -0,0 +1 @@
+<%%= render 'tabs' %>

data/lib/myg/railtie.rb

@@ -14,6 +14,7 @@ module Myg
                 config.define_component 'myg/radio'
                 config.define_component 'myg/slider', discrete: false, disabled: false, value: 0, min: 0, max: 50, label: 'Select value'
                 config.define_component 'myg/switch'
+                config.define_component 'myg/tabs', async: false, update_history: false
                 config.define_component 'myg/toast'
                 config.define_component 'myg/toolbar'
             end

data/lib/myg/version.rb

@@ -1,5 +1,5 @@
 module Myg
 
-    VERSION = '2.4.0'
+    VERSION = '2.5.0'
 
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: myg
 version: !ruby/object:Gem::Version
-  version: 2.4.0
+  version: 2.5.0
 platform: ruby
 authors:
 - Jonas Hübotter
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-25 00:00:00.000000000 Z
+date: 2018-03-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -114,9 +114,11 @@ files:
 - app/views/mozaic/myg/_radio.html.erb
 - app/views/mozaic/myg/_slider.html.erb
 - app/views/mozaic/myg/_switch.html.erb
+- app/views/mozaic/myg/_tabs.html.erb
 - app/views/mozaic/myg/_toast.html.erb
 - app/views/mozaic/myg/_toolbar.html.erb
 - lib/generators/myg/install_generator.rb
+- lib/generators/myg/tabs_generator.rb
 - lib/generators/myg/theme_generator.rb
 - lib/generators/templates/install/initializer.rb
 - lib/generators/templates/install/javascripts/action-button.js
@@ -162,6 +164,9 @@ files:
 - lib/generators/templates/install/stylesheets/variables/_spacing.scss
 - lib/generators/templates/install/stylesheets/variables/_text.scss
 - lib/generators/templates/install/stylesheets/variables/_theme.scss
+- lib/generators/templates/tabs/_tab.html.erb
+- lib/generators/templates/tabs/_tabs.html.erb
+- lib/generators/templates/tabs/tab.html.erb
 - lib/generators/templates/theme/stylesheets/_theme.scss.erb
 - lib/myg.rb
 - lib/myg/configuration.rb