Cleanup postEdit and match styles to mw.notification

* Remove HTML template
* Add mw-notification class and dependency
* Fix variable scoping issues so firing two notifications
  doesn't cause one to become stuck

Bug: T58313
Change-Id: I9a702d23a8a9b5cc098cbb413213d73813bec097

diff --git a/resources/Resources.php b/resources/Resources.php
index 6fc6a28..d0a3447 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1491,14 +1491,12 @@ return [
                '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',

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.css b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.css
deleted file mode 100644 (file)
index a5ca65e..0000000
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.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 );
-}

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
index 5dfdede..87572ec 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
@@ -22,43 +22,48 @@
         * @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 );

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
new file mode 100644 (file)
index 0000000..8094559
--- /dev/null
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
@@ -0,0 +1,71 @@
+@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;
+       }
+}

diff --git a/resources/src/mediawiki.action/templates/postEdit.html b/resources/src/mediawiki.action/templates/postEdit.html
deleted file mode 100644 (file)
index dbb482a..0000000
--- a/resources/src/mediawiki.action/templates/postEdit.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="postedit-container">
-       <div class="postedit">
-               <div class="postedit-icon postedit-icon-checkmark postedit-content"></div>
-               <a href="#" class="postedit-close">&times;</a>
-       </div>
-</div>