Skip to content

Commit

Permalink
Merge branch 'SpinGo-master'
Browse files Browse the repository at this point in the history
  • Loading branch information
@thijsw
thijsw committed Nov 23, 2015
2 parents 1683d0f + 9ee98f0 commit ee2e19e
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 129 deletions.
4 changes: 2 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "angular-medium-editor",
"version": "0.1.1",
"version": "1.1.0",
"dependencies": {
"angular": "1.3.*",
"medium-editor": "4.4.*"
"medium-editor": "5.*"
},
"main": "./dist/angular-medium-editor.js"
}
39 changes: 39 additions & 0 deletions demo/interactive.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="UTF-8">
<title>angularjs medium editor | demo</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../bower_components/medium-editor/dist/css/medium-editor.css">
<link rel="stylesheet" href="../bower_components/medium-editor/dist/css/themes/default.css">
<style>
</style>
</head>
<body>
<div id="container" ng-controller="demo">
<h1>Medium Editor for AngularJS</h1>
<h2>Type Here:</h2>
<form name="demo">
<div name="text" ng-model="text" required medium-editor bind-options="{'placeholder': {text: 'This is a placeholder'},
'buttons': ['bold', 'italic', 'underline', 'header1', 'header2', 'quote', 'orderedlist', 'unorderedlist']}"></div>
</form>
<button type="button" ng-click="text=''">Clear</button>
<h2>Validation:</h2>
<pre>{{demo.text.$error}}</pre>
<h2>Model:</h2>
<pre>{{text}}</pre>
</div>

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/medium-editor/dist/js/medium-editor.js"></script>
<script src="../dist/angular-medium-editor.js"></script>
<script >
angular.module('demo', ['angular-medium-editor'])
.controller('demo', ['$scope', function($scope) {
$scope.text = 'This text gets is shown via .$render()';
}]);

</script>
</body>
</html>
91 changes: 29 additions & 62 deletions dist/angular-medium-editor.js
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,51 @@
/*global MediumEditor */
'use strict';

angular.module('angular-medium-editor', [])

