pageflow 0.10.0 → 0.11.0

data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/info_box.scss

@@ -0,0 +1,112 @@
+////
+/// @group slim-player-controls
+////
+
+/// Background color of info box.
+$slim-player-controls-info-box-background-color: rgba(17, 17, 17, 0.9) !default;
+
+/// Color of text in info box.
+$slim-player-controls-info-box-text-color: #fff !default;
+
+/// Color of separator line between info box header and info box text.
+$slim-player-controls-info-box-separator-line-color: #888 !default;
+
+/// Typography settings for the info box.
+$slim-player-controls-info-box-typography: () !default;
+
+/// Typography settings for the info box header.
+$slim-player-controls-info-box-header-typography: () !default;
+
+%player_controls {
+  &-info_box {
+    width: 87%;
+    box-sizing: border-box;
+    padding: 0 1%;
+    position: relative;
+    z-index: 2;
+    border-radius: 3px;
+    color: $slim-player-controls-info-box-text-color;
+    background-color: $slim-player-controls-info-box-background-color;
+
+    @include phone {
+      font-size: 0.84em;
+      padding: 0 3%;
+    }
+
+    h3,
+    p {
+      @include typography(
+        $slim-player-controls-info-box-typography, (
+          font-size: 1.1em,
+          margin: 15px 0,
+          width: 100%,
+          max-width: none
+        )
+      );
+    }
+
+    h3 {
+      border-bottom: solid 1px $slim-player-controls-info-box-separator-line-color;
+      padding-bottom: 5px;
+
+      @include typography(
+        $slim-player-controls-info-box-header-typography
+      );
+    }
+
+    &.title_empty h3,
+    &.description_empty h3 {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+
+    a {
+      color: $slim-player-controls-info-box-text-color;
+    }
+
+    &.empty {
+      display: none;
+    }
+  }
+
+  .js &-info_box {
+    @include transition(opacity 0.2s linear, visibility 0.2s linear, transform 0.2s ease);
+    @include transition-delay(0.2s);
+    pointer-events: none;
+
+    position: absolute;
+    left: 50%;
+    @include transform(translate3d(-50%, 0, 0));
+    z-index: 2;
+
+    @include desktop {
+      width: 100%;
+      max-width: 700px;
+      bottom: 80px;
+    }
+
+    @include phone {
+      width: 100%;
+      bottom: 50px;
+      border-radius: 0;
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .js &-container-has_been_faded %player_controls-info_box {
+    opacity: 0;
+    visibility: hidden;
+    @include transform(translate3d(-50%, 10px, 0));
+  }
+
+  .js &-container:hover %player_controls-info_box,
+  .js &-container-paused %player_controls-info_box {
+    @include transition-delay(0);
+    opacity: 1;
+    visibility: visible;
+    @include transform(translate3d(-50%, 0, 0));
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/scroller.scss

@@ -0,0 +1,21 @@
+// scss-lint:disable VendorPrefix
+
+%player_controls {
+  &-scroller-playing {
+    @include desktop {
+      bottom: 80px;
+      overflow: hidden;
+      -webkit-mask-image: image-url("pageflow/themes/default/player_controls/slim/scroller_mask.png");
+      -webkit-mask-position: bottom left;
+      -webkit-mask-repeat: repeat-x;
+    }
+  }
+
+  // Do not display mask if content fades anyway.
+  &-scroller-fading {
+    @include desktop {
+      bottom: 0;
+      -webkit-mask-image: none;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/player_controls/vjs_mapping.scss

@@ -0,0 +1,86 @@
+// Map placeholder names to concrete vjs css class names.
+
+$vjs-selector-mapping: (
+  page_with_progress_bar: ".audioPage, .videoPage",
+
+  background: ".videoWrapper, .audioPage .backgroundArea",
+
+  background-idle: ".is_idle .videoWrapper, .audioPage.is_idle .backgroundArea",
+
+  background-hover: ".is_control_bar_hovered .videoWrapper, .audioPage.is_control_bar_hovered .backgroundArea",
+
+  // Use playing class that is removed with delay to prevent
+  // mask image on scroller from being removed too early in slim
+  // player controls.
+  scroller-playing: ".videoPage .scroller.is_playing_delayed, .audioPage .scroller.is_playing_delayed",
+
+  // If video has played, content is faded immediately. This can be
+  // used by the slim player controls to not display the scroller mask
+  // if the content fades anyway.
+  scroller-fading: ".videoPage.has_played .scroller",
+
+  container: ".controls",
+
+  container-playing: ".controls.is_playing",
+  container-paused: ".controls.is_paused",
+
+  container-idle: ".is_idle .controls",
+
+  container-hover: ".is_control_bar_hovered .controls",
+
+  // `has_been_faded` is set by the video page type after the user has
+  // become inactive for the first time during video playback.
+  //
+  // This is used in the slim player controls to keep displaying the
+  // info box a little longer on initial playback. Especially on auto
+  // play pages this lets the user finish reading the info box
+  // text. When the user re-displays the info box though by moving the
+  // cursor above the control bar, it fades immediately once the
+  // cursor leaves the control bar again.
+  container-has_been_faded: ".controls.has_been_faded",
+
+  container-unplayed: ".unplayed .controls",
+
+  info_box: ".add_info_box",
+  control_bar: ".vjs-control-bar",
+  control_bar_text: ".control_bar_text",
+
+  play_button: ".vjs-play-control",
+  play_button-playing: ".vjs-play-control.vjs-playing",
+  skip_button: ".player_skip",
+  loading_spinner: ".vjs-loading-spinner",
+  loading_spinner-on_underrun: ".vjs-loading-spinner.showing-for-underrun",
+
+  current_time: ".vjs-current-time",
+  time_separator: ".vjs-time-divider",
+  duration: ".vjs-duration",
+
+  progress_bar: ".vjs-progress-control",
+  progress_bar_inner: ".vjs-progress-holder",
+  progress_bar_handle: ".vjs-seek-handle",
+  load_progress: ".vjs-load-progress",
+  play_progress: ".vjs-play-progress",
+
+  close_button: ".page .close_button",
+  close_button_label: ".page .close_button .label",
+);
+
+@each $suffix, $selector in $vjs-selector-mapping {
+  #{$selector} {
+    @extend %player_controls-#{$suffix};
+  }
+}
+
+.vjs-control-text {
+  @include hide_text;
+}
+
+.vjs-remaining-time,
+.vjs-fullscreen-control,
+.vjs-volume-control,
+.vjs-mute-control,
+.vjs-menu-button,
+.player_fullscreen,
+.player_volume {
+  display: none;
+}

data/app/assets/stylesheets/pageflow/themes/default/player_controls/widget_margins.scss

@@ -0,0 +1,10 @@
+// These have to be defined outside the widget presence scopes
+// (i.e. widget_slim_player_controls_present) since widget margins
+// also work via widget presence css classes. Technically the margins
+// are only needed for the classic variant. They turn out to have no
+// effect on the slim variant though.
+
+%player_controls-close_button,
+%player_controls-container {
+  @extend %pageflow_widget_margin_right_max !optional;
+}

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

@@ -0,0 +1,3 @@
+.slideshow {
+  @extend %pageflow_widget_margin_top !optional;
+}

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

@@ -0,0 +1,4 @@
+$theme-name: "default" !default;
+
+@import "./variables/standard";
+@import "./variables/widgets";

data/app/assets/stylesheets/pageflow/themes/default/variables/standard.scss

@@ -0,0 +1,33 @@
+////
+/// @group standard
+////
+
+/// Color to use for highlighted elements.
+$main-color: #53adb8 !default;
+
+/// Background color to use for highlighted elements.
+$main-color-dark: #3b5159 !default;
+
+$standard-font: SourceSansPro !default;
+$standard-font-size: 16px !default;
+
+/// Default typography settings.
+$standard-typography: (
+  font-family: $standard-font,
+  font-size: $standard-font-size
+);
+
+/// Default type of icons to use.
+///
+/// - `"icon-font"`: Circular buttons with font awesome icons.
+///
+/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
+///   directory.
+$standard-icons: "icon-font" !default;
+
+/// Pictograms visibility values to use.
+///
+/// - `"visible"`: All pictograms should be visible.
+///
+/// - `"hidden"`: All pictograms should be hidden.
+$standard-page-pictogram-visibility: visible !default;

data/app/assets/stylesheets/pageflow/themes/default/variables/widgets.scss

@@ -0,0 +1,28 @@
+////
+/// @group widgets
+////
+
+$basic-background-color: #353535 !default;
+$basic-background-color-transparent: rgba(53, 53, 53, 0.9) !default;
+
+/// Default background color of widgets.
+$widget-background-color: $basic-background-color-transparent;
+
+/// Default text color in widgets.
+$widget-text-color: #fff;
+
+/// Default type of icons to use in widgets.
+$widget-icons: $standard-icons !default;
+
+/// Default options used for icon font based icons in widgets.
+$default-widget-icon-font-options:  (
+  button-background-color: #dbdbdb,
+  active-button-background-color: $main-color,
+
+  button-icon-color: rgba(0, 0, 0, 0.75),
+  active-button-icon-color: rgba(255, 255, 255, 0.9),
+  deactivated-button-icon-color: rgba(120, 120, 120, 0.8)
+);
+
+/// @see $default-widget-icon-font-options
+$widget-icon-font-options: () !default;

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

@@ -0,0 +1 @@
+@import "./video_player/vjs_base";

data/app/assets/stylesheets/pageflow/themes/default/video_player/vjs_base.scss

@@ -0,0 +1,121 @@
+// This file is a copy of src/css/video-js.css with the following things removed:
+//
+// - Styles for hiding/showing/fading controls
+// - Default theme
+//
+// This theme defines its own rules for fading the controls. The
+// Video.js styles for fading are hard to override since they are
+// quite specific and include `!important` declarations,
+//
+// We need the other base styles though to position the video and for
+// fullscreen display.
+
+// scss-lint:disable all
+
+/*
+REQUIRED STYLES (be careful overriding)
+================================================================================ */
+/* When loading the player, the video tag is replaced with a DIV,
+   that will hold the video tag or object tag for other playback methods.
+   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
+   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
+   Otherwise you risk messing up control positioning and full window mode. **
+*/
+.video-js {
+  background-color: #000;
+  position: relative;
+  padding: 0;
+  /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
+  font-size: 10px;
+  /* Allow poster to be vertially aligned. */
+  vertical-align: middle;
+  /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
+
+  /* Turn off user selection (text highlighting) by default.
+     The majority of player components will not be text blocks.
+     Text areas will need to turn user selection back on. */
+  -webkit-user-select: none;  /* Chrome all / Safari all */
+  -moz-user-select: none;     /* Firefox all */
+  -ms-user-select: none;      /* IE 10+ */
+  -o-user-select: none;
+  user-select: none;
+}
+
+/* Playback technology elements expand to the width/height of the containing div.
+    <video> or <object> */
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
+.video-js:-moz-full-screen { position: absolute; }
+
+/* Fullscreen Styles */
+body.vjs-full-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+}
+.video-js.vjs-fullscreen {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100% !important;
+  height: 100% !important;
+  _position: absolute; /* IE6 Full-window (underscore hack) */
+}
+.video-js:-webkit-full-screen {
+  width: 100% !important; height: 100% !important;
+}
+
+/* Poster Styles */
+.vjs-poster {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  cursor: pointer;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.vjs-poster img {
+  display: block;
+  margin: 0 auto;
+  max-height: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+/* Text Track Styles */
+/* Overall track holder for both captions and subtitles */
+.video-js .vjs-text-track-display {
+  text-align: center;
+  position: absolute;
+  bottom: 4em;
+  left: 1em; /* Leave padding on left and right */
+  right: 1em;
+  font-family: Arial, sans-serif;
+}
+/* Individual tracks */
+.video-js .vjs-text-track {
+  display: none;
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+  /* Transparent black background, or fallback to all black (oldIE) */
+  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
+}
+.video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
+.video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
+.vjs-tt-cue { display: block; }

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

@@ -0,0 +1,14 @@
+.videoWrapper {
+  @extend %pageflow_widget_margin_right !optional;
+
+  @include desktop {
+    position: relative;
+    height: 100%;
+    width: auto;
+  }
+
+  @include pad_portrait {
+    position: initial;
+    height: initial;
+  }
+}