'targets' => [ 'desktop', 'mobile' ]
],
'mediawiki.action.view.postEdit' => [
- 'templates' => [
- 'postEdit.html' => 'resources/src/mediawiki.action/templates/postEdit.html',
- ],
'scripts' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.js',
- 'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.css',
+ 'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.less',
'dependencies' => [
'mediawiki.cookie',
- 'mediawiki.jqueryMsg'
+ 'mediawiki.jqueryMsg',
+ 'mediawiki.notification'
],
'messages' => [
'postedit-confirmation-created',
+++ /dev/null
-.postedit-container {
- margin: 0 auto;
- position: fixed;
- top: 0;
- height: 0;
- left: 50%;
- z-index: 1000;
- font-size: 13px;
-}
-
-.postedit-container:hover {
- cursor: pointer;
-}
-
-.postedit {
- position: relative;
- top: 0.6em;
- left: -50%;
- padding: 0.6em 3.6em 0.6em 1.1em;
- line-height: 1.5625em;
- color: #626465;
- background-color: #f4f4f4;
- border: 1px solid #dcd9d9;
- text-shadow: 0 0.0625em 0 rgba( 255, 255, 255, 0.5 );
- border-radius: 5px;
- box-shadow: 0 2px 5px 0 #ccc;
- -webkit-transition: all 0.25s ease-in-out;
- -moz-transition: all 0.25s ease-in-out;
- -ms-transition: all 0.25s ease-in-out;
- -o-transition: all 0.25s ease-in-out;
- transition: all 0.25s ease-in-out;
-}
-
-.skin-monobook .postedit {
- top: 6em !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.postedit-faded {
- opacity: 0;
-}
-
-.postedit-icon {
- padding-left: 41px; /* 25 + 8 + 8 */
- /* like min-height, but old IE compatible and keeps text vertically aligned, too */
- line-height: 25px;
- background-repeat: no-repeat;
- background-position: 8px 50%;
-}
-
-.postedit-icon-checkmark {
- /* @embed */
- background-image: url( images/green-checkmark.png );
- background-position: left;
-}
-
-.postedit-close {
- position: absolute;
- padding: 0 0.8em;
- right: 0;
- top: 0;
- font-size: 1.25em;
- font-weight: bold;
- line-height: 2.3em;
- color: #000;
- text-shadow: 0 0.0625em 0 #fff;
- text-decoration: none;
- opacity: 0.2;
- filter: alpha( opacity=20 );
-}
-
-.postedit-close:hover {
- color: #000;
- text-decoration: none;
- opacity: 0.4;
- filter: alpha( opacity=40 );
-}
* @member mw.hook
*/
- var config = mw.config.get( [ 'wgAction', 'wgCurRevisionId' ] ),
+ var cookieVal,
+ config = mw.config.get( [ 'wgAction', 'wgCurRevisionId' ] ),
// This should match EditPage::POST_EDIT_COOKIE_KEY_PREFIX:
- cookieKey = 'PostEditRevision' + config.wgCurRevisionId,
- cookieVal, $div, id;
-
- function removeConfirmation() {
- $div.remove();
- mw.hook( 'postEdit.afterRemoval' ).fire();
- }
-
- function fadeOutConfirmation() {
- clearTimeout( id );
- $div.find( '.postedit' ).addClass( 'postedit postedit-faded' );
- setTimeout( removeConfirmation, 500 );
-
- return false;
- }
+ cookieKey = 'PostEditRevision' + config.wgCurRevisionId;
function showConfirmation( data ) {
+ var $container, $popup, $content, timeoutId;
+
+ function fadeOutConfirmation() {
+ $popup.addClass( 'postedit-faded' );
+ setTimeout( function () {
+ $container.remove();
+ mw.hook( 'postEdit.afterRemoval' ).fire();
+ }, 250 );
+ }
+
data = data || {};
+
if ( data.message === undefined ) {
data.message = $.parseHTML( mw.message( 'postedit-confirmation-saved', data.user || mw.user ).escaped() );
}
- $div = mw.template.get( 'mediawiki.action.view.postEdit', 'postEdit.html' ).render();
-
+ $content = $( '<div>' ).addClass( 'postedit-icon postedit-icon-checkmark postedit-content' );
if ( typeof data.message === 'string' ) {
- $div.find( '.postedit-content' ).text( data.message );
+ $content.text( data.message );
} else if ( typeof data.message === 'object' ) {
- $div.find( '.postedit-content' ).append( data.message );
+ $content.append( data.message );
}
- $div
- .click( fadeOutConfirmation )
- .prependTo( 'body' );
+ $popup = $( '<div>' ).addClass( 'postedit mw-notification' ).append(
+ $content,
+ $( '<a>' ).addClass( 'postedit-close' ).attr( 'href', '#' ).text( '×' )
+ ).on( 'click', function ( e ) {
+ e.preventDefault();
+ clearTimeout( timeoutId );
+ fadeOutConfirmation();
+ } );
+
+ $container = $( '<div>' ).addClass( 'postedit-container' ).append( $popup );
+ timeoutId = setTimeout( fadeOutConfirmation, 3000 );
- id = setTimeout( fadeOutConfirmation, 3000 );
+ $( 'body' ).prepend( $container );
}
mw.hook( 'postEdit' ).add( showConfirmation );
--- /dev/null
+@import 'mediawiki.mixins';
+
+.postedit-container {
+ margin: 0 auto;
+ position: fixed;
+ top: 0;
+ height: 0;
+ left: 50%;
+ z-index: 1000;
+ font-size: 13px;
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.postedit {
+ position: relative;
+ top: 0.6em;
+ left: -50%;
+ line-height: 1.35;
+ opacity: 1;
+ .transition( opacity 250ms );
+
+ &.mw-notification {
+ padding-right: 3em;
+ }
+}
+
+// TODO: Move to monobook skin
+.skin-monobook .postedit {
+ top: 6em !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.postedit-faded {
+ opacity: 0;
+}
+
+.postedit-icon {
+ padding-left: 41px; /* 25 + 8 + 8 */
+ /* like min-height, but old IE compatible and keeps text vertically aligned, too */
+ line-height: 25px;
+ background-repeat: no-repeat;
+ background-position: 8px 50%;
+}
+
+.postedit-icon-checkmark {
+ /* @embed */
+ background-image: url( images/green-checkmark.png );
+ background-position: left;
+}
+
+.postedit-close {
+ position: absolute;
+ padding: 0 0.8em;
+ right: 0;
+ top: 0;
+ font-size: 1.25em;
+ font-weight: bold;
+ line-height: 2.3em;
+ color: #000;
+ text-shadow: 0 0.0625em 0 #fff;
+ text-decoration: none;
+ opacity: 0.2;
+
+ .postedit:hover & {
+ color: #000;
+ text-decoration: none;
+ opacity: 0.4;
+ }
+}
+++ /dev/null
-<div class="postedit-container">
- <div class="postedit">
- <div class="postedit-icon postedit-icon-checkmark postedit-content"></div>
- <a href="#" class="postedit-close">×</a>
- </div>
-</div>