.directive('mediumEditor', function() {

function toInnerText(value) {
var tempEl = document.createElement('div'),
text;
tempEl.innerHTML = value;
text = tempEl.textContent || '';
return text.trim();
}

return {
require: 'ngModel',
restrict: 'AE',
scope: { bindOptions: '=' },
link: function(scope, iElement, iAttrs, ctrl) {
link: function(scope, iElement, iAttrs, ngModel) {

angular.element(iElement).addClass('angular-medium-editor');

// Parse options
var opts = {},
placeholder = '';
var prepOpts = function() {
if (iAttrs.options) {
opts = scope.$eval(iAttrs.options);
}
var bindOpts = {};
if (scope.bindOptions !== undefined) {
bindOpts = scope.bindOptions;
}
opts = angular.extend(opts, bindOpts);
};
prepOpts();
placeholder = opts.placeholder;
scope.$watch('bindOptions', function() {
// in case options are provided after mediumEditor directive has been compiled and linked (and after $render function executed)
// we need to re-initialize
if (ctrl.editor) {
ctrl.editor.destroy();
}
prepOpts();
// Hide placeholder when the model is not empty
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
opts.placeholder = '';
}
ctrl.editor = new MediumEditor(iElement, opts);
});

var onChange = function() {

scope.$apply(function() {
// Global MediumEditor
ngModel.editor = new MediumEditor(iElement, scope.bindOptions);

// If user cleared the whole text, we have to reset the editor because MediumEditor
// lacks an API method to alter placeholder after initialization
if (iElement.html() === '<p><br></p>' || iElement.html() === '') {
opts.placeholder = placeholder;
var editor = new MediumEditor(iElement, opts);
}

ctrl.$setViewValue(iElement.html());
});
ngModel.$render = function() {
iElement.html(ngModel.$viewValue || "");
ngModel.editor.getExtensionByName('placeholder').updatePlaceholder(iElement[0]);
};

// view -> model
iElement.on('blur', onChange);
iElement.on('input', onChange);
iElement.on('paste', onChange);

// model -> view
ctrl.$render = function() {

if (!this.editor) {
// Hide placeholder when the model is not empty
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
opts.placeholder = '';
}

this.editor = new MediumEditor(iElement, opts);
ngModel.$isEmpty = function(value) {
if (/[<>]/.test(value)) {
return toInnerText(value).length === 0;
} else if (value) {
return value.length === 0;
} else {
return true;
}

iElement.html(ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue);

// hide placeholder when view is not empty
if(!ctrl.$isEmpty(ctrl.$viewValue)) angular.element(iElement).removeClass('medium-editor-placeholder');
};

ngModel.editor.subscribe('editableInput', function (event, editable) {
ngModel.$setViewValue(editable.innerHTML.trim());
});

scope.$watch('bindOptions', function(bindOptions) {
ngModel.editor.init(iElement, bindOptions);
});
}
};

Expand Down
4 changes: 2 additions & 2 deletions dist/angular-medium-editor.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-medium-editor",
"version": "0.1.1",
"version": "1.1.0",
"description": "AngularJS directive for Medium.com editor clone",
"keywords": [
"angular",
Expand Down
91 changes: 29 additions & 62 deletions src/angular-medium-editor.js
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,51 @@
/*global MediumEditor */
'use strict';

angular.module('angular-medium-editor', [])

.directive('mediumEditor', function() {

function toInnerText(value) {
var tempEl = document.createElement('div'),
text;
tempEl.innerHTML = value;
text = tempEl.textContent || '';
return text.trim();
}

return {
require: 'ngModel',
restrict: 'AE',
scope: { bindOptions: '=' },
link: function(scope, iElement, iAttrs, ctrl) {
link: function(scope, iElement, iAttrs, ngModel) {

angular.element(iElement).addClass('angular-medium-editor');

// Parse options
var opts = {},
placeholder = '';
var prepOpts = function() {
if (iAttrs.options) {
opts = scope.$eval(iAttrs.options);
}
var bindOpts = {};
if (scope.bindOptions !== undefined) {
bindOpts = scope.bindOptions;
}
opts = angular.extend(opts, bindOpts);
};
prepOpts();
placeholder = opts.placeholder;
scope.$watch('bindOptions', function() {
// in case options are provided after mediumEditor directive has been compiled and linked (and after $render function executed)
// we need to re-initialize
if (ctrl.editor) {
ctrl.editor.destroy();
}
prepOpts();
// Hide placeholder when the model is not empty
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
opts.placeholder = '';
}
ctrl.editor = new MediumEditor(iElement, opts);
});

var onChange = function() {

scope.$apply(function() {
// Global MediumEditor
ngModel.editor = new MediumEditor(iElement, scope.bindOptions);

// If user cleared the whole text, we have to reset the editor because MediumEditor
// lacks an API method to alter placeholder after initialization
if (iElement.html() === '<p><br></p>' || iElement.html() === '') {
opts.placeholder = placeholder;
var editor = new MediumEditor(iElement, opts);
}

ctrl.$setViewValue(iElement.html());
});
ngModel.$render = function() {
iElement.html(ngModel.$viewValue || "");
ngModel.editor.getExtensionByName('placeholder').updatePlaceholder(iElement[0]);
};

// view -> model
iElement.on('blur', onChange);
iElement.on('input', onChange);
iElement.on('paste', onChange);

// model -> view
ctrl.$render = function() {

if (!this.editor) {
// Hide placeholder when the model is not empty
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
opts.placeholder = '';
}

this.editor = new MediumEditor(iElement, opts);
ngModel.$isEmpty = function(value) {
if (/[<>]/.test(value)) {
return toInnerText(value).length === 0;
} else if (value) {
return value.length === 0;
} else {
return true;
}

iElement.html(ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue);

// hide placeholder when view is not empty
if(!ctrl.$isEmpty(ctrl.$viewValue)) angular.element(iElement).removeClass('medium-editor-placeholder');
};

ngModel.editor.subscribe('editableInput', function (event, editable) {
ngModel.$setViewValue(editable.innerHTML.trim());
});

scope.$watch('bindOptions', function(bindOptions) {
ngModel.editor.init(iElement, bindOptions);
});
}
};

Expand Down

1 comment on commit ee2e19e

@brazorf
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you referred the wrong pull request on the 1.1.0 release notes, you mentioned #42

Please sign in to comment.