diff --git a/.gitignore b/.gitignore index a8e1003f..5bb8f99c 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules/ vendor/ ace-git/ +composer.lock diff --git a/extension.json b/extension.json index 92913184..41a91ded 100644 --- a/extension.json +++ b/extension.json @@ -48,7 +48,7 @@ }, "jquery.codeEditor": { "scripts": "jquery.codeEditor.js", - "styles": "jquery.codeEditor.css", + "styles": "jquery.codeEditor.less", "dependencies": [ "jquery.wikiEditor", "ext.codeEditor.ace", diff --git a/images/LICENSE-MIT b/images/LICENSE-MIT new file mode 100644 index 00000000..4c2c2531 --- /dev/null +++ b/images/LICENSE-MIT @@ -0,0 +1,20 @@ +Copyright 2011-2016 OOjs UI Team and other contributors. + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/images/clear.png b/images/clear.png deleted file mode 100644 index f7029119..00000000 Binary files a/images/clear.png and /dev/null differ diff --git a/images/code-progressive.png b/images/code-progressive.png new file mode 100644 index 00000000..89b8f1da Binary files /dev/null and b/images/code-progressive.png differ diff --git a/images/code-progressive.svg b/images/code-progressive.svg new file mode 100644 index 00000000..f3b0cdc2 --- /dev/null +++ b/images/code-progressive.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/code.png b/images/code.png new file mode 100644 index 00000000..574168a3 Binary files /dev/null and b/images/code.png differ diff --git a/images/code.svg b/images/code.svg new file mode 100644 index 00000000..8188e4ff --- /dev/null +++ b/images/code.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/editor-off.png b/images/editor-off.png deleted file mode 100644 index 05a38e86..00000000 Binary files a/images/editor-off.png and /dev/null differ diff --git a/images/editor.png b/images/editor.png deleted file mode 100644 index 63757a1d..00000000 Binary files a/images/editor.png and /dev/null differ diff --git a/images/find.png b/images/find.png new file mode 100644 index 00000000..80706265 Binary files /dev/null and b/images/find.png differ diff --git a/images/find.svg b/images/find.svg new file mode 100644 index 00000000..ef44f579 --- /dev/null +++ b/images/find.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/gotoLine.png b/images/gotoLine.png new file mode 100644 index 00000000..f3c61bcf Binary files /dev/null and b/images/gotoLine.png differ diff --git a/images/gotoLine.svg b/images/gotoLine.svg new file mode 100644 index 00000000..cb1a91f2 --- /dev/null +++ b/images/gotoLine.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/gotoline.png b/images/gotoline.png deleted file mode 100644 index 4da9dfac..00000000 Binary files a/images/gotoline.png and /dev/null differ diff --git a/images/help.png b/images/help.png deleted file mode 100644 index 2c53d6ea..00000000 Binary files a/images/help.png and /dev/null differ diff --git a/images/indent.png b/images/indent.png index 7ca19602..d2f43a62 100644 Binary files a/images/indent.png and b/images/indent.png differ diff --git a/images/indent.svg b/images/indent.svg new file mode 100644 index 00000000..37606969 --- /dev/null +++ b/images/indent.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/markup-off.png b/images/markup-off.png deleted file mode 100644 index b0f14a84..00000000 Binary files a/images/markup-off.png and /dev/null differ diff --git a/images/markup.png b/images/markup.png deleted file mode 100644 index c6cd56f9..00000000 Binary files a/images/markup.png and /dev/null differ diff --git a/images/outdent.png b/images/outdent.png index 2bc8a19e..9eb83f73 100644 Binary files a/images/outdent.png and b/images/outdent.png differ diff --git a/images/outdent.svg b/images/outdent.svg new file mode 100644 index 00000000..c004db0f --- /dev/null +++ b/images/outdent.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/pilcrow-progressive.png b/images/pilcrow-progressive.png new file mode 100644 index 00000000..858763bb Binary files /dev/null and b/images/pilcrow-progressive.png differ diff --git a/images/pilcrow-progressive.svg b/images/pilcrow-progressive.svg new file mode 100644 index 00000000..d878111d --- /dev/null +++ b/images/pilcrow-progressive.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/pilcrow.png b/images/pilcrow.png new file mode 100644 index 00000000..c5ebcdb1 Binary files /dev/null and b/images/pilcrow.png differ diff --git a/images/pilcrow.svg b/images/pilcrow.svg new file mode 100644 index 00000000..771e0f80 --- /dev/null +++ b/images/pilcrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/search-replace.png b/images/search-replace.png deleted file mode 100644 index a41ec53c..00000000 Binary files a/images/search-replace.png and /dev/null differ diff --git a/images/shortcuts.png b/images/shortcuts.png deleted file mode 100644 index 3ce4bdd0..00000000 Binary files a/images/shortcuts.png and /dev/null differ diff --git a/images/wrapping-off.png b/images/wrapping-off.png deleted file mode 100644 index e26c092b..00000000 Binary files a/images/wrapping-off.png and /dev/null differ diff --git a/images/wrapping-progressive.png b/images/wrapping-progressive.png new file mode 100644 index 00000000..a1cbfbdc Binary files /dev/null and b/images/wrapping-progressive.png differ diff --git a/images/wrapping-progressive.svg b/images/wrapping-progressive.svg new file mode 100644 index 00000000..ea1bce04 --- /dev/null +++ b/images/wrapping-progressive.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/wrapping.png b/images/wrapping.png index 6ff90153..1ada5874 100644 Binary files a/images/wrapping.png and b/images/wrapping.png differ diff --git a/images/wrapping.svg b/images/wrapping.svg new file mode 100644 index 00000000..c5fe6365 --- /dev/null +++ b/images/wrapping.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/modules/jquery.codeEditor.css b/modules/jquery.codeEditor.css deleted file mode 100644 index 3c339c50..00000000 --- a/modules/jquery.codeEditor.css +++ /dev/null @@ -1,55 +0,0 @@ -.group-codeeditor-format, -.group-codeeditor-style, -.codeEditor-ui-toolbar .group-insert, -.codeEditor-ui-toolbar .group-format, -.codeEditor-ui-toolbar .tabs span.tab-advanced, -.codeEditor-ui-toolbar .tabs span.tab-characters, -.codeEditor-ui-toolbar .tabs span.tab-help, -.codeEditor-ui-toolbar .sections { - display: none; -} - -.codeEditor-ui-toolbar .group-codeeditor-format, -.codeEditor-ui-toolbar .group-codeeditor-style { - display: block; -} - -.codeEditor-status { - clear: both; - width: 100%; - background-color: #F0F0F0; - border-top: 1px solid silver; - display: table; -} - -.codeEditor-status .codeEditor-status-worker-cell.ace_gutter-cell { - background-position: 0 center; -} - -.codeEditor-status-worker { - padding: 0 0.3em; - user-select: none; - cursor: pointer; - display: table-cell; - *float: left; - *width: 10em; -} - -.codeEditor-status-message { - border-left: 1px solid silver; - border-right: 1px solid silver; - padding: 0 0.3em; - width: 100%; - display: table-cell; - *float: left; - *width: auto; -} - -.codeEditor-status-line { - padding: 0 0.3em; - text-align: right; - white-space: nowrap; - display: table-cell; - *float: right; - *width: 4em; -} diff --git a/modules/jquery.codeEditor.js b/modules/jquery.codeEditor.js index b6914b35..54ea498e 100644 --- a/modules/jquery.codeEditor.js +++ b/modules/jquery.codeEditor.js @@ -48,7 +48,6 @@ selectedLine = 0, cookieEnabled, returnFalse = function () { return false; }, - extIconPath = mw.config.get( 'wgCodeEditorAssetsPath', mw.config.get( 'wgExtensionAssetsPath' ) ) + '/CodeEditor/images/', api = new mw.Api(); // Initialize state @@ -103,14 +102,14 @@ * Internally used functions */ context.fn = $.extend( context.fn, { - codeEditorToolbarIcon: function () { - return extIconPath + ( context.codeEditorActive ? 'editor.png' : 'editor-off.png' ); + isCodeEditorActive: function () { + return context.codeEditorActive; }, - invisibleCharsToolbarIcon: function () { - return extIconPath + ( context.showInvisibleChars ? 'markup.png' : 'markup-off.png' ); + isShowInvisibleChars: function () { + return context.showInvisibleChars; }, - lineWrappingToolbarIcon: function () { - return extIconPath + ( context.lineWrappingActive ? 'wrapping.png' : 'wrapping-off.png' ); + isLineWrappingActive: function () { + return context.lineWrappingActive; }, changeCookieValue: function ( cookieName, value ) { mw.cookie.set( @@ -202,7 +201,7 @@ codeEditor: { labelMsg: 'codeeditor-toolbar-toggle', type: 'button', - icon: context.fn.codeEditorToolbarIcon(), + offset: [ 0, 0 ], action: { type: 'callback', execute: toggleEditor @@ -215,7 +214,7 @@ indent: { labelMsg: 'codeeditor-indent', type: 'button', - icon: extIconPath + 'indent.png', + offset: [ 0, 0 ], action: { type: 'callback', execute: indent @@ -224,7 +223,7 @@ outdent: { labelMsg: 'codeeditor-outdent', type: 'button', - icon: extIconPath + 'outdent.png', + offset: [ 0, 0 ], action: { type: 'callback', execute: outdent @@ -238,7 +237,7 @@ invisibleChars: { labelMsg: 'codeeditor-invisibleChars-toggle', type: 'button', - icon: context.fn.invisibleCharsToolbarIcon(), + offset: [ 0, 0 ], action: { type: 'callback', execute: toggleInvisibleChars @@ -247,7 +246,7 @@ lineWrapping: { labelMsg: 'codeeditor-lineWrapping-toggle', type: 'button', - icon: context.fn.lineWrappingToolbarIcon(), + offset: [ 0, 0 ], action: { type: 'callback', execute: toggleLineWrapping @@ -256,7 +255,7 @@ gotoLine: { labelMsg: 'codeeditor-gotoline', type: 'button', - icon: extIconPath + 'gotoline.png', + offset: [ 0, 0 ], action: { type: 'callback', execute: gotoLine @@ -265,7 +264,7 @@ toggleSearchReplace: { labelMsg: 'codeeditor-searchReplace-toggle', type: 'button', - icon: extIconPath + 'search-replace.png', + offset: [ 0, 0 ], action: { type: 'callback', execute: toggleSearchReplace @@ -275,6 +274,9 @@ } } } ); + context.fn.updateCodeEditorToolbarButton(); + context.fn.updateInvisibleCharsButton(); + context.fn.updateLineWrappingButton(); $( '.group-codeeditor-style' ).prependTo( '.section-main' ); $( '.group-codeeditor-format' ).prependTo( '.section-main' ); $( '.group-codeeditor-main' ).prependTo( '.section-main' ); @@ -282,16 +284,16 @@ updateButtonIcon: function ( targetName, iconFn ) { var target = '.tool[rel=' + targetName + ']', $icon = context.modules.toolbar.$toolbar.find( target ); - $icon.css( 'background-image', 'url(' + iconFn() + ')' ); + $icon.toggleClass( 'icon-active', iconFn() ); }, updateCodeEditorToolbarButton: function () { - context.fn.updateButtonIcon( 'codeEditor', context.fn.codeEditorToolbarIcon ); + context.fn.updateButtonIcon( 'codeEditor', context.fn.isCodeEditorActive ); }, updateInvisibleCharsButton: function () { - context.fn.updateButtonIcon( 'invisibleChars', context.fn.invisibleCharsToolbarIcon ); + context.fn.updateButtonIcon( 'invisibleChars', context.fn.isShowInvisibleChars ); }, updateLineWrappingButton: function () { - context.fn.updateButtonIcon( 'lineWrapping', context.fn.lineWrappingToolbarIcon ); + context.fn.updateButtonIcon( 'lineWrapping', context.fn.isLineWrappingActive ); }, setCodeEditorPreference: function ( prefValue ) { // Do not try to save options for anonymous user diff --git a/modules/jquery.codeEditor.less b/modules/jquery.codeEditor.less new file mode 100644 index 00000000..c131f80a --- /dev/null +++ b/modules/jquery.codeEditor.less @@ -0,0 +1,117 @@ +@import "mediawiki.mixins"; + +.group-codeeditor-format, +.group-codeeditor-style, +.codeEditor-ui-toolbar .group-insert, +.codeEditor-ui-toolbar .group-format, +.codeEditor-ui-toolbar .tabs span.tab-advanced, +.codeEditor-ui-toolbar .tabs span.tab-characters, +.codeEditor-ui-toolbar .tabs span.tab-help, +.codeEditor-ui-toolbar .sections { + display: none; +} + +.codeEditor-ui-toolbar .group-codeeditor-format, +.codeEditor-ui-toolbar .group-codeeditor-style { + display: block; +} + +.group-codeeditor-main, +.group-codeeditor-format, +.group-codeeditor-style { + .tool { + opacity: 0.7; + background-position: 1px 1px!important; + &.icon-active { + opacity: 1; + } + } +} + +// TODO: Use this icon from OOUI +.group-codeeditor-main .tool[rel=codeEditor] { + .background-image-svg( '../images/code.svg', '../images/code.png' ); + &.icon-active { + .background-image-svg( '../images/code-progressive.svg', '../images/code-progressive.png' ); + } +} + +// TODO: Use this icon from OOUI +.codeEditor-ui-toolbar .tool[rel=indent] { + .background-image-svg( '../images/indent.svg', '../images/indent.png' ); +} + +// TODO: Use this icon from OOUI +.codeEditor-ui-toolbar .tool[rel=outdent] { + .background-image-svg( '../images/outdent.svg', '../images/outdent.png' ); +} + +// TODO: Upstream this icon to OOUI and use it from there +.codeEditor-ui-toolbar .tool[rel=invisibleChars] { + .background-image-svg( '../images/pilcrow.svg', '../images/pilcrow.png' ); + &.icon-active { + .background-image-svg( '../images/pilcrow-progressive.svg', '../images/pilcrow-progressive.png' ); + } +} + +// TODO: Upstream this icon to OOUI and use it from there +.codeEditor-ui-toolbar .tool[rel=lineWrapping] { + .background-image-svg( '../images/wrapping.svg', '../images/wrapping.png' ); + &.icon-active { + .background-image-svg( '../images/wrapping-progressive.svg', '../images/wrapping-progressive.png' ); + } +} + +// TODO: Upstream this icon to OOUI and use it from there +.codeEditor-ui-toolbar .tool[rel=gotoLine] { + .background-image-svg( '../images/gotoLine.svg', '../images/gotoLine.png' ); +} + +// TODO: Use this icon from OOUI +.codeEditor-ui-toolbar .tool[rel=toggleSearchReplace] { + .background-image-svg( '../images/find.svg', '../images/find.png' ); +} + +.wikiEditor-ui-toolbar .group-codeeditor-style { + border-right: 0; +} + +.codeEditor-status { + clear: both; + width: 100%; + background-color: #F0F0F0; + border-top: 1px solid silver; + display: table; +} + +.codeEditor-status .codeEditor-status-worker-cell.ace_gutter-cell { + background-position: 0 center; +} + +.codeEditor-status-worker { + padding: 0 0.3em; + user-select: none; + cursor: pointer; + display: table-cell; + *float: left; + *width: 10em; +} + +.codeEditor-status-message { + border-left: 1px solid silver; + border-right: 1px solid silver; + padding: 0 0.3em; + width: 100%; + display: table-cell; + *float: left; + *width: auto; +} + +.codeEditor-status-line { + padding: 0 0.3em; + text-align: right; + white-space: nowrap; + display: table-cell; + *float: right; + *width: 4em; +}