pageflow-linkmap-page 0.1.0

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_scroll_indicators.js

@@ -0,0 +1,17 @@
+(function($) {
+  $.widget('pageflow.linkmapScrollIndicators', {
+    _create: function() {
+      var element = this.element;
+      var scroller = this.options.scroller;
+
+      scroller.onScroll(toggle);
+      scroller.onScrollEnd(toggle);
+      toggle();
+
+      function toggle() {
+        element.toggleClass('can_scroll_left', Math.ceil(scroller.positionX()) < 0);
+        element.toggleClass('can_scroll_right', Math.floor(scroller.positionX()) > scroller.maxX());
+      }
+    }
+  });
+}(jQuery))

data/app/assets/stylesheets/pageflow/linkmap_page.css.scss

@@ -0,0 +1,266 @@
+@include pageflow-page-type(linkmap_page);
+
+@import "./linkmap_page/animations/rotate";
+
+@mixin inline-loading-spinner {
+  left: 50%;
+  @include transform-origin(center left);
+  @include animation(linkmap_page_rotate 0.5s linear infinite);
+  display: none;
+
+  .circle_inner {
+    left: auto;
+    right: 100%;
+    @include transform-origin(center right);
+    @include transform(rotate(-120deg));
+  }
+}
+
+.js .page .scroller > div.linkmap {
+  padding: 0 !important;
+  width: auto;
+  height: auto;
+
+}
+.linkmap_page {
+  @import "./linkmap_page/audio_player_controls";
+
+  @include user-select(none);
+
+  .content {
+/*    pointer-events: none; */
+  }
+
+  .scroller {
+    overflow: hidden;
+
+    > div {
+      min-height: 0;
+    }
+  }
+
+  .linkmap {
+    pointer-events: none;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left:0;
+
+    &.moving_background {
+      @include transition(none);
+    }
+
+    &.measuring {
+      @include transition(none);
+    }
+  }
+
+  .panorama_wrapper {
+    position: absolute;
+  }
+
+  .linkmap_areas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .panorama {
+    height: 120%;
+    width: auto;
+    vertical-align: middle;
+    position: relative;
+    display: none;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  .hover_video {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    overflow: hidden;
+    @include transition(opacity 0.2s, visibility 0.2s);
+
+    .panorama_video {
+      display: block;
+    }
+
+    &.playing {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  .vjs-loading-spinner,
+  .vjs-control-bar {
+    display: none !important;
+  }
+
+  .arrow_left,
+  .arrow_right {
+    display: none;
+  }
+
+  .hover_area {
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    height: 30%;
+    width: 20%;
+    overflow: hidden;
+    cursor: pointer;
+    display: block;
+    pointer-events: all;
+
+    .background_image {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      @include transition(opacity 0.5s ease, visibility 0.5s ease);
+    }
+
+    &:hover,
+    &.hover,
+    &.playing, &:focus, &:active {
+      .hover_image {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    &.visited {
+      .visited_image {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    .panorama_video {
+      position: absolute;
+      display: block;
+      z-index: 1;
+    }
+
+    &.dynamic_marker {
+      .linkmap_marker {
+        background-color: transparent;
+        position: absolute;
+        top: 5%;
+        left: 5%;
+        width: 90%;
+        height: 90%;
+        border: 3px solid rgba(255,255,255, 1);
+        box-sizing: border-box;
+        border-radius: 50%;
+        @include transition(0.15s);
+        opacity: 0.1;
+        box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
+        z-index: 2;
+      }
+
+      &:hover,
+      &.hover,
+      &.playing,
+      &:focus,
+      &:active {
+        .linkmap_marker {
+          border: 6px solid rgba(255,255,255, 1);
+          opacity: 1 !important;
+          box-shadow: 1px 2px 3px rgba(0,0,0,0.9);
+        }
+      }
+    }
+    &:focus, &:active {
+      outline: none;
+      border: none;
+    }
+  }
+  .description_overlay {
+    position: absolute;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: block;
+    pointer-events: none;
+    opacity: 0;
+    max-width: 510px;
+    max-height: 400px;
+
+    .description_overlay_wrapper {
+      overflow: hidden;
+      position: relative;
+    }
+
+    @include transition(opacity 0.15s);
+
+    &.active {
+      display: block;
+      opacity: 1;
+    }
+
+    .link_title {
+      font-size: 28px;
+      color: #55AEBC;
+      letter-spacing: 0.31px;
+      line-height: 46px;
+    }
+
+    .link_description {
+      font-size: 20px;
+      color: #999999;
+      letter-spacing: 0.22px;
+      line-height: 30px;
+    }
+  }
+
+  .external_site_area {
+
+    .inline_loading_spinner {
+      position: absolute;
+      height: 100%;
+      width: 50%;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+
+      .circle_inner {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        @include transform(rotate(0));
+
+        .circle_innerst {
+          position: absolute;
+          height: 100%;
+          width: 200%;
+          top: 0;
+          left: 0;
+          border: 3px solid green;
+          box-sizing: border-box;
+          border-radius: 50%;
+        }
+      }
+
+      @include inline-loading-spinner;
+    }
+
+    &.active.target_self {
+      .inline_loading_spinner {
+        display: block;
+      }
+    }
+  }
+
+  .text_only_area {
+    cursor: default;
+  }
+}

data/app/assets/stylesheets/pageflow/linkmap_page/animations/rotate.css.scss

@@ -0,0 +1,8 @@
+@include keyframes(linkmap_page_rotate) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+  100% {
+    @include transform(rotate(360deg));
+  }
+}

data/app/assets/stylesheets/pageflow/linkmap_page/audio_player_controls.scss

@@ -0,0 +1,134 @@
+.linkmap_audio_player_controls {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+
+  .pause {
+    display: none;
+  }
+
+  .play, .pause {
+    position: absolute;
+    z-index: 1;
+  }
+
+  .progress {
+    display: none;
+  }
+
+  .progress, .audio_inline_progress {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .current_time {
+    display: none;
+  }
+
+  .progress_inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 95%;
+    height: 95%;
+    @include transform(translate(-50%,-50%));
+  }
+
+  .left_circle, .right_circle, .audio_inline_loading_spinner {
+    position: absolute;
+    height: 100%;
+    width: 50%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+
+
+    .circle_inner {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+      @include transform(rotate(0));
+
+      .circle_innerst {
+        position: absolute;
+        height: 100%;
+        width: 200%;
+        top: 0;
+        left: 0;
+        border: 3px solid green;
+        box-sizing: border-box;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .left_circle {
+    .circle_inner {
+      left: 100%;
+      @include transform-origin(center left);
+
+      .circle_innerst {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+
+  .right_circle {
+    left: 50%;
+
+    .circle_inner {
+      left: auto;
+      right: 100%;
+      @include transform-origin(center right);
+    }
+  }
+
+  .audio_inline_loading_spinner {
+    @include inline-loading-spinner;
+  }
+}
+
+.hover_area.loading {
+  .progress,
+  .audio_inline_loading_spinner {
+    display: block;
+  }
+
+  .left_circle,
+  .right_circle {
+    display: none;
+  }
+}
+
+.hover_area.playing {
+  .linkmap_audio_player_controls {
+    .play {
+      display: none;
+    }
+
+    .pause {
+      display: block;
+    }
+
+    .progress, .current_time {
+      display: block;
+    }
+  }
+}
+
+.hover_area.small {
+  .linkmap_audio_player_controls {
+    .current_time {
+      display: none;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/linkmap_page/editor.css.scss

@@ -0,0 +1,122 @@
+.editor {
+  @import "./editor/areas_list";
+}
+
+.linkmap_areas {
+  @import "./editor/resizable";
+
+  .edit {
+    @include icon-only-button(white);
+    @include pencil-icon;
+    position: absolute;
+    display: none;
+    z-index: 2;
+    top: 5px;
+    right: 5px;
+    background-color: #fff;
+    border: solid 1px #888;
+  }
+
+  .toggle_marker {
+    @include icon-only-button(white);
+    @include eye-icon;
+    position: absolute;
+    display: none;
+    z-index: 2;
+    top: 5px;
+    right: 40px;
+    background-color: #fff;
+    border: solid 1px #888;
+  }
+
+  .area_type_pictogram {
+    @include background-icon-center($color: #fff);
+    @include link-icon;
+    display: none;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 25px;
+    height: 25px;
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 2;
+  }
+
+  .page_area,
+  .external_site_area,
+  .text_only_area {
+    .linkmap_audio_player_controls {
+      display: none !important;
+    }
+  }
+
+  &.editable {
+    .hover_area {
+      cursor: move;
+
+      &:hover .edit,
+      &:hover .toggle_marker,
+      &:hover .area_type_pictogram {
+        display: block;
+      }
+
+      &.editing .edit,
+      &.editing .toggle_marker,
+      &.editing .area_type_pictogram {
+        display: none;
+      }
+
+      &.editing {
+        z-index: 2;
+      }
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        @include box-sizing(border-box);
+      }
+
+      &.highlighted:before,
+      &.editing:before,
+      &:hover:before {
+        background-color: rgba(255, 255, 255, 0.3);
+      }
+
+      &:before {
+        border: solid 2px #000;
+      }
+
+      &:after {
+        border: solid 2px #fff;
+        @include animation(blink 3s linear infinite);
+      }
+    }
+
+    .audio_file_area {
+      &:before {
+        border-color: #006add;
+      }
+
+      .area_type_pictogram {
+        @include note-icon;
+      }
+    }
+
+    .text_only_area {
+      &:before {
+        border-color: pink;
+      }
+
+      .area_type_pictogram {
+        @include feather-icon;
+      }
+    }
+  }
+}