pageflow-progress-navigation-bar 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 002276bbe2f90573ae2dfb95e8529d2c231b247a
-  data.tar.gz: 99d29481b7ce7f1a021ea4499ec84e8b1b9151fe
+SHA256:
+  metadata.gz: 2211c725fc377e1c74bf90f3585b536fd53ddbd1405fd2015fd7573dadf0c435
+  data.tar.gz: 152b008820f8363bd824a77c56755a621e5a6b56efff6d576ca1c77373408ad2
 SHA512:
-  metadata.gz: c53b695f177f52c602af08f1f2e9a619fddc8d3587c6bbcfd9e65caf86cfe0c4ec7be90c7a69c196abc61dae213b535ae2788f0a478693f3122fd03f160a9144
-  data.tar.gz: 94dfb95d1da34586ea4f34b42a3a743e825659175dcadee5b889a31e37fcd2490ef9f5f897b996efba9fd7d7e7befdf52dae17b837dba3cafe5c9aa718afc7d9
+  metadata.gz: 2fb9dcb7d575f426c8ee0142946e0ee2a8f33328a8fae65a455ed4effcb05734e6ddbd3bccc630dd80e45e7e155e12e829c1f3cc7e9bd6a3c308a1901e91db9e
+  data.tar.gz: be3ac84d62a5919a7d43f016ef7a43f0907cae11d1c2f38fb0e8bc9594619314125ad760873d5bb73ef2ea1b2e6c779c00310d29618672f636ba8dd094a6a3a4

data/CHANGELOG.md

@@ -1,13 +1,27 @@
 # CHANGELOG
 
-### Version 1.0.0
+### Version 1.1.0
 
-2017-08-11
+2018-12-10
 
