Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-content-editable

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-content-editable - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

293

dist/angular-content-editable.js

@@ -1,177 +0,182 @@

angular.module('angular-content-editable', [])
angular.module('angular-content-editable', []);
.directive('contentEditable', function ($log,$sce,$compile,$window,contentEditable) {
angular.module('angular-content-editable')
var directive = {
restrict: 'A',
require: '?ngModel',
scope: { editCallback: '=', ngModel: '=' },
link: _link
}
.directive('contentEditable', ['$log', '$sce', '$compile', '$window', 'contentEditable', function ($log,$sce,$compile,$window,contentEditable) {
return directive;
var directive = {
restrict: 'A',
require: '?ngModel',
scope: { editCallback: '=', ngModel: '=' },
link: _link
}
function _link(scope, elem, attrs, ngModel) {
return directive;
// return if ng model not specified
if(!ngModel) {
$log.warn('Error: ngModel is required in elem: ', elem);
return;
}
function _link(scope, elem, attrs, ngModel) {
var noEscape = true;
var originalElement = elem[0];
// get default usage options
var options = angular.copy(contentEditable);
// update options with attributes
angular.forEach(options, function (val, key) {
if( key in attrs && typeof attrs[key] !== 'undefined' ) { options[key] = attrs[key]; }
})
// return if ng model not specified
if(!ngModel) {
$log.warn('Error: ngModel is required in elem: ', elem);
return;
}
// if model is invalid or null
// fill his value with elem html content
if( !scope.ngModel ) {
ngModel.$setViewValue( elem.html() );
}
var noEscape = true;
var originalElement = elem[0];
// get default usage options
var options = angular.copy(contentEditable);
// update options with attributes
angular.forEach(options, function (val, key) {
if( key in attrs && typeof attrs[key] !== 'undefined' ) { options[key] = attrs[key]; }
})
// add editable class
attrs.$addClass(options.editableClass);
// if model is invalid or null
// fill his value with elem html content
if( !scope.ngModel ) {
ngModel.$setViewValue( elem.html() );
}
// render always with model value
ngModel.$render = function() {
elem.html( ngModel.$modelValue )
}
// add editable class
attrs.$addClass(options.editableClass);
function onClick(e){
e.preventDefault();
attrs.$set('contenteditable', 'true');
return originalElement.focus();
}
// render always with model value
ngModel.$render = function() {
elem.html( ngModel.$modelValue || '' );
}
// check some option extra
// conditions during focus
function onFocus(e) {
// turn on the flag
noEscape = true;
// select all on focus
if( options.focusSelect ) {
var range = $window.document.createRange();
range.selectNodeContents( originalElement );
$window.getSelection().addRange(range);
}
// if render-html is enabled convert
// all text content to plaintext
// in order to modify html tags
if( options.renderHtml ) {
originalElement.textContent = elem.html();
}
}
// handle click on element
function onClick(e){
e.preventDefault();
attrs.$set('contenteditable', 'true');
return originalElement.focus();
}
function onBlur(e) {
// check some option extra
// conditions during focus
function onFocus(e) {
// turn on the flag
noEscape = true;
// select all on focus
if( options.focusSelect ) {
var range = $window.document.createRange();
range.selectNodeContents( originalElement );
$window.getSelection().addRange(range);
}
// if render-html is enabled convert
// all text content to plaintext
// in order to modify html tags
if( options.renderHtml ) {
originalElement.textContent = elem.html();
}
}
// the text
var html;
function onBlur(e) {
// disable editability
attrs.$set('contenteditable', 'false');
// the text
var html;
// if text needs to be rendered as html
if( options.renderHtml && noEscape ) {
// get plain text html (with html tags)
// replace all blank spaces
html = originalElement.textContent.replace(/\u00a0/g, " ");
// update elem html value
elem.html(html);
// disable editability
attrs.$set('contenteditable', 'false');
} else {
// get element content replacing html tag
html = elem.html().replace(/ /g, ' ');
}
// if text needs to be rendered as html
if( options.renderHtml && noEscape ) {
// get plain text html (with html tags)
// replace all blank spaces
html = originalElement.textContent.replace(/\u00a0/g, " ");
// update elem html value
elem.html(html);
// if element value is
// different from model value
if( html != ngModel.$modelValue ) {
} else {
// get element content replacing html tag
html = elem.html().replace(/ /g, ' ');
}
/**
* This method should be called
* when a controller wants to
* change the view value
*/
ngModel.$setViewValue(html)
// if user passed a variable
// and is a function
if( scope.editCallback && angular.isFunction(scope.editCallback) ) {
// apply the callback
// with arguments: current text and element
return scope.$apply( scope.editCallback(html, elem) );
// if element value is
// different from model value
if( html != ngModel.$modelValue ) {
/**
* This method should be called
* when a controller wants to
* change the view value
*/
ngModel.$setViewValue(html)
// if user passed a variable
// and is a function
if( scope.editCallback && angular.isFunction(scope.editCallback) ) {
// apply the callback
// with arguments: current text and element
return scope.$apply( scope.editCallback(html, elem) );
}
}
}
}
function onKeyDown(e) {
}
// on tab key blur and
// TODO: focus to next
if( e.which == 9 ) {
originalElement.blur();
return;
}
function onKeyDown(e) {
// on esc key roll back value and blur
if( e.which == 27 ) {
ngModel.$rollbackViewValue();
noEscape = false;
return originalElement.blur();
}
// on tab key blur and
// TODO: focus to next
if( e.which == 9 ) {
originalElement.blur();
return;
}
// if single line or ctrl key is
// pressed trigger the blur event
if( e.which == 13 && (options.singleLine || e.ctrlKey) ) {
return originalElement.blur();
}
// on esc key roll back value and blur
if( e.which == 27 ) {
ngModel.$rollbackViewValue();
noEscape = false;
return originalElement.blur();
}
}
// if single line or ctrl key is
// pressed trigger the blur event
if( e.which == 13 && (options.singleLine || e.ctrlKey) ) {
return originalElement.blur();
}
/**
* On click turn the element
* to editable and focus it
*/
elem.bind('click', onClick);
}
/**
* On element focus
*/
elem.bind('focus', onFocus);
/**
* On click turn the element
* to editable and focus it
*/
elem.bind('click', onClick);
/**
* On element blur turn off
* editable mode, if HTML, render
* update model value and run callback
* if specified
*/
elem.bind('blur', onBlur);
/**
* On element focus
*/
elem.bind('focus', onFocus);
/**
* Bind the keydown event for many functions
* TODO: more to come
*/
elem.bind('keydown', onKeyDown);
/**
* On element blur turn off
* editable mode, if HTML, render
* update model value and run callback
* if specified
*/
elem.bind('blur', onBlur);
/**
* On element destroy, remove all event
* listeners related to the directive
* (helps to prevent memory leaks)
*/
scope.$on('$destroy', function () {
elem.unbind(onClick);
elem.unbind(onFocus);
elem.unbind(onBlur);
})
/**
* Bind the keydown event for many functions
* TODO: more to come
*/
elem.bind('keydown', onKeyDown);
}
/**
* On element destroy, remove all event
* listeners related to the directive
* (helps to prevent memory leaks)
*/
scope.$on('$destroy', function () {
elem.unbind(onClick);
elem.unbind(onFocus);
elem.unbind(onBlur);
})
}])
}
angular.module('angular-content-editable')
})
/**

@@ -200,2 +205,2 @@ * Provider to setup the default

})
});

@@ -1,1 +0,1 @@

angular.module("angular-content-editable",[]).directive("contentEditable",function($log,$sce,$compile,$window,contentEditable){function _link(scope,elem,attrs,ngModel){function onClick(e){return e.preventDefault(),attrs.$set("contenteditable","true"),originalElement.focus()}function onFocus(e){if(noEscape=!0,options.focusSelect){var range=$window.document.createRange();range.selectNodeContents(originalElement),$window.getSelection().addRange(range)}options.renderHtml&&(originalElement.textContent=elem.html())}function onBlur(e){var html;return attrs.$set("contenteditable","false"),options.renderHtml&&noEscape?(html=originalElement.textContent.replace(/\u00a0/g," "),elem.html(html)):html=elem.html().replace(/ /g," "),html!=ngModel.$modelValue&&(ngModel.$setViewValue(html),scope.editCallback&&angular.isFunction(scope.editCallback))?scope.$apply(scope.editCallback(html,elem)):void 0}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 noEscape=!0,originalElement=elem[0],options=angular.copy(contentEditable);angular.forEach(options,function(val,key){key in attrs&&"undefined"!=typeof attrs[key]&&(options[key]=attrs[key])}),scope.ngModel||ngModel.$setViewValue(elem.html()),attrs.$addClass(options.editableClass),ngModel.$render=function(){elem.html(ngModel.$modelValue)},elem.bind("click",onClick),elem.bind("focus",onFocus),elem.bind("blur",onBlur),elem.bind("keydown",onKeyDown),scope.$on("$destroy",function(){elem.unbind(onClick),elem.unbind(onFocus),elem.unbind(onBlur)})}var directive={restrict:"A",require:"?ngModel",scope:{editCallback:"=",ngModel:"="},link:_link};return directive}).provider("contentEditable",function(){var defaults={editableClass:"editable",keyBindings:!0,singleLine:!1,focusSelect:!0,renderHtml:!1,editCallback:!1};this.configure=function(options){return angular.extend(defaults,options)},this.$get=function(){return defaults}});
angular.module("angular-content-editable",[]),angular.module("angular-content-editable").directive("contentEditable",["$log","$sce","$compile","$window","contentEditable",function($log,$sce,$compile,$window,contentEditable){function _link(scope,elem,attrs,ngModel){function onClick(e){return e.preventDefault(),attrs.$set("contenteditable","true"),originalElement.focus()}function onFocus(e){if(noEscape=!0,options.focusSelect){var range=$window.document.createRange();range.selectNodeContents(originalElement),$window.getSelection().addRange(range)}options.renderHtml&&(originalElement.textContent=elem.html())}function onBlur(e){var html;if(attrs.$set("contenteditable","false"),options.renderHtml&&noEscape?(html=originalElement.textContent.replace(/\u00a0/g," "),elem.html(html)):html=elem.html().replace(/ /g," "),html!=ngModel.$modelValue&&(ngModel.$setViewValue(html),scope.editCallback&&angular.isFunction(scope.editCallback)))return scope.$apply(scope.editCallback(html,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 noEscape=!0,originalElement=elem[0],options=angular.copy(contentEditable);angular.forEach(options,function(val,key){key in attrs&&"undefined"!=typeof attrs[key]&&(options[key]=attrs[key])}),scope.ngModel||ngModel.$setViewValue(elem.html()),attrs.$addClass(options.editableClass),ngModel.$render=function(){elem.html(ngModel.$modelValue||"")},elem.bind("click",onClick),elem.bind("focus",onFocus),elem.bind("blur",onBlur),elem.bind("keydown",onKeyDown),scope.$on("$destroy",function(){elem.unbind(onClick),elem.unbind(onFocus),elem.unbind(onBlur)})}var directive={restrict:"A",require:"?ngModel",scope:{editCallback:"=",ngModel:"="},link:_link};return directive}]),angular.module("angular-content-editable").provider("contentEditable",function(){var defaults={editableClass:"editable",keyBindings:!0,singleLine:!1,focusSelect:!0,renderHtml:!1,editCallback:!1};this.configure=function(options){return angular.extend(defaults,options)},this.$get=function(){return defaults}});

@@ -26,14 +26,27 @@ module.exports = function(grunt) {

watch: {
files: ['src/*'],
tasks: ['default'],
}
files: ['src/**/*.js'],
tasks: ['build'],
},
ngAnnotate: {
options: {
singleQuotes: true,
},
dist: {
files: {
'dist/<%= pkg.name %>.js': ['dist/<%= pkg.name %>.js']
}
},
},
})
grunt.loadNpmTasks('grunt-contrib-concat')
grunt.loadNpmTasks('grunt-contrib-uglify')
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-ng-annotate');
grunt.registerTask('default', ['concat:dist', 'uglify:dist'])
grunt.registerTask('default', ['watch']);
grunt.registerTask('build', ['concat', 'ngAnnotate', 'uglify']);
}
{
"name": "angular-content-editable",
"version": "1.1.0",
"version": "1.1.1",
"description": "modify in real time any html tag you want",

@@ -30,4 +30,5 @@ "main": "Gruntfile.js",

"grunt-contrib-uglify": "^0.9.2",
"grunt-contrib-watch": "^1.0.0"
"grunt-contrib-watch": "^1.0.0",
"grunt-ng-annotate": "^3.0.0"
}
}

