pageflow-chart 0.1.0

data/app/assets/javascripts/pageflow/chart/page_type.js

@@ -0,0 +1,152 @@
+pageflow.pageType.register('chart', _.extend({
+
+  prepareNextPageTimeout: 0,
+
+  enhance: function(pageElement, configuration) {
+    var scroller = pageElement.find('.scroller');
+
+    pageElement.find('.bigscreen_toggler').on('click', function() {
+      $('body').toggleClass('bigScreen');
+      scroller.scroller('refresh');
+    });
+    $('body').keydown(function(event) {
+      if(event.keyCode == 27) {
+        $(this).removeClass('bigScreen');
+      }
+    });
+  },
+
+  resize: function(pageElement, configuration) {
+    var iframeWrapper = pageElement.find('.iframeWrapper'),
+      pageHeader = pageElement.find('.page_header'),
+      scroller = pageElement.find('.scroller');
+
+    var widescreened = pageElement.width() > 1430;
+
+    iframeWrapper.toggleClass('widescreened', widescreened);
+
+    if (widescreened) {
+      iframeWrapper.insertAfter(scroller);
+    }
+    else {
+      iframeWrapper.insertAfter(pageHeader);
+    }
+  },
+
+  customizeLayout: function(pageElement, configuration) {
+    if(!this.layoutCustomized) {
+      var iframe = pageElement.find('iframe'),
+       scroller = pageElement.find('.scroller'),
+       iframeOverlay = pageElement.find('.iframe_overlay');
+
+      iframe.load(function() {
+        $(this).contents().find('.fs-btn').css('display','none');
+        $(this).contents().find('head').append('<link rel="stylesheet" type="text/css" href="' + pageflow.chart.assetUrls.customStylesheet + '">');
+        $(this).contents().find('body').addClass($("[data-theme]").attr('data-theme'));
+
+        if(pageflow.features.has('mobile platform')) {
+          setTimeout(function() {
+            if(iframe) {
+              iframe.attr("height", iframe.contents().height() + "px");
+              pageElement.find('.iframeWrapper').height(iframe.contents().height());
+              scroller.scroller('refresh');
+            }
+          }, 1000);
+        }
+        scroller.scroller('refresh');
+        pageElement.find('.iframeWrapper').addClass('active');
+      });
+      this.layoutCustomized = true;
+    }
+  },
+
+  _initEventSimulation: function(element, iframe, wrapper) {
+    var propagatedEvents = 'click mousemove mouseup mouseover mousedown';
+    var lastElement;
+    element.on(propagatedEvents, function(event) {
+      var contentElement = iframe.contents()[0];
+      element.css('display','none');
+      if (contentElement && event) {
+        lastElement = $(contentElement.elementFromPoint(event.pageX-iframe.offset().left, event.pageY-iframe.offset().top));
+        lastElement.simulate("mousedown", event);
+        lastElement.simulate("mousemove", event);
+        lastElement.simulate("click", event);
+
+        element.css('cursor', lastElement.css('cursor'));
+      }
+      element.css('display','block');
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    iframe.load(function() {
+      iframe.contents().find('*').on('mousemove', function() {
+        wrapper.addClass('hovering');
+      });
+
+      iframe.contents().on('mouseout', function() {
+        wrapper.removeClass('hovering');
+      });
+    });
+  },
+
+  prepare: function(pageElement, configuration) {
+    this._loadIframe(pageElement);
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  activating: function(pageElement, configuration) {
+    this._loadIframe(pageElement);
+    this.resize(pageElement, configuration);
+    this.customizeLayout(pageElement, configuration);
+    this._initEventSimulation(pageElement.find('.iframe_overlay'), pageElement.find('iframe'), pageElement.find('.iframeWrapper'));
+  },
+
+  activated: function(pageElement, configuration) {},
+
+  deactivating: function(pageElement, configuration) {
+    $('body').removeClass('bigScreen');
+  },
+
+  deactivated: function(pageElement, configuration) {},
+
+  update: function(pageElement, configuration) {
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+    pageElement.find('p').html(configuration.get('text') || '');
+
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    pageElement.find('.shadow').css({
+      opacity: configuration.get('gradient_opacity') / 100
+    });
+  },
+
+  embeddedEditorViews: function() {
+    return {
+      '.background_image': {
+        view: pageflow.BackgroundImageEmbeddedView,
+        options: {propertyName: 'background_image_id'}
+      },
+
+      'iframe': {
+        view: pageflow.chart.IframeEmbeddedView,
+        options: {propertyName: 'scraped_site_id'}
+      }
+    };
+  },
+
+  _loadIframe: function(pageElement) {
+    pageElement.find('iframe[data-src]').each(function() {
+      var iframe = $(this);
+
+      if (!iframe.attr('src')) {
+        iframe.attr('src', iframe.data('src'));
+      }
+    });
+  }
+}, pageflow.commonPageCssClasses));

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

@@ -0,0 +1,130 @@
+@include pageflow-page-type(chart);
+
+.chart_page {
+  .iframeWrapper {
+    margin-bottom: 40px;
+    pointer-events: all;
+    height: 400px;
+    position: relative;
+
+    .hidden &, .hideText & {
+      @include transition(0.7s ease);
+    }
+
+    iframe {
+      visibility: hidden;
+      opacity: 0;
+      @include transition(0.7s ease);
+    }
+
+
+    &.widescreened {
+      position: absolute;
+      width: 45%;
+      height: 95%;
+      max-height: 600px;
+      right: 10%;
+      margin-top: 16%;
+      margin-bottom: 0;
+      z-index: 1;
+
+      @media (max-height: 870px) {
+        height: 90%;
+        top: 5%;
+        margin-top: 0;
+      }
+    }
+
+    .hideText & {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    &:before {
+      padding: 15px;
+      background-color: #191919;
+      background-color: rgba(25,25,25, 0.9);
+      box-shadow: rgba(0,0,0,0.5) 0 0 3px 0px;
+      content: "";
+      position: absolute;
+      top: -15px;
+      left: -15px;
+      width: 100%;
+      z-index: -1;
+      height: 100%;
+
+      @include phone {
+        padding: 15px 0;
+        left: 0;
+      }
+    }
+
+    .iframe_overlay {
+      .has_mobile_platform & {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: all;
+        background-color: transparent;
+      }
+    }
+
+    .text_position_right &.widescreened {
+      right: auto;
+      left: 8%;
+      width: 42%;
+    }
+
+    .bigscreen_toggler {
+      width: 24px;
+      height: 24px;
+      background-image: image-url('pageflow/chart/fs_close_sprite.png');
+      background-position: 0 0;
+      background-repeat: no-repeat;
+      position: absolute;
+      top: 3px;
+      right: 18px;
+      color: transparent;
+      text-indent: -4000px;
+      opacity: 0;
+      cursor: pointer;
+      display: none;
+      @include transition(opacity 0.5s ease);
+
+      .has_mobile_platform & {
+        display: none !important;
+      }
+    }
+
+    &:hover .bigscreen_toggler, &.hovering .bigscreen_toggler {
+      opacity: 1;
+    }
+
+    .bigScreen & {
+      position: absolute;
+      width: 86% !important;
+      height: 87%;
+      top: 10%;
+      left: 5% !important;
+      z-index: 201;
+      margin-top: 0 !important;
+      max-height: none !important;
+
+      .bigscreen_toggler {
+        background-position: -25px 0;
+      }
+    }
+
+    &.active {
+      iframe {
+        visibility: visible;
+        opacity: 1;
+      }
+      .bigscreen_toggler {
+        display: block;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/chart/custom.css.scss

@@ -0,0 +1,209 @@
+/*
+ * Noir Theme Customized
+ * ----------
+ *
+ * based on http://bootswatch.com/slate/
+ */
+
+body.chart {
+    font-size: 13px;
+    overflow: visible;
+    overflow-x: hidden;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    line-height: 18px;
+    padding: 0 10px;
+    font-weight: 400;
+    background: #191919;
+    background: rgba(0,0,0,0);
+    color: white;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+div, span {
+    border-bottom-color: gray !important;
+    border-right-color: gray !important;
+    border-left-color: gray !important;
+    border-top-color: gray !important;
+}
+
+a:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+h1 {
+    font-size: 24px;
+    font-weight: 400;
+    margin: 0 0 15px;
+    text-align: left;
+    line-height: initial;
+}
+
+.chart p { margin: 15px 0; line-height: 19px;}
+
+#chart {
+    margin-top: 25px;
+}
+
+.label span {
+    font-size: 12px;
+    color: #fff;
+    text-shadow: 0 0 2px #000;
+}
+
+.line-chart .label span {
+    background: #272B30!important;
+}
+
+html .line-chart .label.tooltip span {
+    background: none!important;
+}
+
+html .line-chart .label.tooltip.inverted span {
+    color: #fff!important;
+}
+
+.label.highlighted, .label.axis {
+    font-size: 12px;
+    z-index: 100;
+}
+
+.label.hover {
+    font-weight: bold;
+}
+
+.pie-chart .label.hover span,
+.donut-chart .label.hover span {
+    color: #fff;
+}
+
+.label.inverted span {
+    color: #000!important;
+}
+
+.label.highlighted {
+    font-weight: bold;
+}
+
+.label.value span {
+    font-size: 12px;
+}
+
+.label.series span {
+    font-size: 12px;
+}
+
+
+.tooltip {
+    z-index: 200;
+    padding-bottom: 0px;
+}
+
+.tooltip .content {
+    background-color: #202328;
+    border: 1px solid #101214;
+    border-radius: 4px 4px 4px 4px;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset;
+    padding: 5px 8px;
+}
+
+.tooltip label {
+    font-weight: 700;
+}
+
+.tooltip label:after {
+    content: ": ";
+}
+
+#footer {
+    margin: 0px 0px 0px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.footer-left {
+    float: left;
+}
+.footer-right {
+    float: right;
+}
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+
+.clearfix {
+    display: inline-block;
+}
+
+html[xmlns] .clearfix {
+    display: block;
+}
+
+* html .clearfix {
+    height: 1%;
+}
+
+svg .axis, svg .tick, svg .grid, svg rect {
+    shape-rendering: crispEdges;
+}
+
+.label.rotate90 {
+    -moz-transform: rotate(-90deg);
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+.label.smaller span {
+    font-size: 80%;
+}
+
+.chart .chartMenu {
+    background: #272B30;
+    box-shadow: 0 0 5px #444;
+}
+
+.chart .chartMenu a {
+    color: #bbb;
+}
+
+.chart .chartMenu a:hover {
+    color: #fff;
+}
+
+
+.chart .icon-fullscreen { background-position: 0 -15px; }
+.chart .icon-share { background-position: -32px -15px; }
+.chart .icon-download { background-position: -17px -15px; }
+
+
+/* New rules */
+
+html {
+  height: 100%;
+}
+
+.filter-select {
+  max-width: 400px;
+  @media screen and (max-width: 400px) {
+    max-width: 220px;
+  }
+}
+
+.filter-ui div span {
+    color: gray;
+}
+.label.outline span {
+    text-shadow: 0 0 2px #000;
+}