pageflow-progress-navigation-bar 0.1.0

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

@@ -0,0 +1,338 @@
+$nav-color: $main-color;
+$nav-font: $standard-font;
+
+$nav-active-chapter: desaturate($main-color, 50%);
+$nav-active-page: $main-color;
+
+$nav-active-chapter-beginning: desaturate($main-color, 40%);
+
+$nav-hint-color: #A9A9A9 !default;
+$nav-display-header-button: false !default;
+
+$nav-chapter-beginning: #afafaf;
+$nav-dot-even: #9B9B9B;
+$nav-dot-odd: #afafaf;
+
+$nav-bg-color: $basic-background-color;
+$bg-color: $nav-bg-color;
+$nav-bg-color-transparent: $basic-background-color-transparent;
+
+@mixin pageflow-progress-navigation-bar-small-height {
+  @media screen and (max-height: 870px) {
+    @content;
+  }
+}
+
+.progress_navigation_bar {
+  @if $nav-display-header-button {
+    .navigation_button_area .navigation_bar_buttons li {
+      height: 11.11%;
+
+      &.mute {
+        height: 22.22%;
+      }
+    }
+
+    &.with_home_button {
+      .navigation_button_area .navigation_bar_buttons li {
+        height: 10%;
+
+        &.mute {
+          height: 20%;
+        }
+      }
+    }
+  }
+  @else {
+    .navigation_button_area .navigation_bar_buttons li {
+      height: 12.25%;
+
+      &.menu_li {
+        display: none;
+      }
+
+      &.mute {
+        height: 25%;
+      }
+    }
+
+    &.with_home_button {
+      .navigation_button_area .navigation_bar_buttons li {
+        height: 11.11%;
+
+        &.mute {
+          height: 22.22%;
+        }
+      }
+    }
+  }
+
+  .navigation_button_area .navigation_bar_buttons {
+    &:after {
+      background-color: $nav-bg-color;
+      background-color: $nav-bg-color-transparent;
+    }
+
+    .navigation_credits_box a{
+      color: $main-color;
+    }
+
+    .navigation_bullet, .navigation_menu > a {
+      position: absolute;
+      text-decoration: none;
+
+      .button {
+        text-decoration: none;
+        font-size: 16px;
+        width: 28px;
+        height: 28px;
+        display: block;
+        background: -webkit-linear-gradient(-75deg, rgba(255, 255, 255, 0.71), rgba(0, 0, 0, 0.32));
+        background-color: #03818c !important;
+        box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.2);
+        border-radius: 18px;
+        color: rgba(0, 0, 0, 0.75);
+        cursor: pointer;
+        margin: -25px auto 0 30px;
+        position: relative;
+        background-color: rgb(219, 219, 219) !important;
+        @include shine-gradient;
+
+        @include pageflow-progress-navigation-bar-small-height {
+          margin: -14px auto 0 30px;
+        }
+      }
+
+      &:hover .button, &.active .button {
+          background-color: $nav-color !important;
+          -webkit-mask-image: none;
+          color: rgba(255,255,255,0.9);
+          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 {
+        color: $nav-hint-color;
+      }
+
+      &:hover, &.active, &:active {
+        .navi_hint {
+          color: $nav-color;
+        }
+      }
+
+      &:active .button{
+        box-shadow: 0px 1px 1px 0px 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%);
+      }
+    }
+
+    .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;
+      width: 100%;
+      text-align: center;
+      line-height: 28px;
+      border-bottom: 0px !important;
+
+    }
+
+    .navigation_bullet.navigation_main {
+      .button {
+        @include fa-reorder-icon;
+      }
+    }
+
+    .navigation_bullet.navigation_top {
+      padding-top: 0;
+      .button {
+        border-bottom: 0;
+        font-weight: bold;
+
+        @include fa-arrow-circle-up-icon;
+      }
+    }
+    .navigation_bullet.navigation_home {
+      padding-top: 0;
+      .button {
+        border-bottom: 0;
+        font-weight: bold;
+
+        @include fa-home-icon;
+      }
+    }
+    .navigation_bullet.navigation_index {
+      .button {
+        @include fa-th-icon;
+      }
+    }
+
+    &.js .navigation_bar_bottom li.fullscreen {
+      height: auto;
+    }
+
+    &.js a.scroll_indicator {
+      background-image: image-url('pageflow/themes/default/scroll_indicator_sprite.png');
+    }
+
+    .navigation_bullet.navigation_fullscreen {
+
+      .button {
+        font-weight: bold;
+        @include fa-expand-icon;
+      }
+    }
+    .navigation_bullet.navigation_hide_text {
+      .button {
+        font-weight: bold;
+
+        @include fa-photo-icon;
+      }
+    }
+    .navigation_menu {
+      .navigation_mute {
+        font-weight: bold;
+
+        @include fa-volume-up-icon;
+
+        &.muted {
+          @include fa-volume-off-icon;
+        }
+        &.muted:before {
+          margin-right: 2px;
+        }
+      }
+    }
+    .navigation_menu {
+      .navigation_share {
+        font-weight: bold;
+
+        @include fa-share-icon;
+
+        &:before {
+          margin-left: 1px;
+        }
+      }
+    }
+    .navigation_menu {
+      .navigation_credits {
+        font-weight: bold;
+        @include fa-info-icon;
+      }
+    }
+
+    .navigation_share_box {
+      a {
+        text-align: center;
+
+        p {
+          font-family: SourceSansPro;
+          font-size: 12px;
+        }
+      }
+
+      .share_google, .share_facebook, .share_twitter {
+        font-size: 1.5em;
+        &:before {
+          font-family: "FontAwesome";
+          color: white;
+          text-shadow: none;
+        }
+      }
+
+      a:hover {
+        p {
+          color: $nav-color;
+        }
+
+        .share_google, .share_facebook, .share_twitter {
+          &:before {
+            color: $nav-color;
+          }
+        }
+      }
+
+      .share_google {
+        @include fa-google-plus-icon;
+      }
+      .share_facebook {
+        @include fa-facebook-icon;
+      }
+      .share_twitter {
+        @include fa-twitter-icon;
+      }
+    }
+  }
+
+  &.js .scroller:after {
+    background-color: $nav-bg-color;
+    background-color: $nav-bg-color-transparent;
+  }
+
+  .scroller ul, &.js .scroller ul {
+    a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background-color: $nav-dot-even;
+      border-bottom: 1px solid $nav-bg-color;
+      border-bottom: 1px solid $nav-bg-color-transparent;
+      box-sizing: border-box;
+
+      &.in_active_chapter {
+        background-color: $nav-active-chapter;
+      }
+
+      &.active {
+        cursor: default;
+        background-color: $nav-active-page;
+
+
+        img {
+          border-left: 5px solid $nav-active-page;
+        }
+      }
+    }
+
+    li.chapter_beginning a {
+      background-color: $nav-chapter-beginning;
+
+        &.in_active_chapter {
+          background-color: $nav-active-chapter-beginning;
+        }
+
+        &.active {
+          background-color: $main-color;
+        }
+    }
+
+    img {
+      display: block;
+    }
+
+    &.no_chapters {
+      li.chapter_beginning a, li a.in_active_chapter, li.chapter_beginning a.in_active_chapter {
+        background-color: $nav-dot-even;
+
+        &.active {
+          background-color: $nav-active-page;
+        }
+      }
+    }
+  }
+
+  &.js .volume-control .volume-level {
+    background-color: $nav-color;
+  }
+}

