plonegovbr · almeidajeff · Oct 24, 2018 · Oct 24, 2018 · Oct 25, 2018 · Oct 25, 2018
diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,7 @@ src/plone.*
 src/Products.*
 src/sc.*
 var/
+src/brasil/gov/timeline/browser/static/
+webpack/node_modules*
+webpack/yarn.lock
+webpack/package-lock.json
diff --git a/src/brasil/gov/timeline/browser/__init__.py b/src/brasil/gov/timeline/browser/__init__.py
@@ -1 +1,6 @@
 # -*- coding: utf-8 -*-
+from plone.app.layout.viewlets import ViewletBase
+
+
+class ResourcesViewlet(ViewletBase):
+    """This viewlet inserts static resources on page header."""
diff --git a/src/brasil/gov/timeline/browser/configure.zcml b/src/brasil/gov/timeline/browser/configure.zcml
@@ -15,4 +15,14 @@
       template="timeline.pt"
       />
 
+  <browser:viewlet
+      name="brasil.gov.timeline.resources"
+      for="collective.cover.interfaces.ICover"
+      manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
+      class=".ResourcesViewlet"
+      template="static/resources.pt"
+      permission="zope2.Public"
+      layer="brasil.gov.timeline.interfaces.IBrowserLayer"
+      />
+
 </configure>
diff --git a/src/brasil/gov/timeline/browser/static/swiper.min.css b/src/brasil/gov/timeline/browser/static/swiper.min.css
diff --git a/src/brasil/gov/timeline/browser/static/swiper.min.js b/src/brasil/gov/timeline/browser/static/swiper.min.js
diff --git a/src/brasil/gov/timeline/profiles.zcml b/src/brasil/gov/timeline/profiles.zcml
@@ -6,7 +6,7 @@
 
   <genericsetup:registerProfile
       name="default"
-      title="Timeline"
+      title=".gov.br: Módulo de Timeline 1.0a1.dev"
       directory="profiles/default"
       provides="Products.GenericSetup.interfaces.EXTENSION"
       i18n:attributes="title; description"

diff --git a/src/brasil/gov/timeline/profiles/default/registry.xml b/src/brasil/gov/timeline/profiles/default/registry.xml
@@ -1,14 +1,14 @@
 <?xml version="1.0"?>
 <registry xmlns:i18n="http://xml.zope.org/namespaces/i18n">
-  <!--record name="plone.app.tiles">
+  <record name="plone.app.tiles">
     <value purge="false">
       <element>brasil.gov.timeline</element>
     </value>
-  </record-->
+  </record>
 
-  <!-- record name="collective.cover.controlpanel.ICoverSettings.available_tiles">
+  <record name="collective.cover.controlpanel.ICoverSettings.available_tiles">
     <value purge="false">
       <element>brasil.gov.timeline</element>
     </value>
-  </record-->
+  </record>
 </registry>
diff --git a/src/brasil/gov/timeline/tiles/timeline.pt b/src/brasil/gov/timeline/tiles/timeline.pt
@@ -4,11 +4,11 @@
       xmlns:i18n="http://xml.zope.org/namespaces/i18n"
       i18n:domain="brasil.gov.timeline">
   <body tal:define="is_empty view/is_empty">
-    <p tal:condition="python: is_empty and view.is_compose_mode()" i18n:translate="">
+    <p tal:condition="python: view.is_compose_mode() and is_empty" i18n:translate="">
       Please add up to timeline objects to the tile.
     </p>
 
-    <div class="brasil-timeline-tile tile-content"
+    <div class="brasil-gov-timeline-tile tile-content"
          tal:condition="not:is_empty"
          tal:attributes="id string:timeline-${view/id}">
       <div class="tile-header" tal:condition="view/tile_title">

diff --git a/src/brasil/gov/timeline/tiles/timeline.py b/src/brasil/gov/timeline/tiles/timeline.py
@@ -150,13 +150,18 @@ def get_image(self, item):
     def get_between_years(self, itens):
         if itens:
             years = [year[0].year for year in itens]
-            year_left = years[0]
-            year_right = years[-1]
-            D = {}
-            D['year_left'] = year_left
-            D['year_right'] = year_right
-        else:
-            D = {}
-            D['year_left'] = ''
-            D['year_right'] = ''
+            if years:
+                year_left = years[0]
+                year_right = years[-1]
+                D = {}
+                D['year_left'] = year_left
+                D['year_right'] = year_right
+            else:
+                D = {}
+                D['year_left'] = ''
+                D['year_right'] = ''
         return D
+
+    def is_empty(self):
+        """Check if the tile is empty."""
+        return super(TimelineTile, self).results() == []
diff --git a/webpack/app/brasilgovtimeline.js b/webpack/app/brasilgovtimeline.js
@@ -0,0 +1,17 @@
+import TimeLineTile from './js/tiles/timeline.js';
+
+// https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/
+jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
+
+
+$(() => {
+  for (let timeline of $('.brasil-gov-timeline-tile')) {
+    new TimeLineTile(timeline);
+  }
+});
+
+
+
+export default {
+  TimeLineTile,
+}
diff --git a/webpack/app/brasilgovtimeline.scss b/webpack/app/brasilgovtimeline.scss
@@ -0,0 +1,8 @@
+@import 'scss/tiles/tiletimeline';
+/* Scss for timeline */
+
+.template-view.portaltype-timeline {
+  #content-core h1 {
+    text-align: center;
+  }
+}
diff --git a/webpack/app/js/tiles/timeline.js b/webpack/app/js/tiles/timeline.js
@@ -0,0 +1,68 @@
+export default class TimeLineTile {
+  constructor(tile) {
+    this.tile = tile;
+
+    this.initSwiper();
+    this.initSecondTimeLine();
+  }
+  initSwiper() {
+    var months = [];
+    $('.swiper-container .swiper-slide').each(function(i) {
+      months.push($(this).find('.month').attr('data-swiper-month'))
+    });
+
+    this.swiper = new Swiper(`#${this.tile.id} .timeline-thumbs`, {
+      navigation: {
+        nextEl: `#${this.tile.id} .timeline-thumbs .swiper-button-next`,
+        prevEl: `#${this.tile.id} .timeline-thumbs .swiper-button-prev`,
+      },
+      pagination: {
+        el: `#${this.tile.id} .timeline-thumbs .swiper-pagination`,
+        clickable: true,
+        renderBullet: function (index, className) {
+          return '<div class="swiper-month ' + className + '"><p>' + months[index] + '</p></div>';
+        },
+      },
+    });
+  }
+  initSecondTimeLine() {
+    let $column = $(this.tile).parents('.column');
+    this.$tiles = $('.brasil-gov-timeline-tile', $column);
+    if (this.$tiles.length !== 2) {
+      return;
+    }
+    this.$otherTile = this.$tiles.not(this.tile);
+    this.hideSecondTimeLine();
+    this.initSwitTimeLine();
+  }
+  hideSecondTimeLine() {
+    if ($('body.template-compose').length > 0) {
+      return;
+    }
+    let $lastTile = this.$tiles.last();
+    if (this.tile === $lastTile[0]) {
+      $lastTile.hide();
+    }
+  }
+  initSwitCarousel() {
+    let $ul = $('<ul>');
+    for (let tile of this.$tiles) {
+      let text = $('.switch-timeline', tile).attr('data-text');
+      if (typeof(text) === 'undefined') {
+        return;
+      }
+      let $li = $(`<li>${text}</li>`)
+      if (this.tile === tile) {
+        $li.addClass('active');
+      } else {
+        $li.on('click', function(e) {
+          e.preventDefault();
+          $(this.tile).hide();
+          this.$otherTile.show();
+        }.bind(this));
+      }
+      $ul.append($li);
+    }
+    $('.switch-timeline', this.tile).append($ul);
+  }
+}
diff --git a/webpack/app/resources.pt b/webpack/app/resources.pt
@@ -0,0 +1,6 @@
+<% for (let css in htmlWebpackPlugin.files.css) { %>
+  <link rel="stylesheet" tal:attributes="href <%= 'string:${view/site_url}/' + htmlWebpackPlugin.files.css[css] %>" />
+<% } %>
+<% for (let js in htmlWebpackPlugin.files.js) { %>
+  <script defer tal:attributes="src <%= 'string:${view/site_url}/' + htmlWebpackPlugin.files.js[js] %>"></script>
+<% } %>
diff --git a/webpack/app/scss/_tiletimeline.scss b/webpack/app/scss/_tiletimeline.scss
@@ -0,0 +1,186 @@
+/* tile de timeline */
+.brasil-gov-timeline-tile {
+  display: block;
+  .tile-header {
+    text-align: center;
+    p {
+        color: #333;
+        opacity: .5;
+    }
+  }
+  h2 {
+    font-size: 2.25rem !important;
+  }
+  .timeline-thumbs {
+    width: 100% !important;
+    box-sizing: border-box;
+    padding: 0 0 30px 0;
+  }
+
+  a#timeline-link,a#timeline-link:hover {
+    border-radius: 30px;
+    text-transform: uppercase;
+    font-size: 1rem;
+    padding: 15px 40px;
+    line-height: 1rem;
+    font-weight: 700!important;
+    background: #ff6d26;
+    border: 2px solid #ff6d26!important;
+    color: #fff!important;
+  }
+
+  .swiper-container {
+    height:100%;
+  }
+
+  .swiper-month {
+    margin-top:10px;
+  }
+
+  .swiper-slide {
+    display: flex;
+    justify-content: space-evenly;
+
+  }
+  .timeline-item {
+    display: flex;
+    width: 80%;
+    text-align: left;
+    padding-top: 0px;
+    .image-timeline img{
+      float: none !important;
+      padding: 20px;
+      margin: 0 auto;
+    }
+
+  }
+  .information-timeline {
+    width:50%;
+    h2 {
+        font-size: 1.5rem !important;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 2.4;
+        letter-spacing: normal;
+        text-align: left;
+        opacity: 0.5;
+    }
+    p{
+        font-size: 1.5rem !important;;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 2.4;
+        letter-spacing: normal;
+        text-align: left;
+    }
+
+    a {
+      display: table-cell;
+      vertical-align: middle;
+    }
+    .internal-link{
+            color: #fff!important;
+            background: #ff6d26;
+            border-radius: 30px;
+            display: inline-block;
+            padding: 0 30px;
+            font-size: .875rem;
+            text-transform: uppercase;
+            font-weight: 700;
+            border: 2px solid #fff;
+            border-bottom: 2px solid #fff!important;
+        }
+
+  }
+  .timeline-item:hover {
+    background: none;
+  }
+  .switch-timeline li {
+    cursor: pointer;
+    display: inline-block !important;
+    padding: 10px;
+    margin: 0 25px;
+    text-transform: uppercase;
+  }
+  .switch-timeline li.active {
+    border-bottom: 5px solid #333;
+  }
+  .switch-timeline ul {
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    margin: 0 0 20px 0;
+  }
+  .swiper-button-black {
+    color: #222;
+    opacity: 1;
+  }
+  .swiper-button-next, .swiper-button-prev {
+    background-size: 10px 20px;
+  }
+  .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+    opacity: .35 !important;
+
+  }
+  .swiper-pagination-bullet {
+    width:10px;
+    height:10px;
+    background: #000;
+    opacity: 1;
+  }
+  .swiper-pagination-bullet-active {
+    background: #ff6d26;
+    width:15px;
+    height:15px;
+  }
+  .swiper-pagination {
+    height: auto;
+    .swiper-month p {
+      margin-left: -10px;
+      margin-top:10px;
+      font-size: 18px;
+      font-weight: bold;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 2.67;
+      letter-spacing: normal;
+      text-align: left;
+      color: #FFF;
+    }
+    .swiper-pagination-bullet-active p {
+      color: #000;
+    }
+  }
+  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 30px;
+    }
+
+  .line-timeline {
+    width: 80%;
+    border-top: solid 2px #222222;
+    margin:-43px auto;
+    .info-left {
+          float:left;
+          opacity: 0.5;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 2.4;
+          letter-spacing: normal;
+          text-align: left;
+          color: #222222;
+    }
+    .info-right {
+          float:right;
+          opacity: 0.5;
+          font-weight: bold;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 2.4;
+          letter-spacing: normal;
+          text-align: left;
+          color: #222222;
+    }
+  }
+}