mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-25 11:16:51 +00:00
Create separated classes for each toolbar tool (so far only bold and italic). Use CSS classes instead of img tags for toolbar buttons styling.
This commit is contained in:
Inez Korczynski
parent
dee9a0df01
commit
9aa9188798
|
|
@ -100,6 +100,11 @@ $wgResourceModules += array(
|
|||
'es/views/es.TableRowView.js',
|
||||
'es/views/es.TableView.js',
|
||||
'es/views/es.ToolbarView.js',
|
||||
'es/tools/es.Tool.js',
|
||||
'es/tools/es.ButtonTool.js',
|
||||
'es/tools/es.DropdownTool.js',
|
||||
'es/tools/es.BoldButtonTool.js',
|
||||
'es/tools/es.ItalicButtonTool.js'
|
||||
),
|
||||
'styles' => 'es/es.Surface.css',
|
||||
'dependencies' => array(
|
||||
|
|
|
|||
|
|
@ -130,6 +130,12 @@
|
|||
<script src="../modules/es/views/es.TableCellView.js"></script>
|
||||
<script src="../modules/es/views/es.HeadingView.js"></script>
|
||||
|
||||
<script src="../modules/es/tools/es.Tool.js"></script>
|
||||
<script src="../modules/es/tools/es.ButtonTool.js"></script>
|
||||
<script src="../modules/es/tools/es.DropdownTool.js"></script>
|
||||
<script src="../modules/es/tools/es.BoldButtonTool.js"></script>
|
||||
<script src="../modules/es/tools/es.ItalicButtonTool.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="../modules/sandbox/sandbox.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
7
modules/es/tools/es.BoldButtonTool.js
Normal file
7
modules/es/tools/es.BoldButtonTool.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
es.BoldButtonTool = function() {
|
||||
es.ButtonTool.call( this, toolbar, 'bold' );
|
||||
};
|
||||
|
||||
es.ToolbarView.tools.bold = es.BoldButtonTool;
|
||||
|
||||
es.extendClass( es.BoldButtonTool, es.ButtonTool );
|
||||
9
modules/es/tools/es.ButtonTool.js
Normal file
9
modules/es/tools/es.ButtonTool.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
es.ButtonTool = function( toolbar, name ) {
|
||||
es.Tool.call( this, toolbar );
|
||||
if ( !name ) {
|
||||
return;
|
||||
}
|
||||
this.$.addClass( 'es-toolbarTool-' + name );
|
||||
};
|
||||
|
||||
es.extendClass( es.ButtonTool, es.Tool );
|
||||
5
modules/es/tools/es.DropdownTool.js
Normal file
5
modules/es/tools/es.DropdownTool.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
es.DropdownTool = function( toolbar, name ) {
|
||||
es.Tool.call( this, toolbar );
|
||||
};
|
||||
|
||||
es.extendClass( es.DropdownTool, es.Tool );
|
||||
7
modules/es/tools/es.ItalicButtonTool.js
Normal file
7
modules/es/tools/es.ItalicButtonTool.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
es.ItalicButtonTool = function( toolbar ) {
|
||||
es.ButtonTool.call( this, toolbar, 'italic' );
|
||||
};
|
||||
|
||||
es.ToolbarView.tools.italic = es.ItalicButtonTool;
|
||||
|
||||
es.extendClass( es.ItalicButtonTool, es.ButtonTool );
|
||||
4
modules/es/tools/es.Tool.js
Normal file
4
modules/es/tools/es.Tool.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
es.Tool = function( toolbar ) {
|
||||
this.$ = $( '<div>' ).addClass( 'es-toolbarTool' );
|
||||
this.toolbar = toolbar;
|
||||
};
|
||||
|
|
@ -1,27 +1,14 @@
|
|||
var i18nDictionary = {
|
||||
'text': 'Text',
|
||||
'list': 'Lists'
|
||||
};
|
||||
|
||||
var i18n = function( key ) {
|
||||
if ( i18nDictionary[key] ) {
|
||||
return i18nDictionary[key];
|
||||
} else {
|
||||
return key;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// ToolbarView
|
||||
es.ToolbarView = function( $container, surfaceView ) {
|
||||
// References for use in closures
|
||||
var _this = this,
|
||||
$window = $( window );
|
||||
|
||||
this.$ = $container;
|
||||
this.surfaceView = surfaceView;
|
||||
this.$spacer = $('<div>');
|
||||
this.$ = $container;
|
||||
this.$.after( this.$spacer );
|
||||
|
||||
|
||||
/*
|
||||
* This code is responsible for switching toolbar into floating mode when scrolling (with
|
||||
* keyboard or mouse).
|
||||
|
|
@ -46,110 +33,29 @@ es.ToolbarView = function( $container, surfaceView ) {
|
|||
}
|
||||
} );
|
||||
|
||||
this.tools = [
|
||||
{
|
||||
name: 'text',
|
||||
items: [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'formatting',
|
||||
items: [
|
||||
'',
|
||||
'paragraph',
|
||||
'preformatted',
|
||||
'heading1',
|
||||
'heading2',
|
||||
'heading3',
|
||||
'heading4',
|
||||
'heading5',
|
||||
'heading6'
|
||||
],
|
||||
state: function() {
|
||||
return 'paragraph';
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
name: 'bold'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
name: 'italic'
|
||||
}
|
||||
]
|
||||
},
|
||||
'/',
|
||||
{
|
||||
name: 'list',
|
||||
items: [
|
||||
{
|
||||
type: 'button',
|
||||
name: 'bullet'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
name: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
this.config = [
|
||||
{ name: 'text', items : [ 'bold', 'italic' ] },
|
||||
];
|
||||
|
||||
this.setup();
|
||||
|
||||
this.surfaceView.model.on( 'select', function( selection ) {
|
||||
_this.selection = selection;
|
||||
_this.updateToolbar();
|
||||
} );
|
||||
this.surfaceView.on( 'update', function(a) {
|
||||
_this.selection = _this.surfaceView.currentSelection;
|
||||
_this.updateToolbar();
|
||||
} );
|
||||
this.setup()
|
||||
};
|
||||
|
||||
es.ToolbarView.prototype.updateToolbar = function() {
|
||||
if ( this.selection.from != this.selection.to ) {
|
||||
// var nodes = this.surfaceView.documentView.selectNodes( this.selection, true);
|
||||
// var nodes = nodes[0].node.selectNodes ( nodes[0].range, true );
|
||||
}
|
||||
};
|
||||
es.ToolbarView.tools = {};
|
||||
|
||||
es.ToolbarView.prototype.setup = function() {
|
||||
for ( var i = this.tools.length - 1; i >= 0; i-- ) {
|
||||
if ( !es.isPlainObject( this.tools[i] ) ) {
|
||||
// divider
|
||||
if ( this.tools[i] === '/' ) {
|
||||
this.$.prepend( '<div class="es-toolbarDivider">' );
|
||||
}
|
||||
} else {
|
||||
var $group = $( '<div>' )
|
||||
.addClass( 'es-toolbarGroup' )
|
||||
.addClass( 'es-toolbarGroup-' + this.tools[i].name )
|
||||
.append(
|
||||
$( '<div>' ).addClass( 'es-toolbarLabel' ).html( i18n( this.tools[i].name ) )
|
||||
);
|
||||
for ( var j = 0; j < this.tools[i].items.length; j++ ) {
|
||||
var $tool = $('<div>').addClass( 'es-toolbarTool' );
|
||||
if ( this.tools[i].items[j].type === 'button' ) {
|
||||
// button
|
||||
$tool.append(
|
||||
$( '<img>' ).attr( 'src', 'images/' + this.tools[i].items[j].name + '.png')
|
||||
);
|
||||
} else if ( this.tools[i].items[j].type === 'select' ) {
|
||||
// select
|
||||
$select = $( '<select>' );
|
||||
for ( var h = 0; h < this.tools[i].items[j].items.length; h++ ) {
|
||||
$select.append(
|
||||
$( '<option>' )
|
||||
.html( i18n ( this.tools[i].items[j].items[h] ) )
|
||||
.val( this.tools[i].items[j].items[h] )
|
||||
);
|
||||
}
|
||||
$tool.append( $select );
|
||||
}
|
||||
$group.append( $tool );
|
||||
this.tools[i].items[j].$ = $tool;
|
||||
}
|
||||
this.$.prepend( $group );
|
||||
for ( var i = this.config.length - 1; i >= 0; i-- ) {
|
||||
var $group = $( '<div>' )
|
||||
.addClass( 'es-toolbarGroup' )
|
||||
.addClass( 'es-toolbarGroup-' + this.config[i].name )
|
||||
.append(
|
||||
$( '<div>' ).addClass( 'es-toolbarLabel' ).html( this.config[i].name )
|
||||
);
|
||||
|
||||
for ( var j = 0; j < this.config[i].items.length; j++ ) {
|
||||
var tool = new es.ToolbarView.tools[ this.config[i].items[j] ]( this );
|
||||
$group.append( tool.$ );
|
||||
}
|
||||
|
||||
this.$.prepend( $group );
|
||||
}
|
||||
};
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
border-top: none;
|
||||
}
|
||||
#es-toolbar-shadow {
|
||||
background-image: url(images/toolbar-shadow.png);
|
||||
background-image: url(../es/images/toolbar-shadow.png);
|
||||
background-position: top left;
|
||||
background-repeat: repeat-x;
|
||||
position: absolute;
|
||||
|
|
@ -76,6 +76,14 @@
|
|||
-moz-border-radius: 0.125em;
|
||||
-o-border-radius: 0.125em;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.es-toolbarTool:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
.es-toolbarTool:hover,
|
||||
.es-toolbarTool-down:hover {
|
||||
|
|
@ -88,10 +96,11 @@
|
|||
background-position: top left;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.es-toolbarTool img {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.es-toolbarTool-bold:before {
|
||||
background-image: url(../es/images/bold.png);
|
||||
}
|
||||
.es-toolbarTool-italic:before {
|
||||
background-image: url(../es/images/italic.png);
|
||||
}
|
||||
#es-previews {
|
||||
display: none;
|
||||
|
|
|
|||
Loading…
Reference in a new issue