@@ -15,11 +15,11 @@ # angular-content-editable

```html
<script type="text/javascript" src="content-editable.min.js"></script>
<script type="text/javascript" src="angular-content-editable.min.js"></script>
```
And finally add __content-editable__ to your module dependencies:
```javascript
angular.module('app', ['content-editable'])
angular.module('app', ['angular-content-editable'])
```
and you are ready to go, add the directive to any element you want:
```html
<a href="!#" content-editable>edit my text</a>
<a href="!#" ng-model="myModel" content-editable>edit my text</a>
```

@@ -59,7 +59,7 @@

```html
<h2 content-editable>Change me if you like.</h2>
<h2 ng-model="myModel" content-editable>Change me if you like.</h2>
```
With __single-line__ attribute, when enter key is pressed the editing will finish (no line-breaks):
```html
<div single-line="true" content-editable>Change me anyway.</div>
<div single-line="true" ng-model="myModel" content-editable>Change me anyway.</div>
```

@@ -69,7 +69,7 @@

```html
<span focus-select="true" content-editable>Change me!</span>
<span focus-select="true" ng-model="myModel" content-editable>Change me!</span>
```
With __edit-callback__ attribute if you passed a valid function it will run every time the model value is changed.
```html
<span focus-select="true" edit-callback="myFunc" content-editable>Change me!</span>
<span focus-select="true" edit-callback="myFunc" ng-model="myModel" content-editable>Change me!</span>
```

