pageflow-progress-navigation-bar 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 80610bc20007bcc35f9ed886be7094fa633481f2
-  data.tar.gz: 3a0cd81da1e019605426480fccea45a2382594a9
+  metadata.gz: 2bf226056a886479d66b2b40cc869dda62f79f40
+  data.tar.gz: a09b16ff39b92b94e5ef5d474ed342376bb99426
 SHA512:
-  metadata.gz: e057b25d3762ceebf476cad147158041f3829efdb88d9d1394310e82ac1ace5f3200dd3466871414fe47c1b3f6825a1f6b916ca6a53d34ba199304cb53f38209
-  data.tar.gz: 7866f04a7dfa3539302c205d0efe895f57de9e6eb0adb173a7cb6fb77f5ce2f3dc8b02190fca3f9341436470c056ff66a9daa7fb9f86b7e3188ff191c639f05f
+  metadata.gz: 2fc124cf313ddee6fa30a9aa1ac089f93de165b12caffd854f6a171d4865a7032a745e357a8259b5413115a90068c5116d8846a3d22e20f4bf01021af117334a
+  data.tar.gz: 914a9310f21d21faecefc4df2589cd8e8f8a8aba09287f282b7b6ae72fbceafa86f69806d3d18a058cac96b06bfc57aa9fae03b63e8f4be4704fa4a22864d7b5

data/.scss-lint.yml

@@ -0,0 +1,147 @@
+scss_files: "**/*.scss"
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+  BorderZero:
+    enabled: false
+    convention: zero
+  ColorKeyword:
+    enabled: true
+    severity: warning
+  ColorVariable:
+    enabled: true
+  Comment:
+    enabled: true
+  DebugStatement:
+    enabled: true
+  DeclarationOrder:
+    enabled: false
+  DuplicateProperty:
+    enabled: true
+  ElsePlacement:
+    enabled: true
+    style: same_line
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+  EmptyRule:
+    enabled: true
+  FinalNewline:
+    enabled: true
+    present: true
+  HexLength:
+    enabled: false
+    style: short
+  HexNotation:
+    enabled: true
+    style: lowercase
+  HexValidation:
+    enabled: true
+  IdSelector:
+    enabled: true
+  ImportantRule:
+    enabled: true
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space
+    width: 2
+  LeadingZero:
+    enabled: true
+    style: include_zero
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase
+    placeholder_convention: "^[-a-z_]+$"
+    mixin_convention: "^[-a-z_]+$"
+  NestingDepth:
+    enabled: true
+    max_depth: 4
+    severity: warning
+  PlaceholderInExtend:
+    enabled: false
+  PropertyCount:
+    enabled: true
+    include_nested: false
+    max_properties: 10
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+    severity: warning
+    separate_groups: false
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+  QualifyingElement:
+    enabled: false
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+    severity: warning
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+    severity: warning
+  SelectorFormat:
+    enabled: true
+    convention: "^[-a-z0-9_]+$"
+  Shorthand:
+    enabled: false
+    severity: warning
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+  SingleLinePerSelector:
+    enabled: true
+  SpaceAfterComma:
+    enabled: true
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+  SpaceAfterPropertyName:
+    enabled: true
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: false
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+  StringQuotes:
+    enabled: true
+    style: double_quotes
+  TrailingSemicolon:
+    enabled: true
+  TrailingZero:
+    enabled: false
+  UnnecessaryMantissa:
+    enabled: true
+  UnnecessaryParentReference:
+    enabled: true
+  UrlFormat:
+    enabled: true
+  UrlQuotes:
+    enabled: true
+  VariableForProperty:
+    enabled: false
+    properties: []
+  VendorPrefixes:
+    enabled: true
+    identifier_list: bourbon
+    include: []
+    exclude: []
+  ZeroUnit:
+    enabled: true
+    severity: warning
+  Compass::PropertyWithMixin:
+    enabled: false

data/CHANGELOG.md

@@ -1,5 +1,34 @@
 # CHANGELOG
 