-[Compare changes](https://github.com/codevise/pageflow-progress-navigation-bar/compare/0-x-stable...v1.0.0)
+[Compare changes](https://github.com/codevise/pageflow-progress-navigation-bar/compare/1-0-stable...v1.1.0)
 
-None so far.
+- Add support for Pageflow 13
+  ([#31](https://github.com/codevise/pageflow-progress-navigation-bar/pull/31))
+- Use pageflow.navigationDirection on mobile
+  ([#33](https://github.com/codevise/pageflow-progress-navigation-bar/pull/33),
+   [#34](https://github.com/codevise/pageflow-progress-navigation-bar/pull/34))
+- Add horizontal mobile variant
+  ([#32](https://github.com/codevise/pageflow-progress-navigation-bar/pull/32))
+- Right to left layout support
+  ([#28](https://github.com/codevise/pageflow-progress-navigation-bar/pull/28))
+- Chapter indicator color options
+  ([#30](https://github.com/codevise/pageflow-progress-navigation-bar/pull/30))
+- Make widget-icon-font-options apply to buttons
+  ([#36](https://github.com/codevise/pageflow-progress-navigation-bar/pull/36))
+- Fix position of unmute button in mobile variant
+  ([#35](https://github.com/codevise/pageflow-progress-navigation-bar/pull/35))
 
 See
-[0-5-stable branch](https://github.com/codevise/pageflow-progress-navigation-bar/blob/0-5-stable/CHANGELOG.md)
+[1-0-stable branch](https://github.com/codevise/pageflow-progress-navigation-bar/blob/1-0-stable/CHANGELOG.md)
 for previous changes.

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

@@ -51,8 +51,8 @@
 
       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');
+      this.element.toggleClass('horizontal', !!useHorizontalVariant(this.element));
+      this.element.toggleClass('vertical', !useHorizontalVariant(this.element));
 
       $('a.navigation_top', this.element).topButton();
 
@@ -289,4 +289,10 @@
       });
     }
   });
+
+  function useHorizontalVariant(element) {
+    return element.data('widget') === 'progress_navigation_bar_horizontal' ||
+           (pageflow.navigationDirection &&
+            pageflow.navigationDirection.isHorizontal());
+  }
 }(jQuery));

data/app/assets/stylesheets/pageflow/progress_navigation_bar.scss

@@ -50,12 +50,18 @@ $progressbar-mobile-width: 14px;
 
   @include pageflow-progress-mobile-variant {
     opacity: 0;
+    pointer-events: none;
     width: $progressbar-mobile-width;
     @include transition(opacity 0.4s ease 0.5s);
     @include transform(translateZ(0));
     -webkit-backface-visibility: hidden;
   }
 
+  &.show_on_mobile {
+    opacity: 1;
+    @include transition(opacity 0.4s ease);
+  }
+
   position: absolute;
   right: 0;
   top: 0;
@@ -159,11 +165,6 @@ $progressbar-mobile-width: 14px;
 
   &.hover, &:hover, &:focus, &.focus {
     overflow: visible;
-    width: 122px;
-
-    @include pageflow-progress-mobile-variant {
-      width: $progressbar-mobile-width;
-    }
 
     .navigation_button_area {
       width: 87px;
@@ -305,7 +306,7 @@ $progressbar-mobile-width: 14px;
     width: 210px;
 
     a {
-      float: left;
+      @include float-start;
       text-decoration: none;
       padding: 0 15px 0 15px;
       width: 39px;
@@ -333,7 +334,7 @@ $progressbar-mobile-width: 14px;
     }
 
     a.legal, a.copy {
-      float: left;
+      @include float-start;
     }
   }
 
@@ -418,24 +419,14 @@ $progressbar-mobile-width: 14px;
       top: 0;
       bottom: 0;
       right: 0;
-      width: 30px;
       max-height: 100%;
       overflow: hidden;
       position: absolute;
       @include pageflow-progress-navigation-bar-transparent-background;
 
-      @include pageflow-progress-mobile-variant {
-        width: $progressbar-mobile-width;
-      }
-
       ul {
         position: absolute;
 
-        @include pageflow-progress-mobile-variant {
-          right: 3px;
-          width: 8px;
-        }
-
         li {
           position: relative;
           @include box-sizing(border-box);

data/app/assets/stylesheets/pageflow/progress_navigation_bar/horizontal.scss

@@ -8,7 +8,12 @@ $thumbnail-small-width: 50px;
   width: 100%;
 
   @include pageflow-progress-mobile-variant {
-    display: none;
+    height: $progressbar-mobile-width;
+    overflow: hidden;
+
+    .header_button {
+      display: none;
+    }
   }
 
   &:before {
@@ -82,6 +87,7 @@ $thumbnail-small-width: 50px;
           width: 100%;
 
           .volume-control {
+            direction: ltr;
             text-align: center;
             display: inline-block;
             margin: 30px 0 0 0;
@@ -213,15 +219,25 @@ $thumbnail-small-width: 50px;
     text-align: center;
     white-space: nowrap;
 
+
     li {
       width: 20px;
       height: 18px;
-      margin-right: 1px;
+      @include margin-end(1px);
       display: inline-block;
       @include box-sizing(border-box);
 
       &:last-child {
-        margin-right: 0;
+        @include margin-end(0);
+      }
+    }
+
+    @include pageflow-progress-mobile-variant {
+      width: 100%;
+      margin-top: -4px;
+
+      li {
+        height: 8px;
       }
     }
   }

data/app/assets/stylesheets/pageflow/progress_navigation_bar/themes/default.scss

@@ -15,20 +15,26 @@ $progress-navigation-bar-display-share-button: $navigation-display-share-button
 /// Display hide text menu button
 $progress-navigation-bar-display-hide-text-button: $navigation-display-hide-text-button !default;
 
-// Legacy
+/// Chapter Indicator colors
 
-$nav-color: $main-color;
+$progress-navigation-bar-active-page-color: $main-color !default;
 
-$nav-active-chapter: desaturate($main-color, 50%);
-$nav-active-page: $main-color;
+$progress-navigation-bar-inactive-chapter-color: #9B9B9B !default;
 
-$nav-active-chapter-beginning: desaturate($main-color, 40%);
+$progress-navigation-bar-chapter-beginning-color: #afafaf !default;
 
-$nav-hint-color: #A9A9A9 !default;
+$progress-navigation-bar-active-chapter-color: desaturate($progress-navigation-bar-active-page-color, 50%) !default;
+
+$progress-navigation-bar-active-chapter-beginning-color: desaturate($progress-navigation-bar-active-page-color, 40%) !default;
 
-$nav-chapter-beginning: #afafaf;
-$nav-dot-even: #9B9B9B;
-$nav-dot-odd: #afafaf;
+/// @see $default-widget-icon-font-options
+$progress-navigation-bar-icon-font-options: () !default;
+
+// Legacy
+
+$nav-color: $main-color;
+
+$nav-hint-color: #A9A9A9 !default;
 
 $nav-bg-color: $basic-background-color;
 $bg-color: $nav-bg-color;
@@ -49,7 +55,9 @@ $nav-bg-color-transparent: $basic-background-color-transparent;
   @if $progress-navigation-bar-icons == "sprite" {
     @include progress-navigation-bar-icons-sprite;
   } @else {
-    @include progress-navigation-bar-icons-icon-font;
+    @include progress-navigation-bar-icons-icon-font(
+      widget-icon-font-options($progress-navigation-bar-icon-font-options)...
+    );
   }
 
   .navigation_site_detail .thumbnail {
@@ -195,19 +203,6 @@ $nav-bg-color-transparent: $basic-background-color-transparent;
       a {
         text-align: center;
       }
-
-      a.active,
-      a:hover {
-        p {
-          color: $nav-color;
-        }
-
-        .share_google, .share_facebook, .share_twitter {
-          &:before {
-            color: $nav-color;
-          }
-        }
-      }
     }
   }
 
@@ -222,33 +217,33 @@ $nav-bg-color-transparent: $basic-background-color-transparent;
       left: 0;
       height: 100%;
       width: 100%;
-      background-color: $nav-dot-even;
+      background-color: $progress-navigation-bar-inactive-chapter-color;
       border-bottom: 1px solid $nav-bg-color-transparent;
       @include box-sizing(border-box);
 
       &.in_active_chapter {
-        background-color: $nav-active-chapter;
+        background-color: $progress-navigation-bar-active-chapter-color;
       }
 
       &.active {
         cursor: default;
-        background-color: $nav-active-page;
+        background-color: $progress-navigation-bar-active-page-color;
 
         img {
-          border-left: 5px solid $nav-active-page;
+          border-left: 5px solid $progress-navigation-bar-active-page-color;
         }
       }
     }
 
     li.chapter_beginning a {
-      background-color: $nav-chapter-beginning;
+      background-color: $progress-navigation-bar-chapter-beginning-color;
 
       &.in_active_chapter {
-        background-color: $nav-active-chapter-beginning;
+        background-color: $progress-navigation-bar-active-chapter-beginning-color;
       }
 
       &.active {
-        background-color: $main-color;
+        background-color: $progress-navigation-bar-active-page-color;
       }
     }
 
@@ -258,10 +253,10 @@ $nav-bg-color-transparent: $basic-background-color-transparent;
 
     &.no_chapters {
       li.chapter_beginning a, li a.in_active_chapter, li.chapter_beginning a.in_active_chapter {
-        background-color: $nav-dot-even;
+        background-color: $progress-navigation-bar-inactive-chapter-color;
 
         &.active {
-          background-color: $nav-active-page;
+          background-color: $progress-navigation-bar-active-page-color;
         }
       }
     }

data/app/assets/stylesheets/pageflow/progress_navigation_bar/themes/default/icons/icon_font.scss

@@ -1,6 +1,13 @@
 @mixin progress-navigation-bar-icons-icon-font(
-  $button-background-color: rgb(219, 219, 219),
-  $active-button-background-color: $main-color
+  $button-background-color,
+  $active-button-background-color,
+
+  $button-icon-color,
+  $active-button-icon-color,
+  $deactivated-button-icon-color,
+
+  $share-icon-color: $widget-text-color,
+  $active-share-icon-color: $main-color
 ) {
   .navigation_button_area .navigation_bar_buttons {
 
@@ -16,7 +23,7 @@
         display: block;
         box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.2);
         border-radius: 18px;
-        color: rgba(0, 0, 0, 0.75);
+        color: $button-icon-color;
         cursor: pointer;
         margin: -25px auto 0 30px;
         position: relative;
@@ -27,16 +34,12 @@
         }
       }
 
-      &:hover .button, &.active .button {
+      &:hover .button,
+      &.active .button {
         background-color: $active-button-background-color !important;
         -webkit-mask-image: none;
-        color: rgba(255, 255, 255, 0.9);
+        color: $active-button-icon-color;
         text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
-
-        .button, .navigation_mute, .navigation_share {
-          color: rgba(255, 255, 255, 0.9);
-          text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
-        }
       }
 
       .navi_hint {
@@ -45,15 +48,17 @@
 
       &:active .button {
         box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
-        -webkit-transform: translate(1px, 1px);
-        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.2) 100%);
+        @include transform(translate(1px, 1px));
+      }
+
+      &.deactivated .button {
+        color: $deactivated-button-icon-color;
       }
     }
 
     .button, .navigation_mute, .navigation_share {
       font-family: "FontAwesome";
       font-size: 1em;
-      color: rgba(0, 0, 0, 0.75);
       text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.6);
 
       display: inline-block;
@@ -131,11 +136,13 @@
       }
     }
 
-    .share_google, .share_facebook, .share_twitter {
+    .share_google,
+    .share_facebook,
+    .share_twitter {
       font-size: 1.5em;
       &:before {
         font-family: "FontAwesome";
-        color: white;
+        color: $share-icon-color;
         text-shadow: none;
       }
     }
@@ -149,6 +156,23 @@
     .share_twitter {
       @include fa-twitter-icon;
     }
+
+    .navigation_share_box {
+      a.active,
+      a:hover {
+        p {
+          color: $active-share-icon-color;
+        }
+
+        .share_google,
+        .share_facebook,
+        .share_twitter {
+          &:before {
+            color: $active-share-icon-color;
+          }
+        }
+      }
+    }
   }
 
   .volume-control:before,

data/app/assets/stylesheets/pageflow/progress_navigation_bar/themes/default/widget_margin.scss

@@ -10,7 +10,7 @@
   margin-right: 120px;
 
   @include pageflow-progress-mobile-variant {
-    margin-right: 0;
+    margin-right: 10px;
   }
 }
 

data/app/assets/stylesheets/pageflow/progress_navigation_bar/vertical.scss

@@ -1,7 +1,10 @@
 .js.progress_navigation_bar.vertical {
-  &.show_on_mobile {
-    opacity: 1;
-    @include transition(opacity 0.4s ease);
+  &.hover, &:hover, &:focus, &.focus {
+    width: 122px;
+
+    @include pageflow-progress-mobile-variant {
+      width: $progressbar-mobile-width;
+    }
   }
 
   .header_button  {
@@ -46,51 +49,57 @@
     }
   }
 
-  .scroller ul {
+  .scroller {
+    width: 30px;
+
     @include pageflow-progress-mobile-variant {
-      right: 3px;
-      width: 8px;
-    }
-  }
+      width: $progressbar-mobile-width;
 
-  .scroller li {
-    &.animate_in {
-      &.moving_forwards {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-bottom 0.4s ease-out);
+      ul {
+        right: 3px;
+        width: 8px;
       }
+    }
 
-      &.moving_backwards {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-top 0.4s ease-out);
-      }
+    li {
+      &.animate_in {
+        &.moving_forwards {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-bottom 0.4s ease-out);
+        }
 
-      &.moving_down {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-right 0.4s ease-out);
-      }
+        &.moving_backwards {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-top 0.4s ease-out);
+        }
 
-      &.moving_up {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-left 0.4s ease-out);
-      }
-    }
+        &.moving_down {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-right 0.4s ease-out);
+        }
 
-    &.animate_out {
-      &.moving_forwards {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-top 0.4s ease-in);
-        opacity: 0;
+        &.moving_up {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-left 0.4s ease-out);
+        }
       }
 
-      &.moving_backwards {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-bottom 0.4s ease-in);
-        opacity: 0;
-      }
+      &.animate_out {
+        &.moving_forwards {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-top 0.4s ease-in);
+          opacity: 0;
+        }
 
-      &.moving_down {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-left 0.4s ease-in);
-        @include transform(translate3d(-50px, 0, 0));
-      }
+        &.moving_backwards {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-bottom 0.4s ease-in);
+          opacity: 0;
+        }
 
-      &.moving_up {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-right 0.4s ease-in);
-        @include transform(translate3d(50px, 0, 0));
+        &.moving_down {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-left 0.4s ease-in);
+          @include transform(translate3d(-50px, 0, 0));
+        }
+
+        &.moving_up {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-right 0.4s ease-in);
+          @include transform(translate3d(50px, 0, 0));
+        }
       }
     }
   }

