Merge c193368 into d877a82

CHANGES.rst

@@ -4,6 +4,9 @@ Changelog
 2.0b3 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
+- Adiciona funcionalidade de preview de imagens em links.
+  [rodfersou]
+
 - Adiciona estilo para controlar degrade do destaque topo
   [agnogueira]
 

webpack/app/branco/brasilgovtemas.scss

@@ -76,6 +76,7 @@ $central-conteudo-border-color: rgba(256, 256, 256, 0.2);
 @import '../scss/grid';
 @import '../scss/basic';
 @import '../scss/content';
+@import '../scss/tippreview';
 @import '../scss/contentcentral';
 @import '../scss/resultsfilter';
 @import '../scss/header';

webpack/app/brasilgovtemas.js

@@ -1,10 +1,11 @@
 import ContentCentral from './js/contentcentral.js';
 import Contraste from './js/contrast.js';
-import ResultsFilter from './js/resultsfilter.js';
 import GaleriaDeFotos from './js/albuns.js';
+import ResultsFilter from './js/resultsfilter.js';
+import TipPreview from './js/tippreview.js';
 
 
-$(document).ready(function(){
+$(() => {
   $(".ico-navegacao").click(function(){
     $(".navigation-wrapper").toggleClass("ativo");
   });
@@ -29,5 +30,16 @@ $(document).ready(function(){
   if ($('.template-filtro-de-resultados').length > 0) {
     new ResultsFilter();
   }
+  if ($('[data-tippreview-enabled="true"]').length > 0) {
+    new TipPreview();
+  }
 });
 
+
+export default {
+  ContentCentral,
+  Contraste,
+  GaleriaDeFotos,
+  ResultsFilter,
+  TipPreview,
+};

webpack/app/js/tippreview.js

@@ -0,0 +1,61 @@
+import tippy from 'tippy.js';
+
+
+export default class TipPreview {
+  constructor() {
+    this.$template = $('<div>');
+    this.$template.html(
+      `<div class="tippreview">
+        <div class="tippreview-image">
+          <img src="" alt="" />
+        </div>
+        <div class="tippreview-title">
+          Page title
+        </div>
+      </div>`
+    );
+
+    // don't show preview on edit tab
+    if ($('#contentview-edit.selected').length > 0) {
+      return;
+    }
+
+    // Change this option when style the tooltip
+    this.dontHide = false;
+
+    this.createTooltip();
+  }
+  createTooltip() {
+    tippy('[data-tippreview-enabled="true"]', {
+      animation: 'shift-toward',
+      arrow: true,
+      theme: 'light',
+      html: this.$template[0],
+      onShow: this.onShow.bind(this),
+      // prevent tooltip from displaying over button
+      popperOptions: {
+        modifiers: {
+          preventOverflow: {
+            enabled: false
+          },
+          hide: {
+            enabled: false
+          }
+        }
+      }
+    });
+  }
+  onShow(tip) {
+    if (this.dontHide) {
+      tip.hide = function() {};
+    }
+
+    let $a = $(tip.reference);
+
+    let $image = $('.tippreview-image > img', this.$template);
+    $image.attr('src', $a.attr('data-tippreview-image'));
+
+    let $title = $('.tippreview-title', this.$template);
+    $title.html($a.attr('data-tippreview-title'));
+  }
+}

webpack/app/padrao/brasilgovtemas.scss

@@ -76,6 +76,7 @@ $central-conteudo-border-color: rgba(256, 256, 256, 0.2);
 @import '../scss/grid';
 @import '../scss/basic';
 @import '../scss/content';
+@import '../scss/tippreview';
 @import '../scss/contentcentral';
 @import '../scss/resultsfilter';
 @import '../scss/header';

webpack/app/scss/_tippreview.scss

@@ -0,0 +1,43 @@
+@import '~tippy.js/dist/themes/light';
+
+
+/* tip preview */
+.tippreview {
+  position: relative;
+
+  display: flex;
+
+  .tippreview-image {
+    display: flex;
+
+    min-width: 6rem;
+    min-height: 6rem;
+
+    align-items: center;
+    justify-content: center;
+  }
+  .tippreview-image > img {
+    max-width: 6rem;
+    max-height: 6rem;
+  }
+  .tippreview-title {
+    font-weight: bold;
+
+    width: 12rem;
+    margin: 1rem;
+
+    text-align: left;
+  }
+  &::after {
+    font-size: 1.2rem;
+    font-weight: bold;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    display: block;
+
+    content: '🡵';
+  }
+}

webpack/package.json

@@ -26,8 +26,9 @@
   "license": "GPL-2.0",
   "dependencies": {
     "copy-webpack-plugin": "^4.5.1",
-    "sc.recipe.staticresources": "simplesconsultoria/sc.recipe.staticresources#1.0b1",
     "jquery.cookie": "^1.4.1",
+    "sc.recipe.staticresources": "simplesconsultoria/sc.recipe.staticresources#1.0b1",
+    "tippy.js": "^2.5.0",
     "webpack-clean-obsolete-chunks": "^0.3.0"
   }
 }