+### Version 0.5.0
+
+2016-09-09
+
+[Compare changes](https://github.com/codevise/pageflow-progress-navigation-bar/compare/v0.4.0...v0.5.0)
+
+- Add configurable pictogram visibility
+  ([#20](https://github.com/codevise/pageflow-progress-navigation-bar/pull/20))
+- Fix volume up/down icons
+  ([#19](https://github.com/codevise/pageflow-progress-navigation-bar/pull/19))
+- Also apply transparent bg color for horizontal bar
+  ([#18](https://github.com/codevise/pageflow-progress-navigation-bar/pull/18))
+- Prevent hover effect for deactivated top button
+  ([#17](https://github.com/codevise/pageflow-progress-navigation-bar/pull/17))
+- Make link and menu box colors configurable
+  ([#16](https://github.com/codevise/pageflow-progress-navigation-bar/pull/16))
+- Horizontal navigation bar
+  ([#15](https://github.com/codevise/pageflow-progress-navigation-bar/pull/15))
+- Use share links partials from pageflow gem
+  ([#14](https://github.com/codevise/pageflow-progress-navigation-bar/pull/14))
+- Add theme options to control display of hide text button
+  ([#24](https://github.com/codevise/pageflow-progress-navigation-bar/pull/24))
+- Make typography configurable in theme
+  ([#23](https://github.com/codevise/pageflow-progress-navigation-bar/pull/23))
+- Rename .css.scss files to only .scss
+  ([#22](https://github.com/codevise/pageflow-progress-navigation-bar/pull/22))
+- Fix icon font volume icons
+  ([#21](https://github.com/codevise/pageflow-progress-navigation-bar/pull/21))
+
 ### Version 0.4.0
 
 2016-06-09

data/Gemfile

@@ -2,9 +2,3 @@ source 'https://rubygems.org'
 
 # Specify your gem's dependencies in chart.gemspec
 gemspec
-
-# Rails 4 compat
-gem 'activeadmin', git: 'https://github.com/codevise/active_admin.git', branch: 'rails4'
-gem 'ransack'
-gem 'inherited_resources', '1.4.1'
-gem 'formtastic', '2.3.0.rc2'

data/README.md

@@ -21,11 +21,11 @@ Include javascripts and stylesheets:
     # app/assets/javascripts/pageflow/application.js
     //= require pageflow/progress_navigation_bar
 
-    # app/assets/stylesheets/pageflow/application.css.scss
+    # app/assets/stylesheets/pageflow/application.scss
     @import "pageflow/progress_navigation_bar";
 
     # Adding basic style to your theme
-    # app/assets/stylesheets/pageflow/themes/default.css.scss
+    # app/assets/stylesheets/pageflow/themes/default.scss
     @import "pageflow/progress_navigation_bar/themes/default";
 
 Execute `bundle install` Restart the application server.

data/app/assets/javascript/pageflow/progress_navigation_bar.js

@@ -5,4 +5,10 @@ pageflow.widgetTypes.register('progress_navigation_bar', {
   enhance: function(element) {
     element.progressNavigationBar();
   }
-});
+});
+
+pageflow.widgetTypes.register('progress_navigation_bar_horizontal', {
+  enhance: function(element) {
+    element.progressNavigationBar();
+  }
+});

data/app/assets/javascript/pageflow/progress_navigation_bar/widget.js

@@ -2,6 +2,48 @@
 
 (function($) {
   $.widget('pageflow.progressNavigationBar', {
+
+    _toggleNavigationBar: function() {
+      if (this.element.hasClass('horizontal')) {
+        var button = $('.header_button .button');
+        if (button.hasClass('close')) {
+          $('.scroller').show();
+        } else {
+          $('.scroller').hide();
+        }
+        button.toggleClass('close');
+      }
+    },
+
+    _resizeDots: function() {
+      var dots = $('.navigation_dots a', this.element),
+          pageDotsMaxSize = 20,
+          pageDotsMinSize = 1;
+
+      if (this.element.hasClass('horizontal')) {
+        var maxBarWidth = $('.navigation_dots').width();
+        var wantedWidth = Math.floor(maxBarWidth / dots.filter(':not(.filtered)').length);
+        var appliedWidth = (wantedWidth > pageDotsMaxSize) ? pageDotsMaxSize :
+            (wantedWidth < pageDotsMinSize) ? pageDotsMinSize : wantedWidth - 1;
+
+        $('.navigation_dots > li').css('width', appliedWidth + 'px').css('height', '');
+      }
+      else {
+        var maxBarHeight = $('#outer_wrapper').height() ? $('#outer_wrapper').height() : $('main').height(),
+            wantedHeight = maxBarHeight / dots.filter(':not(.filtered)').length,
+            appliedHeight = pageDotsMinSize;
+
+        if (wantedHeight <= pageDotsMaxSize && wantedHeight > pageDotsMinSize) {
+          appliedHeight = wantedHeight;
+        }
+        else if (wantedHeight > pageDotsMinSize) {
+          appliedHeight = pageDotsMaxSize;
+        }
+
+        $('.navigation_dots > li').css('height', Math.floor(appliedHeight) + 'px').css('width', '');
+      }
+    },
+
     _create: function() {
       var overlays = this.element.find('.navigation_site_detail'),
           that = this,
@@ -9,10 +51,13 @@
 
       this.element.addClass('js').append(overlays);
 
+      this.element.toggleClass('horizontal', this.element.data('widget') === 'progress_navigation_bar_horizontal');
+      this.element.toggleClass('vertical', this.element.data('widget') !== 'progress_navigation_bar_horizontal');
+
       $('a.navigation_top', this.element).topButton();
 
       $('.navigation_bar_bottom', this.element)
-        .append($('.navigation_bar_top > li', this.element).slice(hasHomeButton ? 4 : 3));
+          .append($('.navigation_bar_top > li', this.element).slice(hasHomeButton ? 4 : 3));
 
       pageflow.slides.on('slideshowchangepage', function() {
         that.element.addClass('show_on_mobile');
@@ -21,8 +66,12 @@
         }, 1000);
       });
 
-      that.element.on('mouseenter', function() { that.element.addClass('hover'); });
-      that.element.on('mouseleave', function() { that.element.removeClass('hover'); });
+      that.element.on('mouseenter', function() {
+        that.element.addClass('hover');
+      });
+      that.element.on('mouseleave', function() {
+        that.element.removeClass('hover');
+      });
 
       /* keyboard / skiplinks */
 
@@ -36,23 +85,23 @@
 
       /* Volume */
       that.element.find('.navigation_volume_box').volumeSlider({
-        orientation: 'v'
+        orientation: that.element.hasClass('horizontal') ? 'h' : 'v'
       });
       that.element.find('.navigation_mute').muteButton();
 
       /* hide buttons on mobile devices */
       if (pageflow.features.has('mobile platform')) {
         that.element.find('.navigation_butten_area').hide();
-
       }
 
       /* header button */
       $('.navigation_main', this.element).click(function() {
         $(this)
-          .toggleClass('active')
-          .updateTitle();
+            .toggleClass('active')
+            .updateTitle();
         $('.header').toggleClass('active');
         that.element.toggleClass('header_active');
+        that._toggleNavigationBar();
       });
 
       /* open header through skiplinks */
@@ -60,18 +109,22 @@
         $('.navigation_main', that.element).addClass('active');
         $('.header').addClass('active');
         $(this.getAttribute('href')).select();
+        that._toggleNavigationBar();
       });
 
       /* share-button */
       $('.navigation_menu .navigation_menu_box a', this.element).focus(function() {
-        $(this).parent().parent().addClass('focused');
+        $(this).parents('.navigation_menu').addClass('focused');
       }).blur(function() {
-        $(this).parent().parent().removeClass('focused');
+        $(this).parents('.navigation_menu').removeClass('focused');
+      });
+      $('.navigation_menu_box', this.element).on('mouseleave', function() {
+        $(this).parents('.navigation_menu').removeClass('focused');
       });
 
       var shareBox = $('.navigation_share_box', this.element),
           links = $('> a', shareBox);
-        shareBox.shareMenu({
+      shareBox.shareMenu({
         subMenu: $('.sub_share', shareBox),
         links: links,
         insertAfter: links.last(),
@@ -80,7 +133,7 @@
 
       /* pages */
       var pageLinks = $('.navigation_dots a', that.element),
-        target;
+          target;
 
       function registerHandler() {
         target = $(this);
@@ -107,8 +160,25 @@
       pageLinks.each(function(index) {
         var handlerIn = function() {
           if (!('ontouchstart' in document.documentElement)) {
-            var calculatedOffset = $(this).offset().top + $(overlays[index]).outerHeight() > $('.progress_navigation_bar').height() ? $('.progress_navigation_bar').height() - $(overlays[index]).outerHeight() : $(this).offset().top;
-            $(overlays[index]).css("top", calculatedOffset).addClass('visible').removeClass('hidden');
+            if (that.element.hasClass('horizontal')) {
+              var offset = 204;
+              var left = $(this).offset().left;
+              var right = left + offset;
+              var width = $('.progress_navigation_bar').width();
+              var calculatedOffsetLeft = left;
+              if (right > width) {
+                calculatedOffsetLeft = width - offset;
+              }
+
+              $(overlays[index]).css('left', calculatedOffsetLeft).css('top', '').addClass('visible').removeClass('hidden');
+            }
+            else {
+              var calculatedOffsetTop = $(this).offset().top + $(overlays[index]).outerHeight()
+              > $('.progress_navigation_bar').height() ? $('.progress_navigation_bar').height()
+              - $(overlays[index]).outerHeight() : $(this).offset().top;
+
+              $(overlays[index]).css('top', calculatedOffsetTop).css('left', '').addClass('visible').removeClass('hidden');
+            }
           }
         };
 
@@ -120,41 +190,24 @@
         });
       });
 
-      var resizeDots = function() {
-        var pageDotsMaxHeight = 20,
-        pageDotsMinHeight = 1,
-        maxBarHeight = $('#outer_wrapper').height() ? $('#outer_wrapper').height() : $('main').height(),
-        wantedHeight = maxBarHeight / pageLinks.filter(':not(.filtered)').length,
-        appliedHeight = pageDotsMinHeight;
+      this._resizeDots();
 
-        if (wantedHeight <= pageDotsMaxHeight && wantedHeight > pageDotsMinHeight) {
-          appliedHeight = wantedHeight;
-        }
-        else if(wantedHeight > pageDotsMinHeight) {
-          appliedHeight = pageDotsMaxHeight;
-        }
-
-        $('.navigation_dots > li').css('height', Math.floor(appliedHeight) + 'px');
-      };
-
-      resizeDots();
-
-      $(window).on('resize', function () {
-        $(overlays).css("top","0");
-        resizeDots();
+      $(window).on('resize', function() {
+        $(overlays).css("top", "0");
+        that._resizeDots();
       });
 
-      $('.scroller', this.element).each(function () {
+      $('.scroller', this.element).each(function() {
         var scrollerOptions = {
           mouseWheel: true,
-          bounce    : false,
-          probeType : 2
+          bounce: false,
+          probeType: 2
         };
 
         /*
-          This is just a quick fix to detect IE10. We should
-          refactor this condition if we decide to use Modernizr
-          or another more global detection.
+         This is just a quick fix to detect IE10. We should
+         refactor this condition if we decide to use Modernizr
+         or another more global detection.
          */
         if (window.navigator.msPointerEnabled) {
           scrollerOptions.preventDefault = false;
@@ -166,7 +219,7 @@
           scroller: scroller,
           scrollToActive: true,
           animationDuration: 400,
-          onFilterChange: resizeDots
+          onFilterChange: that._resizeDots()
         });
 
       });
@@ -187,8 +240,8 @@
         var fs = $('.navigation_fullscreen', this.element),
             fullscreenCallback = function(isFullScreen) {
               fs
-                .toggleClass('active', !!isFullScreen)
-                .updateTitle();
+                  .toggleClass('active', !!isFullScreen)
+                  .updateTitle();
             };
 
         fs.click(function() {
@@ -220,6 +273,7 @@
               $('body').off('touchstart', close);
             }
           }
+
           $('body').on('touchstart', close);
         }
       });