add ability to minimize and resume modal buttons

css/style.css

@@ -379,6 +379,39 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
     margin: 4px 0 0 10px;
 }
 
+#modals-minimized {
+    background-color: rgba(0, 0, 0, 0);
+    z-index: 9000;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    width: 900px;
+    height: 24px;
+    overflow: auto;
+    margin-left: -450px;
+    padding: 0 4%;
+}
+
+#modals-minimized.w1200 {
+    width: 1200px;
+    margin-left: -600px;
+}
+
+#modals-minimized li {
+    display: inline-block;
+    opacity: .88;
+    font-size: 10px;
+    color: #FFF;
+    background-color: #B43E34;
+    margin: 0 2px;
+    padding: 4px 8px;
+}
+
+#modals-minimized li:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
 /*******************************************************
 ****************** CONFIG SUBMENU & SEARCH RESULTS *****
 *******************************************************/
@@ -1483,7 +1516,7 @@ ol.toptrends-list {
     height: 100%;
 }
 
-.modal-close {
+.modal-close, .minimize-modal {
     position: absolute;
     right: 0;
     top: 0;
@@ -1495,15 +1528,19 @@ ol.toptrends-list {
     transition: all .1s linear;
 }
 
-.modal-close:hover {
+.modal-close:hover, .minimize-modal:hover {
     color: #fff;
     background: rgba( 0, 0, 0, .1 );
 }
 
+.minimize-modal {
+    right: 30px;
+}
+
 .modal-back,
 .mark-all-as-read {
     position: absolute;
-    right: 30px;
+    right: 60px;
     top: 0;
     padding: 1px 10px;
     cursor: pointer;
@@ -1520,6 +1557,14 @@ ol.toptrends-list {
     background: rgba( 0, 0, 0, .1 );
 }
 
+.mark-all-as-read {
+    right: 90px;
+}
+
+.mark-all-as-read:before {
+    content: '\2714';
+}
+
 .modal-wrapper.reply .post {
     background: #ececed;
     padding: 10px 15px;
@@ -1627,14 +1672,6 @@ ol.toptrends-list {
     left: auto;
 }
 
-.mark-all-as-read {
-    right: 60px;
-}
-
-.mark-all-as-read:before {
-    content: '\2714';
-}
-
 /*************************************
 ****** GM NEW GROUP SETUP MODAL ******
 **************************************/

following.html

@@ -170,6 +170,8 @@
   <!-- LADO ESQUERDO DE MÓDULOS END -->
   </div>
 
+    <ul id="modals-minimized"></ul>
+
   <!-- TEMPLATES INIT -->
   <div id="templates" style="display:none;">
     <div id="search-profile-template">
@@ -304,6 +306,7 @@
     <div class="modal-wrapper">
         <div class="modal-header">
             <h3></h3>
+            <span class="minimize-modal"><b>_</b></span>
             <span id="closeModal" class="modal-close">&times;</span>
             <span class="modal-back">&lt;</span>
             <span class="mark-all-as-read"></span>

home.html

@@ -185,6 +185,8 @@
       <div class="dashboard right"></div>
   </div>
 
+    <ul id="modals-minimized"></ul>
+
   <!-- TEMPLATES INIT -->
   <div id="templates" style="display:none;">
     <div id="search-profile-template">
@@ -396,6 +398,7 @@
     <div class="modal-wrapper">
         <div class="modal-header">
             <h3></h3>
+            <span class="minimize-modal"><b>_</b></span>
             <span id="closeModal" class="modal-close">&times;</span>
             <span class="modal-back">&lt;</span>
             <span class="mark-all-as-read"></span>

js/interface_common.js

@@ -6,6 +6,8 @@
 // Post actions: submit, count characters
 
 var window_scrollY = 0;
+var _watchHashChangeDontLoadModal = false;
+var _minimizedModals = {};
 
 function openModal(modal) {
     if (!modal.classBase) {
@@ -65,6 +67,82 @@ function closeModalHandler(classBase) {
     modalWindows.fadeOut('fast', function() {modalWindows.remove();});
 }
 
+function minimizeModal(modal, switchMode) {
+    function minimize(modal, scroll) {
+        modal.detach();
+
+        btnResume = $('<li>' + modal.find('.modal-header h3').text() + '</li>')
+            .on('click', {hashString: window.location.hash}, resumeModal)
+            .appendTo($('#modals-minimized'))
+        ;
+
+        _minimizedModals[window.location.hash] = {
+            self: modal,
+            scroll: scroll,
+            btnResume: btnResume
+        };
+    }
+
+    var scroll;  // MUST be setted before modal.detach(), modal.fadeOut() and so on
+    if (modal.is('.directMessages') || modal.is('.group-messages-new-group')
+        || modal.is('.group-messages-join-group')) {
+            scroll = {
+                targetSelector: '.modal-content',
+                top: modal.find('.modal-content').scrollTop()
+            };
+    } else if (modal.is('.profile-modal')) {
+        if (modal.find('.profile-card').attr('data-screen-name')[0] === '*')
+            scroll = {
+                targetSelector: '.modal-content .members',
+                top: modal.find('.modal-content .members').scrollTop()
+            };
+        else
+            scroll = {
+                targetSelector: '.modal-content .postboard-posts',
+                top: modal.find('.modal-content .postboard-posts').scrollTop()
+            };
+    }
+
+    if (switchMode)
+        minimize(modal, scroll);
+    else
+        modal.fadeOut('fast', function () {
+            minimize(modal, scroll);
+
+            window.location.hash = '#';
+            window.scroll(window.pageXOffset, window_scrollY);
+            $('body').css({
+                'overflow': 'auto',
+                'margin-right': '0'
+            });
+        });
+}
+
+function resumeModal(event) {
+    var elemEvent = $(event.target);
+    elemEvent.fadeOut('fast', function () {elemEvent.remove();});
+
+    var modalActive = $('.modal-wrapper:not(#templates *)');
+    if (modalActive.length)
+        minimizeModal(modalActive, true);
+    else {
+        window_scrollY = window.pageYOffset;
+        $('body').css('overflow', 'hidden');
+    }
+
+    var modal = _minimizedModals[event.data.hashString];
+    if (modal) {
+        _minimizedModals[event.data.hashString] = undefined;
+        _watchHashChangeDontLoadModal = true;
+        window.location.hash = event.data.hashString;
+        modal.self.prependTo('body').fadeIn('fast', function () {
+            // TODO also need reset modal height here maybe and then compute new scroll
+            if (modal.scroll)
+                modal.self.find($(modal.scroll.targetSelector).scrollTop(modal.scroll.top));
+        });
+    }
+}
+
 function confirmPopup(event, req) {
     if (event && event.stopPropagation)
         event.stopPropagation();
@@ -425,6 +503,7 @@ function watchHashChange(e) {
         var prevurlsplit = e.oldURL.split('#');
         var prevhashstring = prevurlsplit[1];
 
+        // FIXME need to move back button handling to special function and call it in openModal() and resumeModal()
         var notFirstModalView = (prevhashstring !== undefined && prevhashstring.length > 0);
         var notNavigatedBackToFirstModalView = (window.history.state == null ||
             (window.history.state != null && window.history.state.showCloseButton !== false));
@@ -437,10 +516,18 @@ function watchHashChange(e) {
         }
     }
 
-    loadModalFromHash();
+    if (_watchHashChangeDontLoadModal)
+        _watchHashChangeDontLoadModal = false;
+    else
+        loadModalFromHash();
 }
 
 function loadModalFromHash() {
+    if (_minimizedModals[window.location.hash]) {
+        _minimizedModals[window.location.hash].btnResume.click();
+        return;
+    }
+
     var hashstring = decodeURIComponent(window.location.hash);
     var hashdata = hashstring.split(':');
 
@@ -1526,11 +1613,13 @@ function replaceDashboards() {
         $('.userMenu').addClass('w1200');
         $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
         $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
+        $('#modals-minimized').addClass('w1200');
     } else if (width < 1200 && wrapper.hasClass('w1200')) {
         wrapper.removeClass('w1200');
         $('.userMenu').removeClass('w1200');
         $('.module.who-to-follow').detach().insertAfter($('.module.mini-profile'));
         $('.module.twistday-reminder').detach().insertAfter($('.module.toptrends'));
+        $('#modals-minimized').removeClass('w1200');
     }
 }
 
@@ -1543,6 +1632,10 @@ function initInterfaceCommon() {
         closeModal();
     });
 
+    $('.minimize-modal').on('click', function (event) {
+        minimizeModal($(event.target).closest('.modal-wrapper'));
+    });
+
     $('.modal-back').on('click', function() {history.back();});
 
     $('.prompt-close').on('click', closePrompt);

theme_calm/css/style.css

@@ -500,6 +500,39 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     margin: 4px 0 0 -5px;
 }
 
+#modals-minimized {
+    background-color: rgba(0, 0, 0, 0);
+    z-index: 9000;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    width: 900px;
+    height: 24px;
+    overflow: auto;
+    margin-left: -450px;
+    padding: 0 4%;
+}
+
+#modals-minimized.w1200 {
+    width: 1200px;
+    margin-left: -600px;
+}
+
+#modals-minimized li {
+    display: inline-block;
+    opacity: .88;
+    font-size: 10px;
+    color: #FFF;
+    background-color: #7691CE;
+    margin: 0 2px;
+    padding: 4px 8px;
+}
+
+#modals-minimized li:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
 /*******************************************************
 ****************** CONFIG SUBMENU & SEARCH RESULTS *****
 *******************************************************/
@@ -1868,7 +1901,7 @@ textarea.splited-post {
     height: 100%;
 }
 
-.modal-close {
+.modal-close, .minimize-modal {
     position: absolute;
     right: 0;
     top: 0;
@@ -1880,15 +1913,19 @@ textarea.splited-post {
     transition: all .1s linear;
 }
 
-.modal-close:hover {
+.modal-close:hover, .minimize-modal:hover {
     color: #fff;
     background: rgba( 0, 0, 0, .1 );
 }
 
+.minimize-modal {
+    right: 30px;
+}
+
 .modal-back,
 .mark-all-as-read {
     position: absolute;
-    right: 30px;
+    right: 60px;
     top: 0;
     padding: 1px 10px;
     cursor: pointer;
@@ -1905,6 +1942,14 @@ textarea.splited-post {
     background: rgba( 0, 0, 0, .1 );
 }
 
+.mark-all-as-read {
+    right: 90px;
+}
+
+.mark-all-as-read:before {
+    content: '\2714';
+}
+
 .modal-wrapper.reply .post {
     background: #ececed;
     padding: 10px 15px;
@@ -2020,14 +2065,6 @@ textarea.splited-post {
     background: none;
 }
 
-.mark-all-as-read {
-    right: 60px;
-}
-
-.mark-all-as-read:before {
-    content: '\2714';
-}
-
 /*************************************
 ****** GM NEW GROUP SETUP MODAL ******
 **************************************/

theme_nin/css/style.css

@@ -1892,6 +1892,34 @@ button:disabled:hover, button.disabled:hover, .mini-profile-actions span.disable
   margin-left: 880px;
 }
 
+#modals-minimized {
+    background-color: rgba(0, 0, 0, 0);
+    z-index: 9000;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    width: 1180px;
+    height: 24px;
+    overflow: auto;
+    margin-left: -590px;
+    padding: 0 4%;
+}
+
+#modals-minimized li {
+    display: inline-block;
+    opacity: .88;
+    font-size: 10px;
+    color: #FFF;
+    background-color: #66686B;
+    margin: 0 2px;
+    padding: 4px 8px;
+}
+
+#modals-minimized li:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
 
 /********** CONFIG SUBMENU & SEARCH RESULTS *********** */
 /* line 76, ../sass/style.sass */
@@ -2706,7 +2734,7 @@ ol.toptrends-list a:hover {
 }
 
 /* line 629, ../sass/style.sass */
-.modal-close {
+.modal-close, .minimize-modal {
   position: absolute;
   right: 10px;
   top: 0;
@@ -2716,7 +2744,7 @@ ol.toptrends-list a:hover {
   color: rgba(255, 255, 255, 0.7);
 }
 /* line 639, ../sass/style.sass */
-.modal-close:hover {
+.modal-close:hover, .minimize-modal:hover {
   color: white;
 }
 /* line 641, ../sass/style.sass */
@@ -2724,6 +2752,10 @@ ol.toptrends-list a:hover {
   display: none;
 }
 
+.minimize-modal {
+    right: 35px;
+}
+
 /* line 644, ../sass/style.sass */
 .mark-all-as-read {
   float: left;
@@ -2744,7 +2776,7 @@ ol.toptrends-list a:hover {
 /* line 662, ../sass/style.sass */
 .modal-back {
   position: absolute;
-  right: 35px;
+  right: 70px;
   top: 0;
   font-size: 14px;
   line-height: 40px;
@@ -3489,6 +3521,11 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
     float: left;
     font-size: 80%;
   }
+
+    #modals-minimized {
+        width: 900px;
+        margin-left: -450px;
+    }
 }
 @media (max-width: 900px) {
   /* line 21, ../sass/_responsive.sass */

theme_nin/sass/_responsive.sass

@@ -15,6 +15,10 @@
 		float: left
 		font-size: 80%
 
+	#modals-minimized
+		width: 900px
+		margin-left: -450px
+
 @media (max-width: 900px)
 	.profile-modal .modal-wrapper
 		margin-left: 0

theme_nin/sass/style.sass

@@ -65,6 +65,30 @@
     margin-left: 880px;
     @extend .clear-fix
 
+#modals-minimized
+    background-color: rgba(0, 0, 0, 0)
+    z-index: 9000
+    position: fixed
+    bottom: 0
+    left: 50%
+    width: $site-width
+    height: 24px
+    overflow: auto
+    margin-left: $site-width/2
+    padding: 0 4%
+
+    li
+        display: inline-block
+        opacity: .88
+        font-size: 10px
+        color: #FFF
+        background-color: #66686B
+        margin: 0 2px
+        padding: 4px 8px
+
+        &:hover
+            opacity: 1
+            cursor: pointer
 
 
 /********** CONFIG SUBMENU & SEARCH RESULTS ************/