From 74fe296d895d8ba794396da3203b9e536aa13e34 Mon Sep 17 00:00:00 2001 From: OldHawk Date: Fri, 30 Jun 2017 11:13:39 +0800 Subject: [PATCH] add attr side-close-on-outside-click --- bower.json | 2 +- dist/angular-side-overlay.js | 41 +++++++++++++++++++++++++------- dist/angular-side-overlay.min.js | 2 +- package.json | 5 ++-- src/angular-side-overlay.js | 41 +++++++++++++++++++++++++------- 5 files changed, 71 insertions(+), 20 deletions(-) diff --git a/bower.json b/bower.json index 8f29102..c185fc2 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-side-overlay", - "version": "1.0.0", + "version": "1.0.1", "homepage": "https://github.com/taobataoma/angular-side-overlay", "repository": { "type": "git", diff --git a/dist/angular-side-overlay.js b/dist/angular-side-overlay.js index 2296702..34ec1d7 100644 --- a/dist/angular-side-overlay.js +++ b/dist/angular-side-overlay.js @@ -6,7 +6,7 @@ * @license MIT */ angular.module('ngSideOverlay', []); -angular.module('ngSideOverlay').constant('MODULE_VERSION', '1.0.0'); +angular.module('ngSideOverlay').constant('MODULE_VERSION', '1.0.1'); angular.module('ngSideOverlay').value('sideCallbackEvent', [ { id: undefined, @@ -19,7 +19,7 @@ angular.module('ngSideOverlay').value('sideCallbackEvent', [ angular.module('ngSideOverlay').provider('SideOverlay', function () { this.$get = ["sideCallbackEvent", function (sideCallbackEvent) { //method open - var open = function (id, cb) { + var open = function (evt, id, cb) { if (!id) { return; } @@ -34,10 +34,15 @@ angular.module('ngSideOverlay').provider('SideOverlay', function () { if (bg) { bg.css('display', 'block'); } + + if (evt && typeof evt.altKey !== "undefined") { + evt.stopPropagation(); + evt.preventDefault(); + } }; //method close - var close = function (id, cb) { + var close = function (evt, id, cb) { if (!id) { return; } @@ -47,6 +52,11 @@ angular.module('ngSideOverlay').provider('SideOverlay', function () { if (e.hasClass('side-visible')) { e.removeClass('side-visible'); } + + if (evt && typeof evt.altKey !== "undefined") { + evt.stopPropagation(); + evt.preventDefault(); + } }; //get status @@ -88,8 +98,7 @@ angular.module('ngSideOverlay').provider('SideOverlay', function () { close: close }; }]; -}) -; +}); angular.module('ngSideOverlay').directive('sideOverlay', sideOverlay); sideOverlay.$inject = ['sideCallbackEvent']; @@ -139,7 +148,7 @@ function sideOverlay(sideCallbackEvent) { } }); - //overlay class + //sideModal scope.$watch(attrs.sideModal, function (s) { if (attrs.hasOwnProperty('sideModal')) { var id = 'sideBackground_' + element.attr('id'); @@ -148,6 +157,17 @@ function sideOverlay(sideCallbackEvent) { } }); + //sideCloseOnOutsideClick + scope.$watch(attrs.sideCloseOnOutsideClick, function (s) { + if (attrs.hasOwnProperty('sideCloseOnOutsideClick')) { + $(document.body).on('click', function (e) { + if (element.hasClass('side-visible')) { + element.removeClass('side-visible'); + } + }); + } + }); + //overlay class scope.$watch(attrs.sideClass, function (s) { if (attrs.sideClass) { @@ -155,7 +175,7 @@ function sideOverlay(sideCallbackEvent) { } }); - //document keydown + //document keydown (ESC close) scope.$watch(attrs.sideCloseOnEsc, function (s) { if (attrs.hasOwnProperty('sideCloseOnEsc')) { $(document).on('keydown', function (e) { @@ -167,8 +187,13 @@ function sideOverlay(sideCallbackEvent) { }); } }); + //sideOpened & sideClosed event + element.bind('click', function (evt) { + evt.stopPropagation(); + evt.preventDefault(); + }); - //sideOpened & sideClosed + //sideOpened & sideClosed event element.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', function (evt) { var e = angular.element(evt.target); var bg = $('#sideBackground_' + element.attr('id')); diff --git a/dist/angular-side-overlay.min.js b/dist/angular-side-overlay.min.js index df01564..8f74fa5 100644 --- a/dist/angular-side-overlay.min.js +++ b/dist/angular-side-overlay.min.js @@ -5,4 +5,4 @@ * @link https://github.com/taobataoma/angular-side-overlay#readme * @license MIT */ -function sideOverlay(e){function a(a,s,n){function l(a){var s=null;return angular.forEach(e,function(e){e.id===a&&(s=e)}),s}s.addClass("side-overlay"),a.$watch(n.sideOverlay,function(e){switch(n.sideOverlay){case"left":s.css("top","0"),s.css("bottom","0"),s.css("left","0"),s.css("transform","translateX(-101%) translateY(0)");break;case"right":s.css("top","0"),s.css("bottom","0"),s.css("right","0"),s.css("transform","translateX(101%) translateY(0)");break;case"top":s.css("left","0"),s.css("right","0"),s.css("top","0"),s.css("transform","translateX(0) translateY(-101%)");break;case"bottom":s.css("left","0"),s.css("right","0"),s.css("bottom","0"),s.css("transform","translateX(0) translateY(101%)");break;default:s.css("top","0"),s.css("bottom","0"),s.css("right","0"),s.css("transform","translateX(101%) translateY(0)")}}),a.$watch(n.sideModal,function(e){if(n.hasOwnProperty("sideModal")){var a="sideBackground_"+s.attr("id"),l=angular.element('');angular.element(document.getElementsByTagName("body")).append(l)}}),a.$watch(n.sideClass,function(e){n.sideClass&&s.addClass(n.sideClass)}),a.$watch(n.sideCloseOnEsc,function(e){n.hasOwnProperty("sideCloseOnEsc")&&$(document).on("keydown",function(e){27===e.keyCode&&s.hasClass("side-visible")&&s.removeClass("side-visible")})}),s.bind("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd",function(e){var t=angular.element(e.target),i=$("#sideBackground_"+s.attr("id")),o=l(t.attr("id"));o&&(t.hasClass("side-visible")?(o.isOpened=!0,"function"==typeof o.openCallback&&a.$apply(function(){o.openCallback()}),a.$apply(function(){a.$eval(n.sideOpened)})):(i&&i.css("display","none"),o.isOpened=!1,"function"==typeof o.closeCallback&&a.$apply(function(){o.closeCallback()}),a.$apply(function(){a.$eval(n.sideClosed)})))})}var s={restrict:"A",link:a};return s}angular.module("ngSideOverlay",[]),angular.module("ngSideOverlay").constant("MODULE_VERSION","1.0.0"),angular.module("ngSideOverlay").value("sideCallbackEvent",[{id:void 0,isOpened:!1,openCallback:void 0,closeCallback:void 0}]),angular.module("ngSideOverlay").provider("SideOverlay",function(){this.$get=["sideCallbackEvent",function(e){function a(a,s,n,l){var t=null;angular.forEach(e,function(e){e.id===a&&(t=e,e.isOpened=s,e.openCallback=n,e.closeCallback=l)}),null===t&&e.push({id:a,isOpened:s,openCallback:n,closeCallback:l})}var s=function(e,s){if(e){a(e,!0,s,null);var n=angular.element(document.getElementById(e));n.hasClass("side-visible")||n.addClass("side-visible");var l=$("#sideBackground_"+e);l&&l.css("display","block")}},n=function(e,s){if(e){a(e,!1,null,s);var n=angular.element(document.getElementById(e));n.hasClass("side-visible")&&n.removeClass("side-visible")}},l=function(a){var s=!1;return angular.forEach(e,function(e){e.id===a&&(s=e.isOpened)}),s};return{isOpened:l,open:s,close:n}}]}),angular.module("ngSideOverlay").directive("sideOverlay",sideOverlay),sideOverlay.$inject=["sideCallbackEvent"]; \ No newline at end of file +function sideOverlay(e){function s(s,a,n){function t(s){var a=null;return angular.forEach(e,function(e){e.id===s&&(a=e)}),a}a.addClass("side-overlay"),s.$watch(n.sideOverlay,function(e){switch(n.sideOverlay){case"left":a.css("top","0"),a.css("bottom","0"),a.css("left","0"),a.css("transform","translateX(-101%) translateY(0)");break;case"right":a.css("top","0"),a.css("bottom","0"),a.css("right","0"),a.css("transform","translateX(101%) translateY(0)");break;case"top":a.css("left","0"),a.css("right","0"),a.css("top","0"),a.css("transform","translateX(0) translateY(-101%)");break;case"bottom":a.css("left","0"),a.css("right","0"),a.css("bottom","0"),a.css("transform","translateX(0) translateY(101%)");break;default:a.css("top","0"),a.css("bottom","0"),a.css("right","0"),a.css("transform","translateX(101%) translateY(0)")}}),s.$watch(n.sideModal,function(e){if(n.hasOwnProperty("sideModal")){var s="sideBackground_"+a.attr("id"),t=angular.element('');angular.element(document.getElementsByTagName("body")).append(t)}}),s.$watch(n.sideCloseOnOutsideClick,function(e){n.hasOwnProperty("sideCloseOnOutsideClick")&&$(document.body).on("click",function(e){a.hasClass("side-visible")&&a.removeClass("side-visible")})}),s.$watch(n.sideClass,function(e){n.sideClass&&a.addClass(n.sideClass)}),s.$watch(n.sideCloseOnEsc,function(e){n.hasOwnProperty("sideCloseOnEsc")&&$(document).on("keydown",function(e){27===e.keyCode&&a.hasClass("side-visible")&&a.removeClass("side-visible")})}),a.bind("click",function(e){e.stopPropagation(),e.preventDefault()}),a.bind("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd",function(e){var i=angular.element(e.target),l=$("#sideBackground_"+a.attr("id")),o=t(i.attr("id"));o&&(i.hasClass("side-visible")?(o.isOpened=!0,"function"==typeof o.openCallback&&s.$apply(function(){o.openCallback()}),s.$apply(function(){s.$eval(n.sideOpened)})):(l&&l.css("display","none"),o.isOpened=!1,"function"==typeof o.closeCallback&&s.$apply(function(){o.closeCallback()}),s.$apply(function(){s.$eval(n.sideClosed)})))})}var a={restrict:"A",link:s};return a}angular.module("ngSideOverlay",[]),angular.module("ngSideOverlay").constant("MODULE_VERSION","1.0.1"),angular.module("ngSideOverlay").value("sideCallbackEvent",[{id:void 0,isOpened:!1,openCallback:void 0,closeCallback:void 0}]),angular.module("ngSideOverlay").provider("SideOverlay",function(){this.$get=["sideCallbackEvent",function(e){function s(s,a,n,t){var i=null;angular.forEach(e,function(e){e.id===s&&(i=e,e.isOpened=a,e.openCallback=n,e.closeCallback=t)}),null===i&&e.push({id:s,isOpened:a,openCallback:n,closeCallback:t})}var a=function(e,a,n){if(a){s(a,!0,n,null);var t=angular.element(document.getElementById(a));t.hasClass("side-visible")||t.addClass("side-visible");var i=$("#sideBackground_"+a);i&&i.css("display","block"),e&&"undefined"!=typeof e.altKey&&(e.stopPropagation(),e.preventDefault())}},n=function(e,a,n){if(a){s(a,!1,null,n);var t=angular.element(document.getElementById(a));t.hasClass("side-visible")&&t.removeClass("side-visible"),e&&"undefined"!=typeof e.altKey&&(e.stopPropagation(),e.preventDefault())}},t=function(s){var a=!1;return angular.forEach(e,function(e){e.id===s&&(a=e.isOpened)}),a};return{isOpened:t,open:a,close:n}}]}),angular.module("ngSideOverlay").directive("sideOverlay",sideOverlay),sideOverlay.$inject=["sideCallbackEvent"]; \ No newline at end of file diff --git a/package.json b/package.json index 2282313..009e8b4 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,10 @@ { "name": "angular-side-overlay", - "version": "1.0.0", + "version": "1.0.1", "description": "angular side overlay component", "scripts": { - "test": "npm test" + "test": "npm test", + "build": "gulp build" }, "repository": { "type": "git", diff --git a/src/angular-side-overlay.js b/src/angular-side-overlay.js index f478a5d..78eab08 100644 --- a/src/angular-side-overlay.js +++ b/src/angular-side-overlay.js @@ -1,5 +1,5 @@ angular.module('ngSideOverlay', []); -angular.module('ngSideOverlay').constant('MODULE_VERSION', '1.0.0'); +angular.module('ngSideOverlay').constant('MODULE_VERSION', '1.0.1'); angular.module('ngSideOverlay').value('sideCallbackEvent', [ { id: undefined, @@ -12,7 +12,7 @@ angular.module('ngSideOverlay').value('sideCallbackEvent', [ angular.module('ngSideOverlay').provider('SideOverlay', function () { this.$get = function (sideCallbackEvent) { //method open - var open = function (id, cb) { + var open = function (evt, id, cb) { if (!id) { return; } @@ -27,10 +27,15 @@ angular.module('ngSideOverlay').provider('SideOverlay', function () { if (bg) { bg.css('display', 'block'); } + + if (evt && typeof evt.altKey !== "undefined") { + evt.stopPropagation(); + evt.preventDefault(); + } }; //method close - var close = function (id, cb) { + var close = function (evt, id, cb) { if (!id) { return; } @@ -40,6 +45,11 @@ angular.module('ngSideOverlay').provider('SideOverlay', function () { if (e.hasClass('side-visible')) { e.removeClass('side-visible'); } + + if (evt && typeof evt.altKey !== "undefined") { + evt.stopPropagation(); + evt.preventDefault(); + } }; //get status @@ -81,8 +91,7 @@ angular.module('ngSideOverlay').provider('SideOverlay', function () { close: close }; }; -}) -; +}); angular.module('ngSideOverlay').directive('sideOverlay', sideOverlay); sideOverlay.$inject = ['sideCallbackEvent']; @@ -132,7 +141,7 @@ function sideOverlay(sideCallbackEvent) { } }); - //overlay class + //sideModal scope.$watch(attrs.sideModal, function (s) { if (attrs.hasOwnProperty('sideModal')) { var id = 'sideBackground_' + element.attr('id'); @@ -141,6 +150,17 @@ function sideOverlay(sideCallbackEvent) { } }); + //sideCloseOnOutsideClick + scope.$watch(attrs.sideCloseOnOutsideClick, function (s) { + if (attrs.hasOwnProperty('sideCloseOnOutsideClick')) { + $(document.body).on('click', function (e) { + if (element.hasClass('side-visible')) { + element.removeClass('side-visible'); + } + }); + } + }); + //overlay class scope.$watch(attrs.sideClass, function (s) { if (attrs.sideClass) { @@ -148,7 +168,7 @@ function sideOverlay(sideCallbackEvent) { } }); - //document keydown + //document keydown (ESC close) scope.$watch(attrs.sideCloseOnEsc, function (s) { if (attrs.hasOwnProperty('sideCloseOnEsc')) { $(document).on('keydown', function (e) { @@ -160,8 +180,13 @@ function sideOverlay(sideCallbackEvent) { }); } }); + //sideOpened & sideClosed event + element.bind('click', function (evt) { + evt.stopPropagation(); + evt.preventDefault(); + }); - //sideOpened & sideClosed + //sideOpened & sideClosed event element.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', function (evt) { var e = angular.element(evt.target); var bg = $('#sideBackground_' + element.attr('id'));