client: refactor entry selection

Previously, we had a separate #fullscreen-entry element, where we copied the body of entry when opened on mobile. Now we are using CSS to make the original entry occupy the full viewport.

public/css/style.css

@@ -774,10 +774,6 @@ input {
             display:none;
         }
 
-#fullscreen-entry {
-    display:none;
-}
-
 /* sources */
 
 .source input {
@@ -1174,7 +1170,6 @@ body:not(.loggedin) .entry-unread {
         }
 
     .entry-content {
-        display:none;
         -moz-column-count: 1;
         -webkit-column-count: 1;
         column-count: 1;
@@ -1360,34 +1355,34 @@ body:not(.loggedin) .entry-unread {
         z-index:100;
     }
 
-    #fullscreen-entry {
-        position:absolute;
+    .fullscreen-mode {
+        overflow: hidden;
+    }
+
+    /* selected expanded entry will be displayed full-screen on mobile */
+    .entry.selected.expanded {
+        position: fixed;
         left:0;
         top:0;
         margin:0;
         border:0;
         width:100%;
-        overflow-x: hidden;
+        height: 100%;
         background:#ffffff;
-        z-index:22;
+        z-index:200;
     }
 
-        #fullscreen-entry .entry {
+        .entry.selected.expanded.entry {
             padding-top:50px;
         }
 
-        #fullscreen-entry .entry-title {
+        .entry.selected.expanded .entry-title {
             padding-top:40px;
             color:#333333;
             font-size:1.3em;
         }
-
-        #fullscreen-entry .entry-content,
-        #fullscreen-entry .entry-toolbar {
-            display:block;
-        }
-
-        #fullscreen-entry .entry-toolbar {
+
+        .entry.selected.expanded .entry-toolbar {
             position:fixed;
             top:0;
             left:0;
@@ -1397,10 +1392,10 @@ body:not(.loggedin) .entry-unread {
             font-size:0.8em;
             margin-bottom:0;
         }
-        
-            #fullscreen-entry .entry-close {
-                display:block;
-            }
+
+        .entry.selected.expanded .entry-close {
+            display:block;
+        }
 
     .entry-toolbar .entry-newwindow {
         display:none;

public/js/selfoss-events-entries.js

@@ -5,18 +5,16 @@ selfoss.events.entries = function() {
 
     $('.entry, .entry-title').unbind('click');
 
+    // clear the selected entry
+    selfoss.ui.entrySelect(null);
+
     // show/hide entry
     var target = selfoss.isMobile() ? '.entry' : '.entry-title';
     $(target).click(function() {
         var parent = ((target == '.entry') ? $(this) : $(this).parent());
 
-        if (selfoss.isSmartphone() == false) {
-            $('.entry.selected').removeClass('selected');
-            parent.addClass('selected');
-        }
-
         // prevent event on fullscreen touch
-        if (parent.hasClass('fullscreen')) {
+        if (document.body.classList.contains('fullscreen-mode')) {
             return;
         }
 
@@ -28,62 +26,77 @@ selfoss.events.entries = function() {
 
         var entryId = parent.attr('data-entry-id');
 
+        var entryContent = parent.find('.entry-content');
+
         // show entry in popup
         if (selfoss.isSmartphone()) {
-            var scrollTop = null;
+            // save scroll position
+            var scrollTop = $(window).scrollTop();
 
             // hide nav
             if ($('#nav').is(':visible')) {
-                scrollTop = $(window).scrollTop();
                 scrollTop = scrollTop - $('#nav').height();
                 scrollTop = scrollTop < 0 ? 0 : scrollTop;
                 $(window).scrollTop(scrollTop);
                 $('#nav').hide();
             }
 
-            // save scroll position and hide content
-            scrollTop = $(window).scrollTop();
-            var content = $('#content');
-            $(window).scrollTop(0);
-            content.hide();
-
             // show fullscreen
-            var fullscreen = $('#fullscreen-entry');
-            fullscreen.html('<div id="entrr' + parent.attr('data-entry-id') + '" class="entry fullscreen" data-entry-id="' + parent.attr('data-entry-id') + '">' + parent.html() + '</div>');
-            fullscreen.show();
+            document.body.classList.add('fullscreen-mode');
+            selfoss.ui.entrySelect(parent);
+            selfoss.ui.entryExpand(parent);
             selfoss.events.setHash('same', 'same', entryId);
+            selfoss.events.entriesToolbar(parent);
+
+            parent.attr('aria-modal', 'true');
 
-            // lazy load images in fullscreen
             if ($('#config').data('load_images_on_mobile') == '1') {
-                fullscreen.lazyLoadImages();
-                fullscreen.find('.entry-loadimages').hide();
+                parent.find('.entry-loadimages').hide();
+                entryContent.lazyLoadImages();
             }
 
-            // set events for fullscreen
-            selfoss.events.entriesToolbar(fullscreen);
+            $.trapKeyboard(parent);
 
             // set events for closing fullscreen
-            fullscreen.find('.entry, .entry-close').click(function(e) {
-                if (e.target.tagName.toLowerCase() == 'a') {
-                    return;
-                }
-                if (autoHideReadOnMobile && ($('#entrr' + parent.attr('id').substr(5)).hasClass('unread') == false)) {
-                    $('#' + parent.attr('id')).hide();
+            var closeTargets = $().add(parent).add(parent.find('.entry-close'));
+            var parentNative = parent.get(0);
+            parentNative.closeFullScreen = function(e) {
+                // can be called by other things
+                if (e) {
+                    e.stopPropagation();
+
+                    // do not exit fullscreen when clicking link
+                    if (e.target.tagName.toLowerCase() == 'a') {
+                        return;
+                    }
                 }
-                content.show();
+
+                document.body.classList.remove('fullscreen-mode');
+
+                selfoss.ui.entryCollapse(parent);
                 selfoss.events.setHash();
+
+                if (autoHideReadOnMobile && (parent.hasClass('unread') == false)) {
+                    parent.hide();
+                }
+
+                parent.attr('aria-modal', 'false');
+
+                $.untrapKeyboard();
+
+                closeTargets.off('click', parentNative.closeFullScreen);
+                parentNative.closeFullScreen = null;
+
                 $(window).scrollTop(scrollTop);
-                fullscreen.hide();
-            });
+            };
+            closeTargets.click(parentNative.closeFullScreen);
 
             // automark as read
             if (autoMarkAsRead) {
-                fullscreen.find('.entry-unread').click();
+                parent.find('.entry-unread').click();
             }
         // open entry content
         } else {
-            var entryContent = parent.find('.entry-content');
-
             // show/hide (with toolbar)
             if (selfoss.ui.entryIsExpanded(parent)) {
                 selfoss.ui.entryCollapse(parent);
@@ -92,6 +105,7 @@ selfoss.events.entries = function() {
                 if ($('#config').data('auto_collapse') == '1') {
                     selfoss.ui.entryCollapseAll();
                 }
+                selfoss.ui.entrySelect(parent);
                 selfoss.ui.entryExpand(parent);
                 selfoss.events.setHash('same', 'same', entryId);
                 selfoss.events.entriesToolbar(parent);
@@ -150,7 +164,7 @@ selfoss.events.entries = function() {
 
     // more
     $('.stream-more').unbind('click').click(function() {
-        var lastEntry = $('.entry').not('.fullscreen').filter(':last');
+        var lastEntry = $('.entry').filter(':last');
         selfoss.events.setHash();
         selfoss.filter.extraIds.length = 0;
         selfoss.filter.fromDatetime = lastEntry.data('entry-datetime');
@@ -218,7 +232,10 @@ selfoss.events.entries = function() {
         // ensure scrolling to requested entry even if scrolling to article
         // header is disabled
         if ($('#config').data('scroll_to_article_header') == '0') {
-            entry.get(0).scrollIntoView();
+            // needs to be delayed for some reason
+            requestAnimationFrame(function() {
+                entry.get(0).scrollIntoView();
+            });
         }
     }
 };

public/js/selfoss-events-entriestoolbar.js

@@ -27,23 +27,23 @@ selfoss.events.entriesToolbar = function(parent) {
         return false;
     });
 
-    // next item on smartphone
+    // next item on tablet
     parent.find('.entry-toolbar .entry-next').unbind('click').click(function() {
         selfoss.shortcuts.nextprev('next', true);
         return false;
     });
 
-    // next item on tablet
+    // next item on smartphone
     parent.find('.entry-smartphone-share .entry-next').unbind('click').click(function() {
-        var $selected = $('.entry.selected, .entry.fullscreen:visible');
-        var id = $selected.attr('id').replace('entrr', 'entry');
-
-        // dismiss the currently open modal
-        $selected.find('.entry-unread.active').click();
-        $selected.find('.entry-title').click();
-
-        // activate a new entry
-        selfoss.ui.entryActivate($('#' + id).next('.entry'));
+        /**
+         * Next button can be only accessed from selected element.
+         * @type {!jQuery wrapped Element}
+         */
+        var selected = selfoss.ui.entryGetSelected();
+        selfoss.ui.entryDeactivate(selected);
+
+        var next = selected.next('.entry');
+        selfoss.ui.entryActivate(next);
 
         return false;
     });

public/js/selfoss-events.js

@@ -112,6 +112,7 @@ selfoss.events = {
                               + '/' + selfoss.events.subsection;
 
         var entryId = null;
+        var entry;
         if (hashPath.length > 2 && (entryId = parseInt(hashPath[2]))) {
             selfoss.events.entryId = entryId;
         } else {
@@ -131,22 +132,24 @@ selfoss.events = {
                 // open it.
                 if (selfoss.events.entryId
                     && selfoss.events.processHashChange) {
-                    $('#entry' + selfoss.events.entryId).click();
+                    entry = $('#entry' + selfoss.events.entryId);
+                    selfoss.ui.entrySelect(entry);
+                    selfoss.ui.entryExpand(entry);
                 }
 
                 // if navigating using browser buttons and entry opened,
                 // close opened entry.
                 if (!selfoss.events.entryId
                     && selfoss.events.processHashChange
-                    && $('#fullscreen-entry').is(':visible')) {
-                    $('.entry.fullscreen').click();
+                    && selfoss.ui.entryGetSelected() !== null) {
+                    selfoss.ui.entrySelect(null);
                 }
             } else {
                 // if navigating using browser buttons and entry selected,
                 // scroll to entry.
                 if (selfoss.events.entryId
                     && selfoss.events.processHashChange) {
-                    var entry = $('#entry' + selfoss.events.entryId);
+                    entry = $('#entry' + selfoss.events.entryId);
                     if (entry) {
                         entry.get(0).scrollIntoView();
                     }