| Index: trunk/extensions/VisualEditor/modules/es/tools/es.AnnotationButtonTool.js |
| — | — | @@ -43,5 +43,11 @@ |
| 44 | 44 | data: { 'type': 'textStyle/italic' }
|
| 45 | 45 | };
|
| 46 | 46 |
|
| | 47 | +es.Tool.tools.link = {
|
| | 48 | + constructor: es.AnnotationButtonTool,
|
| | 49 | + name: 'link',
|
| | 50 | + data: { 'type': 'link/internal', 'data': { 'title': '' } }
|
| | 51 | +};
|
| 47 | 52 |
|
| | 53 | +
|
| 48 | 54 | es.extendClass( es.AnnotationButtonTool, es.ButtonTool ); |
| \ No newline at end of file |
| Index: trunk/extensions/VisualEditor/modules/es/styles/es.ToolbarView.css |
| — | — | @@ -67,6 +67,9 @@ |
| 68 | 68 | .es-toolbarButtonTool-italic:before { |
| 69 | 69 | background-image: url(../images/italic.png); |
| 70 | 70 | } |
| | 71 | +.es-toolbarButtonTool-link:before { |
| | 72 | + background-image: url(../images/link.png); |
| | 73 | +} |
| 71 | 74 | .es-toolbarButtonTool-clear:before { |
| 72 | 75 | background-image: url(../images/clear.png); |
| 73 | 76 | } |
| — | — | @@ -74,6 +77,8 @@ |
| 75 | 78 | -moz-opacity: 0.25; |
| 76 | 79 | filter:alpha(opacity=25); |
| 77 | 80 | opacity: 0.25; |
| | 81 | +.es-toolbarButtonTool-clear:before { |
| | 82 | + background-image: url(../images/clear.png); |
| 78 | 83 | } |
| 79 | 84 | .es-toolbarDropdownTool { |
| 80 | 85 | } |
| Index: trunk/extensions/VisualEditor/modules/es/styles/es.ContextView.css |
| — | — | @@ -45,8 +45,7 @@ |
| 46 | 46 | border-color: #b3d6f6; |
| 47 | 47 | } |
| 48 | 48 | |
| 49 | | -.es-contextView-menu { |
| 50 | | - display: none; |
| | 49 | +.es-contextView-container { |
| 51 | 50 | position: absolute; |
| 52 | 51 | border: solid 1px #cccccc; |
| 53 | 52 | -webkit-border-radius: 0.25em; |
| — | — | @@ -60,19 +59,23 @@ |
| 61 | 60 | padding: 0.33em 0; |
| 62 | 61 | } |
| 63 | 62 | |
| 64 | | -.es-contextView-position-above .es-contextView-menu { |
| | 63 | +.es-contextView-container { |
| | 64 | + display: none; |
| | 65 | +} |
| | 66 | + |
| | 67 | +.es-contextView-position-above .es-contextView-container { |
| 65 | 68 | bottom: -4px; |
| 66 | 69 | } |
| 67 | 70 | |
| 68 | | -.es-contextView-position-below .es-contextView-menu { |
| | 71 | +.es-contextView-position-below .es-contextView-container { |
| 69 | 72 | top: 3px; |
| 70 | 73 | } |
| 71 | 74 | |
| 72 | | -.es-contextView-position-left .es-contextView-menu { |
| | 75 | +.es-contextView-position-left .es-contextView-container { |
| 73 | 76 | left: -1px; |
| 74 | 77 | } |
| 75 | 78 | |
| 76 | | -.es-contextView-position-right .es-contextView-menu { |
| | 79 | +.es-contextView-position-right .es-contextView-container { |
| 77 | 80 | right: -1px; |
| 78 | 81 | } |
| 79 | 82 | |
| — | — | @@ -95,3 +98,11 @@ |
| 96 | 99 | .es-contextView-menuItem:hover { |
| 97 | 100 | background-color: #b3d6f6; |
| 98 | 101 | } |
| | 102 | + |
| | 103 | +.es-contextView-panels { |
| | 104 | +} |
| | 105 | + |
| | 106 | +.es-contextView-panel { |
| | 107 | + display: none; |
| | 108 | + padding: 1em; |
| | 109 | +} |
| Index: trunk/extensions/VisualEditor/modules/es/views/es.ContextView.js |
| — | — | @@ -9,9 +9,13 @@ |
| 10 | 10 | this.surfaceView = surfaceView; |
| 11 | 11 | this.$ = $( '<div class="es-contextView"></div>' ).appendTo( $overlay || $( 'body' ) ); |
| 12 | 12 | this.$toolbar = $( '<div class="es-contextView-menuSection"></div>' ); |
| | 13 | + this.$container = $( '<div class="es-contextView-container"></div>' ) |
| | 14 | + .appendTo( this.$ ); |
| 13 | 15 | this.$menu = $( '<div class="es-contextView-menu"></div>' ) |
| 14 | 16 | .append( this.$toolbar ) |
| 15 | | - .appendTo( this.$ ); |
| | 17 | + .appendTo( this.$container ); |
| | 18 | + this.$panels = $( '<div class="es-contextView-panels"></div>' ) |
| | 19 | + .appendTo( this.$container ); |
| 16 | 20 | this.$icon = $( '<div class="es-contextView-icon"></div>' ) |
| 17 | 21 | .appendTo( this.$ ); |
| 18 | 22 | this.toolbarView = new es.ToolbarView( |
| — | — | @@ -23,16 +27,38 @@ |
| 24 | 28 | // Example menu items |
| 25 | 29 | this.$menu.append( |
| 26 | 30 | '<div class="es-contextView-menuItem-break"></div>' + |
| | 31 | + '<div class="es-contextView-menuItem" rel="link">Link to...</div>' + |
| | 32 | + '<div class="es-contextView-menuItem-break"></div>' + |
| 27 | 33 | '<div class="es-contextView-menuItem">Copy</div>' + |
| 28 | 34 | '<div class="es-contextView-menuItem">Cut</div>' + |
| 29 | 35 | '<div class="es-contextView-menuItem">Paste</div>' |
| 30 | 36 | ); |
| 31 | 37 | |
| | 38 | + this.$panels.append( |
| | 39 | + '<div class="es-contextView-panel" rel="link">' + |
| | 40 | + '<div><label>Page title or URL <input type="text"></label></div>' + |
| | 41 | + '<div><a href="#cancel">Cancel</a> <button>Change</button></div>' + |
| | 42 | + '</div>' |
| | 43 | + ); |
| | 44 | + |
| 32 | 45 | // Events |
| 33 | 46 | var _this = this; |
| 34 | 47 | this.$icon.click( function() { |
| 35 | | - _this.$menu.toggle(); |
| | 48 | + _this.$container.toggle(); |
| 36 | 49 | } ); |
| | 50 | + |
| | 51 | + this.$menu.find( '[rel="link"]' ).click( function() { |
| | 52 | + _this.$menu.hide(); |
| | 53 | + _this.$panels.find( '[rel="link"]' ).show(); |
| | 54 | + _this.$panels.find( '[rel="link"] input:first' ).focus(); |
| | 55 | + } ); |
| | 56 | + this.$panels.find( 'button, [href="#cancel"]' ).click( function() { |
| | 57 | + _this.$menu.show(); |
| | 58 | + _this.$panels.children().hide(); |
| | 59 | + _this.$container.toggle(); |
| | 60 | + _this.surfaceView.$input.focus(); |
| | 61 | + return false; |
| | 62 | + } ); |
| 37 | 63 | }; |
| 38 | 64 | |
| 39 | 65 | /* Methods */ |
| — | — | @@ -44,6 +70,7 @@ |
| 45 | 71 | }; |
| 46 | 72 | |
| 47 | 73 | es.ContextView.prototype.set = function() { |
| | 74 | + |
| 48 | 75 | this.$.removeClass( |
| 49 | 76 | 'es-contextView-position-below es-contextView-position-above ' + |
| 50 | 77 | 'es-contextView-position-left es-contextView-position-right ' + |
| — | — | @@ -70,12 +97,12 @@ |
| 71 | 98 | } |
| 72 | 99 | } |
| 73 | 100 | if ( position ) { |
| 74 | | - if ( position.left + this.$menu.width() < $( 'body' ).width() ) { |
| | 101 | + if ( position.left + this.$container.width() < $( 'body' ).width() ) { |
| 75 | 102 | this.$.addClass( 'es-contextView-position-left' ); |
| 76 | 103 | } else { |
| 77 | 104 | this.$.addClass( 'es-contextView-position-right' ); |
| 78 | 105 | } |
| 79 | | - if ( position.top + this.$menu.height() < $( window ).height() + $( window ).scrollTop() ) { |
| | 106 | + if ( position.top + this.$container.height() < $( window ).height() + $( window ).scrollTop() ) { |
| 80 | 107 | this.$.addClass( 'es-contextView-position-below' ); |
| 81 | 108 | } else { |
| 82 | 109 | this.$.addClass( 'es-contextView-position-above' ); |
| — | — | @@ -87,5 +114,5 @@ |
| 88 | 115 | |
| 89 | 116 | es.ContextView.prototype.clear = function() { |
| 90 | 117 | this.$icon.hide(); |
| 91 | | - this.$menu.hide(); |
| | 118 | + this.$container.hide(); |
| 92 | 119 | }; |
| Index: trunk/extensions/VisualEditor/modules/es/views/es.ContentView.js |
| — | — | @@ -229,23 +229,29 @@ |
| 230 | 230 | |
| 231 | 231 | if ( fromLineIndex === toLineIndex ) { |
| 232 | 232 | // Single line selection |
| 233 | | - this.$rangeStart.css( { |
| 234 | | - 'top': fromPosition.top, |
| 235 | | - 'left': fromPosition.left, |
| 236 | | - 'width': toPosition.left - fromPosition.left, |
| 237 | | - 'height': fromPosition.bottom - fromPosition.top |
| 238 | | - } ).show(); |
| | 233 | + if ( toPosition.left - fromPosition.left ) { |
| | 234 | + this.$rangeStart.css( { |
| | 235 | + 'top': fromPosition.top, |
| | 236 | + 'left': fromPosition.left, |
| | 237 | + 'width': toPosition.left - fromPosition.left, |
| | 238 | + 'height': fromPosition.bottom - fromPosition.top |
| | 239 | + } ).show(); |
| | 240 | + } |
| 239 | 241 | this.$rangeFill.hide(); |
| 240 | 242 | this.$rangeEnd.hide(); |
| 241 | 243 | } else { |
| 242 | 244 | // Multiple line selection |
| 243 | 245 | var contentWidth = this.$.width(); |
| 244 | | - this.$rangeStart.css( { |
| 245 | | - 'top': fromPosition.top, |
| 246 | | - 'left': fromPosition.left, |
| 247 | | - 'width': contentWidth - fromPosition.left, |
| 248 | | - 'height': fromPosition.bottom - fromPosition.top |
| 249 | | - } ).show(); |
| | 246 | + if ( contentWidth - fromPosition.left ) { |
| | 247 | + this.$rangeStart.css( { |
| | 248 | + 'top': fromPosition.top, |
| | 249 | + 'left': fromPosition.left, |
| | 250 | + 'width': contentWidth - fromPosition.left, |
| | 251 | + 'height': fromPosition.bottom - fromPosition.top |
| | 252 | + } ).show(); |
| | 253 | + } else { |
| | 254 | + this.$rangeStart.hide(); |
| | 255 | + } |
| 250 | 256 | if ( toPosition.left ) { |
| 251 | 257 | this.$rangeEnd.css( { |
| 252 | 258 | 'top': toPosition.top, |
| Index: trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js |
| — | — | @@ -48,7 +48,7 @@ |
| 49 | 49 | } ); |
| 50 | 50 | |
| 51 | 51 | this.config = config || [ |
| 52 | | - { 'name': 'textStyle', 'items' : [ 'bold', 'italic', 'formatting', 'clear' ] }, |
| | 52 | + { 'name': 'textStyle', 'items' : [ 'bold', 'italic', 'link', 'clear' ] }, |
| 53 | 53 | { 'name': 'history', 'items' : [ 'undo', 'redo' ] } |
| 54 | 54 | ]; |
| 55 | 55 | this.setup(); |