moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2025-02-07 02:20:14 -05:00
Code Issues Releases Wiki Activity

Convert common.js directive to common.js module

Browse Source
This commit is contained in:
Tankred Hase 2014-10-16 18:25:28 +02:00
parent 2594ff515b
commit bd19135472
1 changed files with 114 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
src/js/directives/common.js
View File

@ -1,143 +1,139 @@
define(function(require) { 'use strict';
'use strict';
var angular = require('angular'); var ngModule = angular.module('woDirectives', []);
var ngModule = angular.module('woDirectives', []); ngModule.directive('woTouch', function($parse) {
var className = 'wo-touch-active';
ngModule.directive('woTouch', function($parse) { return function(scope, elm, attrs) {
var className = 'wo-touch-active'; var handler = $parse(attrs.woTouch);
return function(scope, elm, attrs) { elm.on('touchstart', function() {
var handler = $parse(attrs.woTouch); elm.addClass(className);
});
elm.on('touchleave touchcancel touchmove touchend', function() {
elm.removeClass(className);
});
elm.on('touchstart', function() { elm.on('click', function(event) {
elm.addClass(className); elm.removeClass(className);
}); scope.$apply(function() {
elm.on('touchleave touchcancel touchmove touchend', function() { handler(scope, {
elm.removeClass(className); $event: event
});
elm.on('click', function(event) {
elm.removeClass(className);
scope.$apply(function() {
handler(scope, {
$event: event
});
}); });
}); });
}; });
}); };
});
ngModule.directive('woTooltip', function($document, $timeout) { ngModule.directive('woTooltip', function($document, $timeout) {
return function(scope, elm, attrs) { return function(scope, elm, attrs) {
var selector = attrs.woTooltip; var selector = attrs.woTooltip;
var tooltip = $document.find(selector); var tooltip = $document.find(selector);
elm.on('mouseover', function() { elm.on('mouseover', function() {
// Compute tooltip position // Compute tooltip position
var offsetElm = elm.offset(); var offsetElm = elm.offset();
var offsetTooltipParent = tooltip.offsetParent().offset(); var offsetTooltipParent = tooltip.offsetParent().offset();
// Set tooltip position // Set tooltip position
tooltip[0].style.top = (offsetElm.top - offsetTooltipParent.top + tooltip[0].style.top = (offsetElm.top - offsetTooltipParent.top +
elm[0].offsetHeight / 2 - tooltip[0].offsetHeight / 2) + 'px'; elm[0].offsetHeight / 2 - tooltip[0].offsetHeight / 2) + 'px';
tooltip[0].style.left = (offsetElm.left - offsetTooltipParent.left + tooltip[0].style.left = (offsetElm.left - offsetTooltipParent.left +
elm[0].offsetWidth) + 'px'; elm[0].offsetWidth) + 'px';
// Wait till browser repaint // Wait till browser repaint
$timeout(function() { $timeout(function() {
tooltip.addClass('tooltip--show'); tooltip.addClass('tooltip--show');
});
}); });
});
elm.on('mouseout', function() { elm.on('mouseout', function() {
tooltip.removeClass('tooltip--show'); tooltip.removeClass('tooltip--show');
tooltip[0].style.top = '-9999px'; tooltip[0].style.top = '-9999px';
tooltip[0].style.left = '-9999px'; tooltip[0].style.left = '-9999px';
}); });
}; };
}); });
ngModule.directive('woDropdown', function($document, $timeout) { ngModule.directive('woDropdown', function($document, $timeout) {
return function(scope, elm, attrs) { return function(scope, elm, attrs) {
var selector = attrs.woDropdown; var selector = attrs.woDropdown;
var position = (attrs.woDropdownPosition || '').split(' '); var position = (attrs.woDropdownPosition || '').split(' ');
var dropdown = $document.find(selector); var dropdown = $document.find(selector);
function appear() { function appear() {
// Compute dropdown position // Compute dropdown position
var offsetElm = elm.offset(); var offsetElm = elm.offset();
var offsetDropdownParent = dropdown.offsetParent().offset(); var offsetDropdownParent = dropdown.offsetParent().offset();
// Set dropdown position // Set dropdown position
switch(position[1]) { switch(position[1]) {
case 'up': case 'up':
dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top - dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top -
dropdown[0].offsetHeight - 3) + 'px'; dropdown[0].offsetHeight - 3) + 'px';
break; break;
default: default:
dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top + dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top +
elm[0].offsetHeight + 3) + 'px'; elm[0].offsetHeight + 3) + 'px';
}
switch(position[0]) {
case 'center':
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
elm[0].offsetWidth / 2 - dropdown[0].offsetWidth / 2) + 'px';
break;
case 'right':
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
elm[0].offsetWidth - dropdown[0].offsetWidth) + 'px';
break;
default:
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left) + 'px';
}
// Wait till browser repaint
$timeout(function() {
dropdown.addClass('dropdown--show');
});
// class on element to change style if drowdown is visible
elm.addClass('wo-dropdown-active');
} }
function disappear() { switch(position[0]) {
dropdown.removeClass('dropdown--show'); case 'center':
dropdown[0].style.top = '-9999px'; dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
dropdown[0].style.left = '-9999px'; elm[0].offsetWidth / 2 - dropdown[0].offsetWidth / 2) + 'px';
break;
elm.removeClass('wo-dropdown-active'); case 'right':
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
elm[0].offsetWidth - dropdown[0].offsetWidth) + 'px';
break;
default:
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left) + 'px';
} }
function toggle() { // Wait till browser repaint
if(dropdown.hasClass('dropdown--show')) { $timeout(function() {
disappear(); dropdown.addClass('dropdown--show');
} });
else {
appear(); // class on element to change style if drowdown is visible
} elm.addClass('wo-dropdown-active');
}
function disappear() {
dropdown.removeClass('dropdown--show');
dropdown[0].style.top = '-9999px';
dropdown[0].style.left = '-9999px';
elm.removeClass('wo-dropdown-active');
}
function toggle() {
if(dropdown.hasClass('dropdown--show')) {
disappear();
} }
else {
appear();
}
}
elm.on('touchstart click', toggle); elm.on('touchstart click', toggle);
// close if user clicks outside of dropdown and elm // close if user clicks outside of dropdown and elm
$document.on('touchstart.woDropdown click.woDropdown', function(e) { $document.on('touchstart.woDropdown click.woDropdown', function(e) {
var t = angular.element(e.target); var t = angular.element(e.target);
if(dropdown.hasClass('dropdown--show') && if(dropdown.hasClass('dropdown--show') &&
!t.closest(dropdown).length && !t.closest(dropdown).length &&
!t.closest(elm).length) { !t.closest(elm).length) {
disappear(); disappear();
} }
}); });
// remove event listener on document // remove event listener on document
scope.$on('$destroy', function() { scope.$on('$destroy', function() {
$document.off('touchstart.woDropdown click.woDropdown'); $document.off('touchstart.woDropdown click.woDropdown');
}); });
}; };
}); });
return ngModule; module.exports = ngModule;
});