data/app/views/pageflow/progress_navigation_bar/_widget.html.erb

@@ -0,0 +1,15 @@
+<%= content_tag(:div,
+                class: ["progress_navigation_bar", entry.home_button.enabled? ? 'with_home_button' : nil].compact.join(' '),
+                data: {widget: 'progress_navigation_bar'}) do %>
+
+  <div class="navigation_button_area">
+    <%= render 'pageflow/progress_navigation_bar/widget/bar_top', :entry => entry %>
+  </div>
+  <div class="scroller">
+    <ul class="navigation_dots <%= entry.chapters.count > 1 ? '' : 'no_chapters' %>">
+      <%= render :partial => 'pageflow/progress_navigation_bar/widget/page',
+                 :collection => entry.pages.displayed_in_navigation,
+                 :locals => {:image_style => :navigation_thumbnail_small, :image_width => 85, :chapters_count => entry.chapters.count} %>
+    </ul>
+  </div>
+<% end %>

data/app/views/pageflow/progress_navigation_bar/widget/_bar_top.html.erb

@@ -0,0 +1,79 @@
+<ul class="navigation_bar_buttons">
+  <li class="menu_li">
+    <a id="navigation" class="navigation_bullet navigation_main" tabindex="2" title="<%= t('.display_header') %>" data-active-title="<%= t('.hide_header') %>">
+      <span class="button"></span>
+      <span class="navi_hint"><%= t('.header') %></span>
+    </a>
+  </li>
+  <%= render('pageflow/progress_navigation_bar/widget/home_button', home_button: entry.home_button) %>
+  <li>
+    <a class="navigation_bullet navigation_top" <%= "href=##{entry.pages.first.perma_id} data-link=#{entry.pages.first.id}" unless entry.pages.nil? || entry.pages.first.nil? %> tabindex="2" title="<%= t('.first_page_title') %>">
+      <span class="button"></span>
+      <span class="navi_hint"><%= t('.first_page') %></span>
+    </a>
+  </li>
+  <li>
+    <a class="navigation_bullet navigation_index" tabindex="2" title="<%= t('.display_overview') %>" data-active-title="<%= t('.hide_overview') %>">
+      <span class="button"></span>
+      <span class="navi_hint"><%= t('.overview') %></span>
+    </a>
+  </li>
+  <li class="fullscreen">
+    <a class="navigation_bullet navigation_fullscreen" tabindex="2" title="<%= t('.enter_fullscreen') %>" data-active-title="<%= t('.leave_fullscreen') %>">
+      <span class="button"></span>
+      <span class="navi_hint"><%= t('.fullscreen') %></span>
+    </a>
+  </li>
+  <li class="hide_text">
+    <a class="navigation_bullet navigation_hide_text" tabindex="2" title="<%= t('.hide_text') %>" data-active-title="<%= t('.show_text') %>">
+      <span class="button"></span>
+      <span class="navi_hint"><%= t('.hide_text') %></span>
+    </a>
+  </li>
+  <li class="navigation_menu mute">
+    <div class="navigation_volume_box" title="<%= t('.volume') %>">
+      <div class="volume-control" style="display: block;">
+        <div class="volume-slider">
+          <div class="volume-level" style="width: 100%;"><span class="volume-control-text"></span></div>
+          <div class="volume-handle" style="left: 100%;"></div>
+        </div>
+      </div>
+    </div>
+  </li>
+  <li class="navigation_menu share" tabindex="2">
+    <div class="navigation_menu_box navigation_share_box">
+      <%= link_to "http://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=#{ERB::Util.url_encode(pretty_entry_url(entry))}&p%5Btitle%5D=#{ERB::Util.url_encode(entry.title)}", :target => "_blank", :tabindex => "2", :class => "share facebook", :data => { :"share-page" => "http://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=#{ERB::Util.url_encode(pretty_entry_url(entry))}%3Fpage%3DpermaId" } do %>
+          <span class="hint"><%= t('pageflow.widgets.share_menu.share_with_facebook') %></span>
+          <span class="share_facebook button"></span>
+          <p>facebook</p>
+      <% end %>
+      <%= link_to "http://twitter.com/home?status=#{ERB::Util.url_encode(pretty_entry_url(entry))}", :target => "_blank", :tabindex => "2", :class => "share twitter", :data => { :"share-page" => "http://twitter.com/home?status=#{ERB::Util.url_encode(pretty_entry_url(entry))}%3Fpage%3DpermaId" } do %>
+          <span class="hint"><%= t('pageflow.widgets.share_menu.share_with_twitter') %></span>
+          <span class="share_twitter button"></span>
+          <p>twitter</p>
+      <% end %>
+      <%= link_to "https://plus.google.com/share?url=#{ERB::Util.url_encode(pretty_entry_url(entry))}", :target => "_blank", :tabindex => "2", :class => "share google", :data => { :"share-page" => "https://plus.google.com/share?url=#{ERB::Util.url_encode(pretty_entry_url(entry))}%3Fpage%3DpermaId" } do %>
+          <span class="hint"><%= t('pageflow.widgets.share_menu.share_with_google') %></span>
+          <span class="share_google button"></span>
+          <p>google</p>
+      <% end %>
+      <div class="sub_share">
+        <a tabindex="2" target="_blank"><%= t('pageflow.widgets.share_menu.entry') %></a>
+        <a tabindex="2" target="_blank"><%= t('pageflow.widgets.share_menu.current_page') %></a>
+      </div>
+    </div>
+    <a title="<%= t('.share') %>">
+      <span class="navigation_bg navigation_share button"></span>
+      <span class="navi_hint"><%= t('.share') %></span>
+    </a>
+  </li>
+  <li class="navigation_menu" tabindex="2">
+    <div class="navigation_menu_box navigation_credits_box">
+      <%= render 'pageflow/entries/navigation/credits_box_content', :entry => entry %>
+    </div>
+    <a class="navigation_credits_button" title="<%= t('.imprint') %>">
+      <span class="navigation_bg navigation_credits button"></span>
+      <span class="navi_hint"><%= t('.imprint') %></span>
+    </a>
+  </li>
+</ul>

data/app/views/pageflow/progress_navigation_bar/widget/_credits_box_content.html.erb

@@ -0,0 +1,5 @@
+<% if entry.credits %>
+  <p><%= raw entry.credits %></p>
+<% end -%>
+<%= entry_file_rights(entry) %>
+<%= entry_global_links(entry) %>

data/app/views/pageflow/progress_navigation_bar/widget/_home_button.html.erb

@@ -0,0 +1,8 @@
+<% if home_button.enabled? %>
+  <li>
+    <%= link_to(home_button.url, class: "navigation_bullet navigation_home", tabindex: "2", title: t('.home_title')) do %>
+      <span class="button"></span>
+      <span class="navi_hint"><%= t('.home') %></span>
+    <% end %>
+  </li>
+<% end %>