| Index: trunk/parsers/wikidom/lib/synth/es.Surface.css |
| — | — | @@ -25,7 +25,9 @@ |
| 26 | 26 | -webkit-user-select: none; |
| 27 | 27 | } |
| 28 | 28 | |
| 29 | | -.editSurface-block { |
| | 29 | +.editSurface-tableBlock, |
| | 30 | +.editSurface-listBlock, |
| | 31 | +.editSurface-paragraphBlock { |
| 30 | 32 | margin: 1em; |
| 31 | 33 | margin-top: 0; |
| 32 | 34 | position: relative; |
| Index: trunk/parsers/wikidom/lib/synth/bases/es.ViewListItem.js |
| — | — | @@ -1,27 +1,17 @@ |
| 2 | 2 | /** |
| 3 | 3 | * Generic synchronized Object/Element container item. |
| | 4 | + * This will override this.$ (important in case of multiple inheritance). |
| 4 | 5 | * |
| 5 | 6 | * @class |
| 6 | 7 | * @constructor |
| 7 | 8 | * @extends {es.EventEmitter} |
| 8 | | - * @param typeName {String} Name to use in CSS classes and HTML element data |
| 9 | | - * @param tagName {String} HTML element name to use (optional, default: "div") |
| | 9 | + * @param $element {jQuery} jQuery object to use |
| 10 | 10 | * @property $ {jQuery} Container element |
| 11 | 11 | */ |
| 12 | | -es.ViewListItem = function( model, typeName, tagName ) { |
| | 12 | +es.ViewListItem = function( model, $element ) { |
| 13 | 13 | es.EventEmitter.call( this ); |
| 14 | 14 | this.model = model; |
| 15 | | - if ( typeof typeName !== 'string' ) { |
| 16 | | - typeName = 'viewListItem'; |
| 17 | | - } |
| 18 | | - if ( typeof tagName !== 'string' ) { |
| 19 | | - tagName = 'div'; |
| 20 | | - } |
| 21 | | - |
| 22 | | - if ( !this.$ ) { |
| 23 | | - this.$ = $( '<' + tagName + '/>' ); |
| 24 | | - } |
| 25 | | - this.$.addClass( 'editSurface-' + typeName ).data( typeName, this ); |
| | 15 | + this.$ = $element || $( '<div/>' ); |
| 26 | 16 | }; |
| 27 | 17 | |
| 28 | 18 | es.ViewListItem.prototype.getModel = function() { |
| — | — | @@ -29,7 +19,7 @@ |
| 30 | 20 | }; |
| 31 | 21 | |
| 32 | 22 | /** |
| 33 | | - * Gets the index of this item within it's container. |
| | 23 | + * Gets the index of this item within it's list. |
| 34 | 24 | * |
| 35 | 25 | * This method simply delegates to the model. |
| 36 | 26 | * |
| — | — | @@ -42,4 +32,4 @@ |
| 43 | 33 | |
| 44 | 34 | /* Inheritance */ |
| 45 | 35 | |
| 46 | | -es.extend( es.ViewListItem, es.EventEmitter ); |
| | 36 | +es.extend( es.ViewListItem, es.EventEmitter ); |
| \ No newline at end of file |
| Index: trunk/parsers/wikidom/lib/synth/bases/es.ViewList.js |
| — | — | @@ -1,8 +1,10 @@ |
| 2 | 2 | /** |
| 3 | 3 | * Creates an es.ViewList object. |
| 4 | 4 | * |
| 5 | | - * View containers follow the operations performed on a model container and keep a list of views, |
| 6 | | - * each correlating to a model in the model container. |
| | 5 | + * View lists follow the operations performed on a model lists and keep a list of views, |
| | 6 | + * each correlating to a model in the model list. |
| | 7 | + * |
| | 8 | + * This will override this.$ (important in case of multiple inheritance). |
| 7 | 9 | * |
| 8 | 10 | * @class |
| 9 | 11 | * @constructor |
| — | — | @@ -13,31 +15,25 @@ |
| 14 | 16 | * @property $ {jQuery} Container element |
| 15 | 17 | * @property items {Array} List of views, correlating to models in the model container |
| 16 | 18 | */ |
| 17 | | -es.ViewList = function( model, typeName, tagName ) { |
| | 19 | +es.ViewList = function( model, $element ) { |
| 18 | 20 | es.EventEmitter.call( this ); |
| 19 | 21 | this.model = model; |
| 20 | 22 | if ( !this.model ) { |
| 21 | 23 | return; |
| 22 | 24 | } |
| | 25 | + this.$ = $element || $( '<div/>' ); |
| 23 | 26 | this.items = new es.AggregateArray(); |
| 24 | | - if ( typeof typeName !== 'string' ) { |
| 25 | | - typeName = 'viewList'; |
| 26 | | - } |
| 27 | | - if ( typeof tagName !== 'string' ) { |
| 28 | | - tagName = 'div'; |
| 29 | | - } |
| 30 | | - if ( !this.$ ) { |
| 31 | | - this.$ = $( '<' + tagName + '/>' ); |
| 32 | | - } |
| 33 | | - this.$.addClass( 'editSurface-' + typeName ).data( typeName, this ); |
| 34 | | - var container = this; |
| | 27 | + |
| | 28 | + var list = this; |
| | 29 | + |
| 35 | 30 | this.relayUpdate = function() { |
| 36 | | - container.emit( 'update' ); |
| | 31 | + list.emit( 'update' ); |
| 37 | 32 | }; |
| 38 | | - function recycleItemView( itemModel, autoCreate ) { |
| 39 | | - var itemView = container.lookupItemView( itemModel ); |
| | 33 | + |
| | 34 | + this.recycleItemView = function( itemModel, autoCreate ) { |
| | 35 | + var itemView = list.lookupItemView( itemModel ); |
| 40 | 36 | if ( itemView ) { |
| 41 | | - container.views.splice( container.views.indexOf( itemView ), 1 ); |
| | 37 | + list.items.splice( list.items.indexOf( itemView ), 1 ); |
| 42 | 38 | itemView.$.detach(); |
| 43 | 39 | } |
| 44 | 40 | if ( autoCreate && itemView === null ) { |
| — | — | @@ -45,61 +41,63 @@ |
| 46 | 42 | } |
| 47 | 43 | return itemView; |
| 48 | 44 | } |
| | 45 | + |
| 49 | 46 | this.model.on( 'prepend', function( itemModel ) { |
| 50 | | - var itemView = recycleItemView( itemModel, true ); |
| 51 | | - itemView.on( 'update', container.relayUpdate ); |
| 52 | | - container.views.unshift( itemView ); |
| 53 | | - container.$.prepend( itemView.$ ); |
| 54 | | - container.emit( 'prepend', itemView ); |
| 55 | | - container.emit( 'update' ); |
| | 47 | + var itemView = list.recycleItemView( itemModel, true ); |
| | 48 | + itemView.on( 'update', list.relayUpdate ); |
| | 49 | + list.items.unshift( itemView ); |
| | 50 | + list.$.prepend( itemView.$ ); |
| | 51 | + list.emit( 'prepend', itemView ); |
| | 52 | + list.emit( 'update' ); |
| 56 | 53 | } ); |
| 57 | 54 | this.model.on( 'append', function( itemModel ) { |
| 58 | | - var itemView = recycleItemView( itemModel, true ); |
| 59 | | - itemView.on( 'update', container.relayUpdate ); |
| 60 | | - container.views.push( itemView ); |
| 61 | | - container.$.append( itemView.$ ); |
| 62 | | - container.emit( 'append', itemView ); |
| 63 | | - container.emit( 'update' ); |
| | 55 | + var itemView = list.recycleItemView( itemModel, true ); |
| | 56 | + itemView.on( 'update', list.relayUpdate ); |
| | 57 | + list.items.push( itemView ); |
| | 58 | + list.$.append( itemView.$ ); |
| | 59 | + list.emit( 'append', itemView ); |
| | 60 | + list.emit( 'update' ); |
| 64 | 61 | } ); |
| 65 | 62 | this.model.on( 'insertBefore', function( itemModel, beforeModel ) { |
| 66 | | - var beforeView = container.lookupItemView( beforeModel ), |
| 67 | | - itemView = recycleItemView( itemModel, true ); |
| 68 | | - itemView.on( 'update', container.relayUpdate ); |
| | 63 | + var beforeView = list.lookupItemView( beforeModel ), |
| | 64 | + itemView = list.recycleItemView( itemModel, true ); |
| | 65 | + itemView.on( 'update', list.relayUpdate ); |
| 69 | 66 | if ( beforeView ) { |
| 70 | | - container.views.splice( container.views.indexOf( beforeView ), 0, itemView ); |
| | 67 | + list.items.splice( list.items.indexOf( beforeView ), 0, itemView ); |
| 71 | 68 | itemView.$.insertBefore( beforeView.$ ); |
| 72 | 69 | } else { |
| 73 | | - container.views.unshift( itemView ); |
| 74 | | - container.$.prepend( itemView.$ ); |
| | 70 | + list.items.unshift( itemView ); |
| | 71 | + list.$.prepend( itemView.$ ); |
| 75 | 72 | } |
| 76 | | - container.emit( 'insertBefore', itemView, beforeView ); |
| 77 | | - container.emit( 'update' ); |
| | 73 | + list.emit( 'insertBefore', itemView, beforeView ); |
| | 74 | + list.emit( 'update' ); |
| 78 | 75 | } ); |
| 79 | 76 | this.model.on( 'insertAfter', function( itemModel, afterModel ) { |
| 80 | | - var afterView = container.lookupItemView( afterModel ), |
| 81 | | - itemView = recycleItemView( itemModel, true ); |
| 82 | | - itemView.on( 'update', container.relayUpdate ); |
| | 77 | + var afterView = list.lookupItemView( afterModel ), |
| | 78 | + itemView = list.recycleItemView( itemModel, true ); |
| | 79 | + itemView.on( 'update', list.relayUpdate ); |
| 83 | 80 | if ( afterView ) { |
| 84 | | - container.views.splice( container.views.indexOf( afterView ) + 1, 0, itemView ); |
| | 81 | + list.items.splice( list.items.indexOf( afterView ) + 1, 0, itemView ); |
| 85 | 82 | itemView.$.insertAfter( afterView.$ ); |
| 86 | 83 | } else { |
| 87 | | - container.views.push( itemView ); |
| 88 | | - container.$.append( itemView.$ ); |
| | 84 | + list.items.push( itemView ); |
| | 85 | + list.$.append( itemView.$ ); |
| 89 | 86 | } |
| 90 | | - container.emit( 'insertAfter', itemView, afterView ); |
| 91 | | - container.emit( 'update' ); |
| | 87 | + list.emit( 'insertAfter', itemView, afterView ); |
| | 88 | + list.emit( 'update' ); |
| 92 | 89 | } ); |
| 93 | 90 | this.model.on( 'remove', function( itemModel ) { |
| 94 | | - var itemView = recycleItemView( itemModel ); |
| 95 | | - itemView.removeListener( 'update', container.relayUpdate ); |
| 96 | | - container.emit( 'remove', itemView ); |
| 97 | | - container.emit( 'update' ); |
| | 91 | + var itemView = list.recycleItemView( itemModel ); |
| | 92 | + itemView.removeListener( 'update', list.relayUpdate ); |
| | 93 | + list.emit( 'remove', itemView ); |
| | 94 | + list.emit( 'update' ); |
| 98 | 95 | } ); |
| 99 | | - // Auto-add views for existing items |
| | 96 | + |
| | 97 | + // Auto-add items for existing items |
| 100 | 98 | var itemModels = this.model.all(); |
| 101 | 99 | for ( var i = 0; i < itemModels.length; i++ ) { |
| 102 | 100 | var itemView = itemModels[i].createView(); |
| 103 | | - itemView.on( 'update', container.relayUpdate ); |
| | 101 | + itemView.on( 'update', this.relayUpdate ); |
| 104 | 102 | this.items.push( itemView ); |
| 105 | 103 | this.$.append( itemView.$ ); |
| 106 | 104 | } |
| — | — | @@ -115,5 +113,4 @@ |
| 116 | 114 | }; |
| 117 | 115 | |
| 118 | 116 | /* Inheritance */ |
| 119 | | - |
| 120 | | -es.extend( es.ViewList, es.EventEmitter ); |
| | 117 | +es.extend( es.ViewList, es.EventEmitter ); |
| \ No newline at end of file |
| Index: trunk/parsers/wikidom/lib/synth/views/es.ListBlockItemView.js |
| — | — | @@ -5,7 +5,8 @@ |
| 6 | 6 | * @constructor |
| 7 | 7 | */ |
| 8 | 8 | es.ListBlockItemView = function( model ) { |
| 9 | | - es.ViewListItem.call( this, model, 'listItem' ); |
| | 9 | + es.ViewListItem.call( this, model ); |
| | 10 | + this.$.addClass( 'editSurface-listItem' ); |
| 10 | 11 | this.$icon = $( '<div class="editSurface-listItem-icon"></div>' ); |
| 11 | 12 | this.$content = $( '<div class="editSurface-listItem-content"></div>' ); |
| 12 | 13 | this.$ |
| Index: trunk/parsers/wikidom/lib/synth/views/es.ListBlockView.js |
| — | — | @@ -5,8 +5,9 @@ |
| 6 | 6 | * @constructor |
| 7 | 7 | */ |
| 8 | 8 | es.ListBlockView = function( model ) { |
| 9 | | - es.ViewList.call( this, model, 'list' ); |
| 10 | | - es.BlockView.call( this, model, 'list' ); |
| | 9 | + es.ViewList.call( this, model ); |
| | 10 | + es.BlockView.call( this, model, this.$ ); |
| | 11 | + this.$.addClass( 'editSurface-listBlock' ); |
| 11 | 12 | var view = this; |
| 12 | 13 | this.on( 'update', function() { |
| 13 | 14 | view.enumerate(); |
| Index: trunk/parsers/wikidom/lib/synth/views/es.BlockView.js |
| — | — | @@ -8,9 +8,8 @@ |
| 9 | 9 | * @param typeName {String} Name of block type (optional, default: "block") |
| 10 | 10 | * @param tagName {String} HTML tag name to use in rendering (optional, default: "div") |
| 11 | 11 | */ |
| 12 | | -es.BlockView = function( blockModel, typeName, tagName ) { |
| 13 | | - es.ViewListItem.call( this, blockModel, typeName || 'block', tagName || 'div' ); |
| 14 | | - this.$.addClass( 'editSurface-block' ); |
| | 12 | +es.BlockView = function( blockModel, $element ) { |
| | 13 | + es.ViewListItem.call( this, blockModel, $element ); |
| 15 | 14 | }; |
| 16 | 15 | |
| 17 | 16 | /** |
| Index: trunk/parsers/wikidom/lib/synth/views/es.TableBlockRowView.js |
| — | — | @@ -5,8 +5,8 @@ |
| 6 | 6 | * @constructor |
| 7 | 7 | */ |
| 8 | 8 | es.TableBlockRowView = function( model ) { |
| 9 | | - es.ViewList.call( this, model, 'row', 'tr' ) |
| 10 | | - es.ViewListItem.call( this, model, 'tr' ); |
| | 9 | + es.ViewList.call( this, model, $( '<tr>' ) ); |
| | 10 | + es.ViewListItem.call( this, model, this.$ ); |
| 11 | 11 | |
| 12 | 12 | var classes = this.$.attr('class'); |
| 13 | 13 | for ( var name in this.model.attributes ) { |
| Index: trunk/parsers/wikidom/lib/synth/views/es.DocumentView.js |
| — | — | @@ -5,7 +5,8 @@ |
| 6 | 6 | * @constructor |
| 7 | 7 | */ |
| 8 | 8 | es.DocumentView = function( documentModel ) { |
| 9 | | - es.ViewList.call( this, documentModel, 'document' ); |
| | 9 | + es.ViewList.call( this, documentModel ); |
| | 10 | + this.$.addClass( 'editSurface-document' ) |
| 10 | 11 | }; |
| 11 | 12 | |
| 12 | 13 | /** |
| Index: trunk/parsers/wikidom/lib/synth/views/es.ParagraphBlockView.js |
| — | — | @@ -5,7 +5,10 @@ |
| 6 | 6 | * @constructor |
| 7 | 7 | */ |
| 8 | 8 | es.ParagraphBlockView = function( model ) { |
| 9 | | - es.BlockView.call( this, model, 'paragraph' ); |
| | 9 | + es.BlockView.call( this, model ); |
| | 10 | + |
| | 11 | + this.$.addClass( 'editSurface-paragraphBlock' ); |
| | 12 | + |
| 10 | 13 | this.contentView = new es.ContentView( this.$, this.model.content ); |
| 11 | 14 | var view = this; |
| 12 | 15 | this.contentView.on( 'update', function() { |
| Index: trunk/parsers/wikidom/lib/synth/views/es.TableBlockCellView.js |
| — | — | @@ -5,7 +5,7 @@ |
| 6 | 6 | * @constructor |
| 7 | 7 | */ |
| 8 | 8 | es.TableBlockCellView = function( model ) { |
| 9 | | - es.ViewListItem.call( this, model, 'cell', 'td' ); |
| | 9 | + es.ViewListItem.call( this, model, $( '<td>' ) ); |
| 10 | 10 | |
| 11 | 11 | this.documentView = new es.DocumentView( this.model.documentModel ); |
| 12 | 12 | this.$.append( this.documentView.$ ); |
| Index: trunk/parsers/wikidom/lib/synth/views/es.TableBlockView.js |
| — | — | @@ -5,14 +5,12 @@ |
| 6 | 6 | * @constructor |
| 7 | 7 | */ |
| 8 | 8 | es.TableBlockView = function( model ) { |
| 9 | | - es.ViewList.call( this, model, 'table', 'table' ); |
| 10 | | - es.BlockView.call( this, model, 'table', 'table' ); |
| 11 | | - |
| 12 | | - var classes = this.$.attr('class'); |
| | 9 | + es.ViewList.call( this, model, $( '<table>' ) ); |
| | 10 | + es.BlockView.call( this, model, this.$ ); |
| 13 | 11 | for ( var name in this.model.attributes ) { |
| 14 | 12 | this.$.attr( name, this.model.attributes[name] ); |
| 15 | 13 | } |
| 16 | | - this.$.addClass(classes); |
| | 14 | + this.$.addClass( 'editSurface-tableBlock' ); |
| 17 | 15 | }; |
| 18 | 16 | |
| 19 | 17 | /** |