Merge 34ffcff into 1fc8493

CHANGES.rst

@@ -4,6 +4,9 @@ Changelog
 2.0b4 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
+- Adiciona funcionalidade de preview de imagens em links.
+  [rodfersou]
+
 - Adiciona suporte para processamento de recursos estáticos usando o `webpack`_.
   [rodfersou]
 

webpack/app/brasilgovportal.js

@@ -1,5 +1,6 @@
 import BugFix from './js/bugfix.js';
 import SearchSuggestions from './js/search_suggestions.js';
+import TipPreview from './js/tippreview.js';
 
 
 // https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/
@@ -9,10 +10,14 @@ jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
 $(() => {
   new BugFix();
   new SearchSuggestions();
+  if ($('[data-tippreview-enabled="true"]').length > 0) {
+    new TipPreview();
+  }
 });
 
 
 export default {
   BugFix,
   SearchSuggestions,
+  TipPreview,
 }

webpack/app/brasilgovportal.scss

@@ -1 +1,2 @@
 @import 'scss/sprite';
+@import 'scss/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/scss/_tippreview.scss

@@ -0,0 +1,39 @@
+@import '~tippy.js/dist/themes/light';
+
+
+/* tip preview */
+.tippreview {
+  position: relative;
+
+  display: flex;
+
+  .tippreview-image {
+    width: 6rem;
+    height: 6rem;
+  }
+  .tippreview-image > img {
+    width: 6rem;
+    height: 6rem;
+    object-fit: cover;
+  }
+  .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

@@ -25,6 +25,7 @@
   "repository": {},
   "license": "GPL-2.0",
   "dependencies": {
-    "sc.recipe.staticresources": "simplesconsultoria/sc.recipe.staticresources"
+    "sc.recipe.staticresources": "simplesconsultoria/sc.recipe.staticresources#1.0b1",
+    "tippy.js": "^2.5.0"
   }
 }

webpack/webpack.config.js

@@ -14,6 +14,7 @@ childProcess.execSync(`rm -f ${path}/brasilgovportal-*`);
 
 module.exports = {
   entry: [
+    `./app/img/preview.png`,
     './app/brasilgovportal.scss',
     './app/brasilgovportal.js',
   ],