afm-client/app/Frontend/widgets/Notifications/ModalNotification.js

   1 /*
   2  * Copyright (C) 2015 "IoT.bzh"
   3  * Author "Fulup Ar Foll"
   4  *
   5  * This program is free software: you can redistribute it and/or modify
   6  * it under the terms of the GNU General Public License as published by
   7  * the Free Software Foundation, either version 3 of the License, or
   8  * (at your option) any later version.
   9  *
  10  * This program is distributed in the hope that it will be useful,
  11  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  * GNU General Public License for more details.
  14  *
  15  * You should have received a copy of the GNU General Public License
  16  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  17  *
  18  * Bugs: Input with Callback SHOULD BE get 'required' class
  19  *
  20  * ref: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover
  21  *
  22  * usage:
  23  *
  24  * tipModal: listen event from elem.parent() to display tip-modal
  25  *      <div class="xxxx">
  26  *          <tip-modal tip=xxxx></tip-modal>
  27  *          <input-text ....></input-text>
  28  *      </div>
  29  *
  30  * Note: use CSS.visibility to avoid display flickering at initial display.
  31  */
  32
  33 (function () {
  34     'use strict';
  35
  36     var tmpl = '<div class="tip-modal-popup">' +
  37             '<i class="{{icon}}"></i>' +
  38             '<span>{{tip}}</span>' +
  39             '</span></div>' ;
  40
  41     angular.module('ModalNotification', [])
  42             .directive('tipModal', function ($timeout) {
  43
  44                 function mymethods(scope, elem, attrs) {
  45                     scope.parent = elem.parent();
  46                     scope.modal    = elem.find("div");
  47
  48
  49                     // delay tip display to avoid blinking when moving mouse fast
  50                     function display () {
  51                         function action() {
  52                              if (scope.show) scope.modal.css({opacity: 1, visibility:'visible'});
  53                         }
  54                         scope.show = true;
  55                         scope.timeout = $timeout(action, scope.delay);
  56                     }
  57
  58                     function close () {
  59                       scope.show = false;
  60                       scope.modal.css({opacity: 0, visibility:'hidden'});
  61                     }
  62
  63
  64                     // ajust icon or use default
  65                     scope.icon  = attrs.icon || 'fi-lightbulb';
  66
  67                     // Update Parent element to get mouse event
  68                     scope.parent.addClass ('as-modal-tip');
  69                     scope.parent.bind('click', close);
  70                     scope.parent.bind('focus', display);
  71                     scope.parent.bind('mouseover', display);
  72                     scope.parent.bind('mouseleave', close);
  73                     scope.parent.bind('blur', close);
  74
  75                     scope.delay = attrs.delay || 1000; // wait 1s before displaying tip
  76                 }
  77
  78                 return {
  79                     restrict: 'E',
  80                     template: tmpl,
  81                     link: mymethods,
  82                     scope: {tip: "="} // tip may not be defined when widget is display
  83                 };
  84             });
  85 })();