data/lib/pageflow/progress_navigation_bar/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module ProgressNavigationBar
-    VERSION = '1.0.0'.freeze
+    VERSION = '1.1.0'.freeze
   end
 end

data/pageflow-progress-navigation-bar.gemspec

@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
 
   spec.required_ruby_version = '~> 2.1'
 
-  spec.add_runtime_dependency 'pageflow', ['>= 0.11', '< 13']
+  spec.add_runtime_dependency 'pageflow', ['>= 12.2.x', '< 14']
   spec.add_runtime_dependency 'pageflow-public-i18n', '~> 1.0'
 
   spec.add_development_dependency 'bundler', '~> 1.0'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-progress-navigation-bar
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Codevise Solutions Ltd.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-11 00:00:00.000000000 Z
+date: 2018-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
@@ -16,20 +16,20 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0.11'
+        version: 12.2.x
     - - "<"
       - !ruby/object:Gem::Version
-        version: '13'
+        version: '14'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0.11'
+        version: 12.2.x
     - - "<"
       - !ruby/object:Gem::Version
-        version: '13'
+        version: '14'
 - !ruby/object:Gem::Dependency
   name: pageflow-public-i18n
   requirement: !ruby/object:Gem::Requirement
@@ -155,7 +155,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.8
+rubygems_version: 2.7.5
 signing_key: 
 specification_version: 4
 summary: Pageflow navigation widget.