",element.content.preserveWhitespace()),element.content=tip.concat(br,tail),element.updateInnerHTML(),element.taint(),selection.set(cursor,cursor),element.selection(selection),callback(!0)},LineBreak}(ContentTools.Tool),ContentTools.Tools.Image=function(_super){function Image(){return Image.__super__.constructor.apply(this,arguments) 8 | }return __extends(Image,_super),ContentTools.ToolShelf.stow(Image,"image"),Image.label="Image",Image.icon="image",Image.canApply=function(){return!0},Image.apply=function(element,selection,callback){var app,dialog,modal;return element.storeState&&element.storeState(),app=ContentTools.EditorApp.get(),modal=new ContentTools.ModalUI,dialog=new ContentTools.ImageDialog,dialog.bind("cancel",function(){return function(){return dialog.unbind("cancel"),modal.hide(),dialog.hide(),element.restoreState&&element.restoreState(),callback(!1)}}(this)),dialog.bind("save",function(_this){return function(imageURL,imageSize,imageAttrs){var image,index,node,_ref;return dialog.unbind("save"),imageAttrs||(imageAttrs={}),imageAttrs.height=imageSize[1],imageAttrs.src=imageURL,imageAttrs.width=imageSize[0],image=new ContentEdit.Image(imageAttrs),_ref=_this._insertAt(element),node=_ref[0],index=_ref[1],node.parent().attach(image,index),image.focus(),modal.hide(),dialog.hide(),callback(!0)}}(this)),app.attach(modal),app.attach(dialog),modal.show(),dialog.show()},Image}(ContentTools.Tool),ContentTools.Tools.Video=function(_super){function Video(){return Video.__super__.constructor.apply(this,arguments)}return __extends(Video,_super),ContentTools.ToolShelf.stow(Video,"video"),Video.label="Video",Video.icon="video",Video.canApply=function(){return!0},Video.apply=function(element,selection,callback){var app,dialog,modal;return element.storeState&&element.storeState(),app=ContentTools.EditorApp.get(),modal=new ContentTools.ModalUI,dialog=new ContentTools.VideoDialog,dialog.bind("cancel",function(){return function(){return dialog.unbind("cancel"),modal.hide(),dialog.hide(),element.restoreState&&element.restoreState(),callback(!1)}}(this)),dialog.bind("save",function(_this){return function(videoURL){var index,node,video,_ref;return dialog.unbind("save"),videoURL?(video=new ContentEdit.Video("iframe",{frameborder:0,height:ContentTools.DEFAULT_VIDEO_HEIGHT,src:videoURL,width:ContentTools.DEFAULT_VIDEO_WIDTH}),_ref=_this._insertAt(element),node=_ref[0],index=_ref[1],node.parent().attach(video,index),video.focus()):element.restoreState&&element.restoreState(),modal.hide(),dialog.hide(),callback(""!==videoURL)}}(this)),app.attach(modal),app.attach(dialog),modal.show(),dialog.show()},Video}(ContentTools.Tool),ContentTools.Tools.Undo=function(_super){function Undo(){return Undo.__super__.constructor.apply(this,arguments)}return __extends(Undo,_super),ContentTools.ToolShelf.stow(Undo,"undo"),Undo.label="Undo",Undo.icon="undo",Undo.canApply=function(){var app;return app=ContentTools.EditorApp.get(),app.history&&app.history.canUndo()},Undo.apply=function(){var app,snapshot;return app=ContentTools.EditorApp.get(),app.history.stopWatching(),snapshot=app.history.undo(),app.revertToSnapshot(snapshot),app.history.watch()},Undo}(ContentTools.Tool),ContentTools.Tools.Redo=function(_super){function Redo(){return Redo.__super__.constructor.apply(this,arguments)}return __extends(Redo,_super),ContentTools.ToolShelf.stow(Redo,"redo"),Redo.label="Redo",Redo.icon="redo",Redo.canApply=function(){var app;return app=ContentTools.EditorApp.get(),app.history&&app.history.canRedo()},Redo.apply=function(){var app,snapshot;return app=ContentTools.EditorApp.get(),app.history.stopWatching(),snapshot=app.history.redo(),app.revertToSnapshot(snapshot),app.history.watch()},Redo}(ContentTools.Tool),ContentTools.Tools.Remove=function(_super){function Remove(){return Remove.__super__.constructor.apply(this,arguments)}return __extends(Remove,_super),ContentTools.ToolShelf.stow(Remove,"remove"),Remove.label="Remove",Remove.icon="remove",Remove.canApply=function(){return!0},Remove.apply=function(element,selection,callback){var app,list,row,table;switch(app=ContentTools.EditorApp.get(),element.blur(),element.constructor.name){case"ListItemText":app.ctrlDown()?(list=element.closest(function(node){return"Region"===node.parent().constructor.name}),list.parent().detach(list)):element.parent().parent().detach(element.parent());break;case"TableCellText":app.ctrlDown()?(table=element.closest(function(node){return"Table"===node.constructor.name}),table.parent().detach(table)):(row=element.parent().parent(),row.parent().detach(row));break;default:element.parent().detach(element)}return callback(!0)},Remove}(ContentTools.Tool)}.call(this); -------------------------------------------------------------------------------- /contenttools-build/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guillaumepiot/contenttools-angularjs/396fea4dec621d6a03bb467f20b3e09790fd2120/contenttools-build/icons.woff -------------------------------------------------------------------------------- /contenttools-build/images/ce-drop-above.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guillaumepiot/contenttools-angularjs/396fea4dec621d6a03bb467f20b3e09790fd2120/contenttools-build/images/ce-drop-above.png -------------------------------------------------------------------------------- /contenttools-build/images/ce-drop-below.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guillaumepiot/contenttools-angularjs/396fea4dec621d6a03bb467f20b3e09790fd2120/contenttools-build/images/ce-drop-below.png -------------------------------------------------------------------------------- /contenttools-build/images/ce-drop-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guillaumepiot/contenttools-angularjs/396fea4dec621d6a03bb467f20b3e09790fd2120/contenttools-build/images/ce-drop-left.png -------------------------------------------------------------------------------- /contenttools-build/images/ce-drop-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guillaumepiot/contenttools-angularjs/396fea4dec621d6a03bb467f20b3e09790fd2120/contenttools-build/images/ce-drop-right.png -------------------------------------------------------------------------------- /contenttools-build/images/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guillaumepiot/contenttools-angularjs/396fea4dec621d6a03bb467f20b3e09790fd2120/contenttools-build/images/video.png -------------------------------------------------------------------------------- /image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/guillaumepiot/contenttools-angularjs/396fea4dec621d6a03bb467f20b3e09790fd2120/image.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
Content Tools & Angular JS
18 |19 |
5 rules for naming variables
22 | 23 |24 | by Anthony Blackshaw · 18th January 2015 25 |
26 | 27 |28 | Writing poor quality code will dramatically reduce the time 29 | you get to spend doing things you love, if you’re lucky 30 | enough to leave a project shortly after such a contribution 31 | everyone who subsequently has to work with your code will 32 | think you an arsehole. 33 |34 | 35 |
36 | 
37 |
44 |
45 |
37 |
38 | Above: This example is code found in
39 | a live and commercial project. Clearly the developer thought
40 | user.n5 would still clearly point to the 5th
41 | character of a the user's name when used elsewhere.
42 |
43 | 46 | The names we devise for folders, files, variables, 47 | functions, classes and any other user definable construct 48 | will (for the most part) determine how easily someone else 49 | can read and understand what we have written. 50 |
51 | 52 |53 | To avoid repetition in the remainder of this section we use 54 | the term variable to cover folders, files, variables, 55 | functions, and classes. 56 |
57 | 58 || # | 62 |First Name | 63 |Last Name | 64 |Username | 65 |
|---|---|---|---|
| 1 | 70 |Mark | 71 |Otto | 72 |@mdo | 73 |
| 2 | 76 |Jacob | 77 |Thornton | 78 |@fat | 79 |
| 3 | 82 |Larry | 83 |the Bird | 84 |
You can have another editable area on the same page
92 |Another content....
93 |
95 |
99 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "contenttools-angularjs",
3 | "version": "1.0.0",
4 | "description": "A demo integration for Content Tools JS & Angular JS",
5 | "main": "Gruntfile.js",
6 | "dependencies": {
7 | "serve": "^1.4.0"
8 | },
9 | "devDependencies": {
10 | "grunt": "^0.4.5",
11 | "grunt-contrib-connect": "^0.11.2"
12 | },
13 | "scripts": {
14 | "test": "echo \"Error: no test specified\" && exit 1"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/Cotidia/contenttools-angularjs.git"
19 | },
20 | "keywords": [
21 | "content",
22 | "tools",
23 | "angular",
24 | "js"
25 | ],
26 | "author": "Guillaume Piot",
27 | "license": "ISC",
28 | "bugs": {
29 | "url": "https://github.com/Cotidia/contenttools-angularjs/issues"
30 | },
31 | "homepage": "https://github.com/Cotidia/contenttools-angularjs"
32 | }
33 |
--------------------------------------------------------------------------------
/sandbox.js:
--------------------------------------------------------------------------------
1 | angular.module('editorApp', [])
2 | .directive('ngEditor',['$compile', function($compile){
3 |
4 | function link(scope, element, attrs){
5 |
6 | // Initialise the editor
7 | editor = new ContentTools.EditorApp.get()
8 | editor.init('[ng-editor]', 'ng-editor')
9 |
10 | // Bind a function on editor save
11 | editor.bind('save', function(regions, autoSave){
12 |
13 | scope.$apply(function(){
14 | scope.regions = regions;
15 | });
16 |
17 | // "regions" contains all the html for each editable regions
18 | // Now, "regions" can be saved and used as needed.
19 |
20 | })
21 |
22 |
23 |
24 | // Capture element changes
25 | ContentEdit.Root.get().bind('taint', function (elm) {
26 |
27 | // If it has a parent, it is not a Region and will have "attr"
28 | if (elm.parent()) {
29 | if (elm.attr('ng-test')){
30 | console.log("Reload directive");
31 |
32 | elm.selection(new ContentSelect.Range(0, 0));
33 | $compile(element.contents())(scope);
34 | }
35 | }
36 |
37 | });
38 |
39 |
40 | }
41 |
42 | return {
43 | link: link
44 | }
45 |
46 | }])
47 | .directive('ngTest', function(){
48 |
49 | return {
50 | compile: function(element, attrs){
51 | var htmlText = 'test';
52 | console.log(element.child)
53 | element.html(htmlText);
54 | },
55 | link: function (scope, element) {
56 | console.log("Scope loaded")
57 | }
58 | }
59 |
60 | })
--------------------------------------------------------------------------------
JSON Output from Content Tools
96 | 97 | {{regions}} 98 |