diff options
author | Romain Forlot <romain.forlot@iot.bzh> | 2017-05-04 13:59:00 +0200 |
---|---|---|
committer | Romain Forlot <romain.forlot@iot.bzh> | 2018-10-15 18:21:42 +0200 |
commit | e3d26a820db76f006ec364c90dc54a689446d998 (patch) | |
tree | ae7a80f266445fd6a3bb29abb25ac231d18e7516 /templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js | |
parent | 02075924e861edb74935266cc722d362af87a9f0 (diff) |
Rename to more meaningful name directories
Change-Id: Ib3990308c1f2358b3e330cd0068719098c4dab56
Signed-off-by: Romain Forlot <romain.forlot@iot.bzh>
Diffstat (limited to 'templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js')
-rw-r--r-- | templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js b/templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js new file mode 100644 index 0000000..37ba047 --- /dev/null +++ b/templates/hybrid-html5/app/Frontend/widgets/Notifications/ModalNotification.js @@ -0,0 +1,85 @@ +/* + * Copyright (C) 2015 "IoT.bzh" + * Author "Fulup Ar Foll" + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + * Bugs: Input with Callback SHOULD BE get 'required' class + * + * ref: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover + * + * usage: + * + * tipModal: listen event from elem.parent() to display tip-modal + * <div class="xxxx"> + * <tip-modal tip=xxxx></tip-modal> + * <input-text ....></input-text> + * </div> + * + * Note: use CSS.visibility to avoid display flickering at initial display. + */ + +(function () { + 'use strict'; + + var tmpl = '<div class="tip-modal-popup">' + + '<i class="{{icon}}"></i>' + + '<span>{{tip}}</span>' + + '</span></div>' ; + + angular.module('ModalNotification', []) + .directive('tipModal', function ($timeout) { + + function mymethods(scope, elem, attrs) { + scope.parent = elem.parent(); + scope.modal = elem.find("div"); + + + // delay tip display to avoid blinking when moving mouse fast + function display () { + function action() { + if (scope.show) scope.modal.css({opacity: 1, visibility:'visible'}); + } + scope.show = true; + scope.timeout = $timeout(action, scope.delay); + } + + function close () { + scope.show = false; + scope.modal.css({opacity: 0, visibility:'hidden'}); + } + + + // ajust icon or use default + scope.icon = attrs.icon || 'fi-lightbulb'; + + // Update Parent element to get mouse event + scope.parent.addClass ('as-modal-tip'); + scope.parent.bind('click', close); + scope.parent.bind('focus', display); + scope.parent.bind('mouseover', display); + scope.parent.bind('mouseleave', close); + scope.parent.bind('blur', close); + + scope.delay = attrs.delay || 1000; // wait 1s before displaying tip + } + + return { + restrict: 'E', + template: tmpl, + link: mymethods, + scope: {tip: "="} // tip may not be defined when widget is display + }; + }); +})(); |