@@ -90,4 +90,4 @@ ```javascript

```bash
npm install npm i angular-content-editable
npm install
npm install angular-content-editable // install module files
npm install // install dependencies
```

@@ -94,0 +94,0 @@ Than a Gruntfile is ready with this actions:

@@ -0,173 +1,176 @@

angular.module('angular-content-editable')
.directive('contentEditable', function ($log,$sce,$compile,$window,contentEditable) {
var directive = {
restrict: 'A',
require: '?ngModel',
scope: { editCallback: '=', ngModel: '=' },
link: _link
}
var directive = {
restrict: 'A',
require: '?ngModel',
scope: { editCallback: '=', ngModel: '=' },
link: _link
}
return directive;
return directive;
function _link(scope, elem, attrs, ngModel) {
function _link(scope, elem, attrs, ngModel) {
// return if ng model not specified
if(!ngModel) {
$log.warn('Error: ngModel is required in elem: ', elem);
return;
}
// return if ng model not specified
if(!ngModel) {
$log.warn('Error: ngModel is required in elem: ', elem);
return;
}
var noEscape = true;
var originalElement = elem[0];
// get default usage options
var options = angular.copy(contentEditable);
// update options with attributes
angular.forEach(options, function (val, key) {
if( key in attrs && typeof attrs[key] !== 'undefined' ) { options[key] = attrs[key]; }
})
var noEscape = true;
var originalElement = elem[0];
// get default usage options
var options = angular.copy(contentEditable);
// update options with attributes
angular.forEach(options, function (val, key) {
if( key in attrs && typeof attrs[key] !== 'undefined' ) { options[key] = attrs[key]; }
})
// if model is invalid or null
// fill his value with elem html content
if( !scope.ngModel ) {
ngModel.$setViewValue( elem.html() );
}
// if model is invalid or null
// fill his value with elem html content
if( !scope.ngModel ) {
ngModel.$setViewValue( elem.html() );
}
// add editable class
attrs.$addClass(options.editableClass);
// add editable class
attrs.$addClass(options.editableClass);
// render always with model value
ngModel.$render = function() {
elem.html( ngModel.$modelValue )
}
// render always with model value
ngModel.$render = function() {
elem.html( ngModel.$modelValue || '' );
}
function onClick(e){
e.preventDefault();
attrs.$set('contenteditable', 'true');
return originalElement.focus();
}
// handle click on element
function onClick(e){
e.preventDefault();
attrs.$set('contenteditable', 'true');
return originalElement.focus();
}
// check some option extra
// conditions during focus
function onFocus(e) {
// turn on the flag
noEscape = true;
// select all on focus
if( options.focusSelect ) {
var range = $window.document.createRange();
range.selectNodeContents( originalElement );
$window.getSelection().addRange(range);
}
// if render-html is enabled convert
// all text content to plaintext
// in order to modify html tags
if( options.renderHtml ) {
originalElement.textContent = elem.html();
}
}
// check some option extra
// conditions during focus
function onFocus(e) {
// turn on the flag
noEscape = true;
// select all on focus
if( options.focusSelect ) {
var range = $window.document.createRange();
range.selectNodeContents( originalElement );
$window.getSelection().addRange(range);
}
// if render-html is enabled convert
// all text content to plaintext
// in order to modify html tags
if( options.renderHtml ) {
originalElement.textContent = elem.html();
}
}
function onBlur(e) {
function onBlur(e) {
// the text
var html;
// the text
var html;
// disable editability
attrs.$set('contenteditable', 'false');
// disable editability
attrs.$set('contenteditable', 'false');
// if text needs to be rendered as html
if( options.renderHtml && noEscape ) {
// get plain text html (with html tags)
// replace all blank spaces
html = originalElement.textContent.replace(/\u00a0/g, " ");
// update elem html value
elem.html(html);
// if text needs to be rendered as html
if( options.renderHtml && noEscape ) {
// get plain text html (with html tags)
// replace all blank spaces
html = originalElement.textContent.replace(/\u00a0/g, " ");
// update elem html value
elem.html(html);
} else {
// get element content replacing html tag
html = elem.html().replace(/&nbsp;/g, ' ');
}
} else {
// get element content replacing html tag
html = elem.html().replace(/&nbsp;/g, ' ');
}
// if element value is
// different from model value
if( html != ngModel.$modelValue ) {
// if element value is
// different from model value
if( html != ngModel.$modelValue ) {
/**
* This method should be called
* when a controller wants to
* change the view value
*/
ngModel.$setViewValue(html)
// if user passed a variable
// and is a function
if( scope.editCallback && angular.isFunction(scope.editCallback) ) {
// apply the callback
// with arguments: current text and element
return scope.$apply( scope.editCallback(html, elem) );
}
/**
* This method should be called
* when a controller wants to
* change the view value
*/
ngModel.$setViewValue(html)
// if user passed a variable
// and is a function
if( scope.editCallback && angular.isFunction(scope.editCallback) ) {
// apply the callback
// with arguments: current text and element
return scope.$apply( scope.editCallback(html, elem) );
}
}
}
}
}
function onKeyDown(e) {
function onKeyDown(e) {
// on tab key blur and
// TODO: focus to next
if( e.which == 9 ) {
originalElement.blur();
return;
}
// on tab key blur and
// TODO: focus to next
if( e.which == 9 ) {
originalElement.blur();
return;
}
// on esc key roll back value and blur
if( e.which == 27 ) {
ngModel.$rollbackViewValue();
noEscape = false;
return originalElement.blur();
}
// on esc key roll back value and blur
if( e.which == 27 ) {
ngModel.$rollbackViewValue();
noEscape = false;
return originalElement.blur();
}
// if single line or ctrl key is
// pressed trigger the blur event
if( e.which == 13 && (options.singleLine || e.ctrlKey) ) {
return originalElement.blur();
}
// if single line or ctrl key is
// pressed trigger the blur event
if( e.which == 13 && (options.singleLine || e.ctrlKey) ) {
return originalElement.blur();
}
}
}
/**
* On click turn the element
* to editable and focus it
*/
elem.bind('click', onClick);
/**
* On click turn the element
* to editable and focus it
*/
elem.bind('click', onClick);
/**
* On element focus
*/
elem.bind('focus', onFocus);
/**
* On element focus
*/
elem.bind('focus', onFocus);
/**
* On element blur turn off
* editable mode, if HTML, render
* update model value and run callback
* if specified
*/
elem.bind('blur', onBlur);
/**
* On element blur turn off
* editable mode, if HTML, render
* update model value and run callback
* if specified
*/
elem.bind('blur', onBlur);
/**
* Bind the keydown event for many functions
* TODO: more to come
*/
elem.bind('keydown', onKeyDown);
/**
* Bind the keydown event for many functions
* TODO: more to come
*/
elem.bind('keydown', onKeyDown);
/**
* On element destroy, remove all event
* listeners related to the directive
* (helps to prevent memory leaks)
*/
scope.$on('$destroy', function () {
elem.unbind(onClick);
elem.unbind(onFocus);
elem.unbind(onBlur);
})
/**
* On element destroy, remove all event
* listeners related to the directive
* (helps to prevent memory leaks)
*/
scope.$on('$destroy', function () {
elem.unbind(onClick);
elem.unbind(onFocus);
elem.unbind(onBlur);
})
}
}
})

@@ -1,1 +0,1 @@

angular.module('angular-content-editable', [])
angular.module('angular-content-editable', []);

@@ -0,1 +1,3 @@

angular.module('angular-content-editable')
/**

@@ -24,2 +26,2 @@ * Provider to setup the default

})
});

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc