From cd59c5019dfc23921560747f5df3b1fdfdda493d Mon Sep 17 00:00:00 2001 From: bitflower Date: Mon, 28 May 2018 12:19:43 +0200 Subject: [PATCH] Allow plugin to be activated from scope variable --- dist/angular-content-editable.js | 13 ++++++++++--- dist/angular-content-editable.min.js | 2 +- src/angular-content-editable.directive.js | 13 ++++++++++--- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/dist/angular-content-editable.js b/dist/angular-content-editable.js index 495abe6..d4ed473 100644 --- a/dist/angular-content-editable.js +++ b/dist/angular-content-editable.js @@ -7,7 +7,7 @@ angular.module('angular-content-editable') var directive = { restrict: 'A', require: 'ngModel', - scope: { editCallback: '&?', isEditing: '=?', stripReplace: '=?' }, + scope: { contentEditable: '<', editCallback: '&?', isEditing: '=?', stripReplace: '=?' }, link: _link }; @@ -39,8 +39,15 @@ angular.module('angular-content-editable') // Get the strip tags option from item scope or global defined stripReplace = scope.stripReplace || options.stripReplace; - // add editable class - attrs.$addClass(options.editableClass); + // add editable class depending on directive attribute's value + scope.$watch('contentEditable', function (newVal, oldVal) { + if (newVal === true) { + attrs.$addClass(options.editableClass); + } else { + attrs.$removeClass(options.editableClass); + } + + }); scope.$watch('isEditing', function(newValue, oldValue) { if (newValue !== oldValue) { diff --git a/dist/angular-content-editable.min.js b/dist/angular-content-editable.min.js index 87fbc4c..ac7019d 100644 --- a/dist/angular-content-editable.min.js +++ b/dist/angular-content-editable.min.js @@ -1 +1 @@ -angular.module("angular-content-editable",[]),angular.module("angular-content-editable").directive("contentEditable",["$log","$sce","$parse","$window","contentEditable",function($log,$sce,$parse,$window,contentEditable){function _link(scope,elem,attrs,ngModel){function onClick(e){e.preventDefault(),attrs.$set("contenteditable","true"),attrs.$addClass("active"),originalElement.focus()}function onFocus(e){scope.$evalAsync(function(){if(scope.isEditing=!0,noEscape=!0,options.focusSelect){var range=$window.document.createRange(),selection=$window.getSelection();range.selectNodeContents(originalElement),selection.removeAllRanges(),selection.addRange(range)}options.renderHtml&&(originalElement.textContent=elem.html())})}function onBlur(e){scope.$apply(function(){var html;if(scope.isEditing=!1,attrs.$removeClass("active"),attrs.$set("contenteditable","false"),options.renderHtml&&noEscape?(html=originalElement.textContent.replace(/\u00a0/g," "),elem.html(html)):html=elem.html().replace(/ /g," "),html!=ngModel.$modelValue){if(stripReplace){if(angular.isString(stripReplace))html=html.replace(new RegExp(stripReplace,"g"),"");else if(angular.isArray(stripReplace)){var e=stripReplace[0]||"",r=stripReplace[1]||"",f=stripReplace[2]||"g";html=html.replace(new RegExp(e,f),r)}else html=html.replace(/(<([^>]+)>)/gi,"").replace(/\r?\n|\r/g,"");elem.html(html)}if(ngModel.$setViewValue(html),callback&&angular.isFunction(callback))return callback({text:html,elem:elem})}})}function onKeyDown(e){return 9==e.which?void originalElement.blur():27==e.which?(ngModel.$rollbackViewValue(),noEscape=!1,originalElement.blur()):13==e.which&&(options.singleLine||e.ctrlKey)?originalElement.blur():void 0}if(!ngModel)return void $log.warn("Error: ngModel is required in elem: ",elem);var callback,stripReplace,noEscape=!0,originalElement=elem[0],options=angular.copy(contentEditable);angular.forEach(options,function(val,key){key in attrs&&(options[key]=$parse(attrs[key])(scope))}),callback=scope.editCallback||options.editCallback,stripReplace=scope.stripReplace||options.stripReplace,attrs.$addClass(options.editableClass),scope.$watch("isEditing",function(newValue,oldValue){newValue!==oldValue&&(newValue?originalElement.click():originalElement.blur())}),ngModel.$render=function(){elem.html(ngModel.$modelValue||elem.html())},elem.on("click",onClick),elem.on("focus",onFocus),elem.on("blur",onBlur),elem.on("keydown",onKeyDown),scope.$on("$destroy",function(){elem.off("click",onClick),elem.off("focus",onFocus),elem.off("blur",onBlur),elem.off("keydown",onKeyDown)})}return{restrict:"A",require:"ngModel",scope:{editCallback:"&?",isEditing:"=?",stripReplace:"=?"},link:_link}}]),angular.module("angular-content-editable").provider("contentEditable",function(){var defaults={editableClass:"editable",keyBindings:!0,singleLine:!1,focusSelect:!0,renderHtml:!1,editCallback:!1,stripReplace:!1};this.configure=function(options){return angular.extend(defaults,options)},this.$get=function(){return defaults}}); \ No newline at end of file +angular.module("angular-content-editable",[]),angular.module("angular-content-editable").directive("contentEditable",["$log","$sce","$parse","$window","contentEditable",function($log,$sce,$parse,$window,contentEditable){function _link(scope,elem,attrs,ngModel){function onClick(e){e.preventDefault(),attrs.$set("contenteditable","true"),attrs.$addClass("active"),originalElement.focus()}function onFocus(e){scope.$evalAsync(function(){if(scope.isEditing=!0,noEscape=!0,options.focusSelect){var range=$window.document.createRange(),selection=$window.getSelection();range.selectNodeContents(originalElement),selection.removeAllRanges(),selection.addRange(range)}options.renderHtml&&(originalElement.textContent=elem.html())})}function onBlur(e){scope.$apply(function(){var html;if(scope.isEditing=!1,attrs.$removeClass("active"),attrs.$set("contenteditable","false"),options.renderHtml&&noEscape?(html=originalElement.textContent.replace(/\u00a0/g," "),elem.html(html)):html=elem.html().replace(/ /g," "),html!=ngModel.$modelValue){if(stripReplace){if(angular.isString(stripReplace))html=html.replace(new RegExp(stripReplace,"g"),"");else if(angular.isArray(stripReplace)){var e=stripReplace[0]||"",r=stripReplace[1]||"",f=stripReplace[2]||"g";html=html.replace(new RegExp(e,f),r)}else html=html.replace(/(<([^>]+)>)/gi,"").replace(/\r?\n|\r/g,"");elem.html(html)}if(ngModel.$setViewValue(html),callback&&angular.isFunction(callback))return callback({text:html,elem:elem})}})}function onKeyDown(e){return 9==e.which?void originalElement.blur():27==e.which?(ngModel.$rollbackViewValue(),noEscape=!1,originalElement.blur()):13==e.which&&(options.singleLine||e.ctrlKey)?originalElement.blur():void 0}if(!ngModel)return void $log.warn("Error: ngModel is required in elem: ",elem);var callback,stripReplace,noEscape=!0,originalElement=elem[0],options=angular.copy(contentEditable);angular.forEach(options,function(val,key){key in attrs&&(options[key]=$parse(attrs[key])(scope))}),callback=scope.editCallback||options.editCallback,stripReplace=scope.stripReplace||options.stripReplace,scope.$watch("contentEditable",function(newVal,oldVal){!0===newVal?attrs.$addClass(options.editableClass):attrs.$removeClass(options.editableClass)}),scope.$watch("isEditing",function(newValue,oldValue){newValue!==oldValue&&(newValue?originalElement.click():originalElement.blur())}),ngModel.$render=function(){elem.html(ngModel.$modelValue||elem.html())},elem.on("click",onClick),elem.on("focus",onFocus),elem.on("blur",onBlur),elem.on("keydown",onKeyDown),scope.$on("$destroy",function(){elem.off("click",onClick),elem.off("focus",onFocus),elem.off("blur",onBlur),elem.off("keydown",onKeyDown)})}return{restrict:"A",require:"ngModel",scope:{contentEditable:"<",editCallback:"&?",isEditing:"=?",stripReplace:"=?"},link:_link}}]),angular.module("angular-content-editable").provider("contentEditable",function(){var defaults={editableClass:"editable",keyBindings:!0,singleLine:!1,focusSelect:!0,renderHtml:!1,editCallback:!1,stripReplace:!1};this.configure=function(options){return angular.extend(defaults,options)},this.$get=function(){return defaults}}); \ No newline at end of file diff --git a/src/angular-content-editable.directive.js b/src/angular-content-editable.directive.js index b745e11..068094d 100644 --- a/src/angular-content-editable.directive.js +++ b/src/angular-content-editable.directive.js @@ -5,7 +5,7 @@ angular.module('angular-content-editable') var directive = { restrict: 'A', require: 'ngModel', - scope: { editCallback: '&?', isEditing: '=?', stripReplace: '=?' }, + scope: { contentEditable: '<', editCallback: '&?', isEditing: '=?', stripReplace: '=?' }, link: _link }; @@ -37,8 +37,15 @@ angular.module('angular-content-editable') // Get the strip tags option from item scope or global defined stripReplace = scope.stripReplace || options.stripReplace; - // add editable class - attrs.$addClass(options.editableClass); + // add editable class depending on directive attribute's value + scope.$watch('contentEditable', function (newVal, oldVal) { + if (newVal === true) { + attrs.$addClass(options.editableClass); + } else { + attrs.$removeClass(options.editableClass); + } + + }); scope.$watch('isEditing', function(newValue, oldValue) { if (newValue !== oldValue) {