Add lazy loading for navbar

node101-io · Jun 24, 2023 · 3bb9937 · 3bb9937
1 parent 848462c
commit 3bb9937
Show file tree

Hide file tree

Showing 25 changed files with 389 additions and 130 deletions.
diff --git a/app.js b/app.js
@@ -37,8 +37,9 @@ if (cluster.isMaster) {
   const QUERY_LIMIT = 20;
 
   const blogRouteController = require('./routes/blogRoute');
-  const projectsRouteController = require('./routes/projectsRoute');
   const indexRouteController = require('./routes/indexRoute');
+  const navbarRouteController = require('./routes/navbarRoute');
+  const projectsRouteController = require('./routes/projectsRoute');
   const writersRouteController = require('./routes/writersRoute');
 
   app.set('views', path.join(__dirname, 'views'));
@@ -96,6 +97,7 @@ if (cluster.isMaster) {
   });
 
   app.use('/', indexRouteController);
+  app.use('/navbar', navbarRouteController);
   app.use('/projects', projectsRouteController);
   app.use('/writers', writersRouteController);
   app.use('/blog/*', blogRouteController);

diff --git a/controllers/blog/get.js b/controllers/blog/get.js
@@ -24,8 +24,8 @@ module.exports = (req, res) => {
           title: blog.title,
           includes: {
             external: {
-              css: ['general', 'header', 'info', 'navbar', 'writing'],
-              js: ['ancestorWithClassName', 'header', 'navbar', 'page', 'serverRequest', 'writing']
+              css: ['confirm', 'general', 'header', 'info', 'navbar', 'writing'],
+              js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'navbar', 'page', 'serverRequest', 'writing']
             },
             meta: {
               title: blog.title,
@@ -48,8 +48,8 @@ module.exports = (req, res) => {
           title: writing.title,
           includes: {
             external: {
-              css: ['general', 'header', 'navbar', 'page', 'writing'],
-              js: ['ancestorWithClassName', 'header', 'navbar', 'page', 'serverRequest', 'writing']
+              css: ['confirm', 'general', 'header', 'navbar', 'page', 'writing'],
+              js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'navbar', 'page', 'serverRequest', 'writing']
             },
             meta: {
               title: writing.title,

diff --git a/controllers/index/editors-pick/get.js b/controllers/index/editors-pick/get.js
@@ -21,8 +21,8 @@ module.exports = (req, res) => {
       title: res.__('Editor\'s Pick'),
       includes: {
         external: {
-          css: ['general', 'header', 'navbar', 'page', 'writing'],
-          js: ['ancestorWithClassName', 'header', 'navbar', 'page', 'serverRequest', 'writing']
+          css: ['confirm', 'general', 'header', 'navbar', 'page', 'writing'],
+          js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'navbar', 'page', 'serverRequest', 'writing']
         },
         meta: {
           title: res.__('Editor\'s Pick'),

diff --git a/controllers/index/exclusive/get.js b/controllers/index/exclusive/get.js
@@ -21,8 +21,8 @@ module.exports = (req, res) => {
       title: res.__('Exclusive Content'),
       includes: {
         external: {
-          css: ['general', 'header', 'navbar', 'page', 'writing'],
-          js: ['ancestorWithClassName', 'header', 'navbar', 'page', 'serverRequest', 'writing']
+          css: ['confirm', 'general', 'header', 'navbar', 'page', 'writing'],
+          js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'navbar', 'page', 'serverRequest', 'writing']
         },
         meta: {
           title: res.__('Exclusive Content'),

diff --git a/controllers/index/index/get.js b/controllers/index/index/get.js
@@ -33,8 +33,8 @@ module.exports = (req, res) => {
         title: res.__('Read, Listen & Watch'),
         includes: {
           external: {
-            css: ['general', 'header', 'navbar', 'page', 'writing'],
-            js: ['ancestorWithClassName', 'header', 'navbar', 'page', 'serverRequest', 'writing']
+            css: ['confirm', 'general', 'header', 'navbar', 'page', 'writing'],
+            js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'navbar', 'page', 'serverRequest', 'writing']
           },
           meta: {
             title: res.__('Read, Listen & Watch'),

diff --git a/controllers/index/search/get.js b/controllers/index/search/get.js
@@ -33,8 +33,8 @@ module.exports = (req, res) => {
         title: writings_data.search + res.__(' - Search Results'),
         includes: {
           external: {
-            css: ['general', 'header', 'navbar', 'page', 'writing'],
-            js: ['ancestorWithClassName', 'header', 'navbar', 'page', 'serverRequest', 'writing']
+            css: ['confirm', 'general', 'header', 'navbar', 'page', 'writing'],
+            js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'navbar', 'page', 'serverRequest', 'writing']
           },
           meta: {
             title: res.__('Read, Listen & Watch'),

diff --git a/controllers/navbar/editors-pick/get.js b/controllers/navbar/editors-pick/get.js
@@ -0,0 +1,23 @@
+const EDITORS_PICK_WRITING_COUNT = 5;
+
+const Writing = require('../../../models/writing/Writing');
+
+module.exports = (req, res) => {
+  const language = res.locals.lang;
+
+  Writing.findWritingsByFiltersAndFormatByLanguage({
+    limit: EDITORS_PICK_WRITING_COUNT,
+    label: 'editors_pick',
+    type: 'blog',
+    do_not_load_content: true,
+    do_not_load_blog: true,
+    do_not_load_writer: true
+  }, language, (err, data) => {
+    if (err) return res.json({ success: false, error: err } );
+
+    req.session.navbar_data_editors_pick = data.writings;
+    req.session.navbar_last_update_time = (new Date).getTime();
+
+    return res.json({ success: true, writings: data.writings });
+  });
+}
diff --git a/controllers/navbar/exclusive/get.js b/controllers/navbar/exclusive/get.js
@@ -0,0 +1,23 @@
+const EXCLUSIVE_WRITING_COUNT = 5;
+
+const Writing = require('../../../models/writing/Writing');
+
+module.exports = (req, res) => {
+  const language = res.locals.lang;
+
+  Writing.findWritingsByFiltersAndFormatByLanguage({
+    limit: EXCLUSIVE_WRITING_COUNT,
+    label: 'exclusive',
+    type: 'blog',
+    do_not_load_content: true,
+    do_not_load_blog: true,
+    do_not_load_writer: true
+  }, language, (err, data) => {
+    if (err) return res.json({ success: false, error: err } );
+
+    req.session.navbar_data_exclusive = data.writings;
+    req.session.navbar_last_update_time = (new Date).getTime();
+
+    return res.json({ success: true, writings: data.writings });
+  });
+}
diff --git a/controllers/navbar/tags/get.js b/controllers/navbar/tags/get.js
@@ -0,0 +1,14 @@
+const Tag = require('../../../models/tag/Tag');
+
+module.exports = (req, res) => {
+  const language = res.locals.lang;
+
+  Tag.findTagsByFiltersAndFormatByLanguage({}, language, (err, data) => {
+    if (err) return res.json({ success: false, error: err } );
+
+    req.session.navbar_data_tags = data.tags;
+    req.session.navbar_last_update_time = (new Date).getTime();
+
+    return res.json({ success: true, tags: data.tags });
+  });
+};
diff --git a/controllers/projects/index/get.js b/controllers/projects/index/get.js
@@ -19,8 +19,8 @@ module.exports = (req, res) => {
         title: res.__('Projects'),
         includes: {
           external: {
-            css: ['general', 'header', 'item', 'navbar', 'page', 'text'],
-            js: ['ancestorWithClassName', 'header', 'item', 'navbar', 'page', 'serverRequest']
+            css: ['confirm', 'general', 'header', 'item', 'navbar', 'page', 'text'],
+            js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'item', 'navbar', 'page', 'serverRequest']
           },
           meta: {
             title: res.__('Projects'),

diff --git a/controllers/writers/details/get.js b/controllers/writers/details/get.js
@@ -21,8 +21,8 @@ module.exports = (req, res) => {
         title: writer.name,
         includes: {
           external: {
-            css: ['general', 'header', 'info', 'navbar', 'page', 'writing'],
-            js: ['ancestorWithClassName', 'header', 'navbar', 'page', 'serverRequest', 'writing']
+            css: ['confirm', 'general', 'header', 'info', 'navbar', 'page', 'writing'],
+            js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'navbar', 'page', 'serverRequest', 'writing']
           },
           meta: {
             title: writer.name,

diff --git a/controllers/writers/index/get.js b/controllers/writers/index/get.js
@@ -20,8 +20,8 @@ module.exports = (req, res) => {
         title: res.__('Our Writers'),
         includes: {
           external: {
-            css: ['general', 'header', 'item', 'navbar', 'page', 'text'],
-            js: ['ancestorWithClassName', 'header', 'item', 'navbar', 'page', 'serverRequest']
+            css: ['confirm', 'general', 'header', 'item', 'navbar', 'page', 'text'],
+            js: ['ancestorWithClassName', 'cookies', 'createConfirm', 'header', 'item', 'navbar', 'page', 'serverRequest']
           },
           meta: {
             title: res.__('Our Writers'),

diff --git a/middleware/loadNavbarData.js b/middleware/loadNavbarData.js
@@ -1,64 +1,19 @@
-const EDITORS_PICK_WRITING_COUNT = 5;
-const EXCLUSIVE_WRITING_COUNT = 5;
 const FIVE_MINS_IN_MS = 5 * 60 * 1000;
 
-const Tag = require('../models/tag/Tag');
-const Writing = require('../models/writing/Writing');
-
 module.exports = (req, res, next) => {
-  const language = res.locals.lang;
-
   if (
     req.session &&
-    req.session.navbar_data &&
+    req.session.navbar_data_editors_pick &&
+    req.session.navbar_data_tags &&
+    req.session.navbar_data_exclusive &&
     req.session.navbar_last_update_time &&
     (new Date).getTime() - req.session.navbar_last_update_time < FIVE_MINS_IN_MS
   ) {
-    const navbar = JSON.parse(req.session.navbar_data);
-
-    res.locals.tags = navbar.tags;
-    res.locals.editors_pick = navbar.editors_pick;
-    res.locals.exclusive = navbar.exclusive;
-
-    return next();
-  } else {
-    Tag.findTagsByFiltersAndFormatByLanguage({}, language, (err, tags_data) => {
-      if (err) return res.redirect('/error?message=' + err);
-
-      Writing.findWritingsByFiltersAndFormatByLanguage({
-        limit: EDITORS_PICK_WRITING_COUNT,
-        label: 'editors_pick',
-        type: 'blog',
-        do_not_load_content: true,
-        do_not_load_blog: true,
-        do_not_load_writer: true
-      }, language, (err, editors_pick_data) => {
-        if (err) return res.redirect('/error?message=' + err);
-
-        Writing.findWritingsByFiltersAndFormatByLanguage({
-          limit: EXCLUSIVE_WRITING_COUNT,
-          label: 'exclusive',
-          type: 'blog',
-          do_not_load_content: true,
-          do_not_load_blog: true,
-          do_not_load_writer: true
-        }, language, (err, exclusive_data) => {
-          if (err) return res.redirect('/error?message=' + err);
-
-          req.session.navbar_data = JSON.stringify({
-            tags: tags_data.tags,
-            editors_pick: editors_pick_data.writings,
-            exclusive: exclusive_data.writings
-          });
-          req.session.navbar_last_update_time = (new Date).getTime();
-
-          res.locals.tags = tags_data.tags;
-          res.locals.editors_pick = editors_pick_data.writings;
-          res.locals.exclusive = exclusive_data.writings;
-
-          return next();
-        });
-      });
-    });
+    res.locals.navbar_loaded = true;
+    res.locals.editors_pick = req.session.navbar_data_editors_pick;
+    res.locals.tags = req.session.navbar_data_tags;
+    res.locals.exclusive = req.session.navbar_data_exclusive;
   }
+
+  return next();
 };
diff --git a/models/tag/Tag.js b/models/tag/Tag.js
@@ -94,7 +94,9 @@ TagSchema.statics.findTagsByFiltersAndFormatByLanguage = function (data, languag
   if (!data || typeof data != 'object')
     return callback('bad_request');
 
-  const filters = {};
+  const filters = {
+    is_completed: true
+  };
 
   const limit = data.limit && !isNaN(parseInt(data.limit)) && parseInt(data.limit) > 0 && parseInt(data.limit) < MAX_DOCUMENT_COUNT_PER_QUERY ? parseInt(data.limit) : DEFAULT_DOCUMENT_COUNT_PER_QUERY;
   const page = data.page && !isNaN(parseInt(data.page)) && parseInt(data.page) > 0 ? parseInt(data.page) : 0;

diff --git a/public/css/general/confirm.css b/public/css/general/confirm.css
@@ -63,12 +63,12 @@
   opacity: 1;
 }
 .general-confirm-yes-button {
-  border: 1px solid var(--confirm-color);
+  border: 1px solid var(--main-color);
   border-radius: 7px;
   padding: 10px 15px;
   cursor: pointer;
   margin-left: 15px;
-  color: var(--confirm-color);
+  color: var(--main-color);
   font-weight: 500;
   font-size: 14px;
   opacity: 0.8;

diff --git a/public/css/general/general.css b/public/css/general/general.css
@@ -57,6 +57,7 @@ input[type=number] {
   --space-character-width: 6px;
 
   --main-color: rgba(120, 169, 255, 1);
+  --warning-color: rgba(192, 3, 3, 1);
   --box-color: rgba(6, 6, 9, 1);
   --background-color: rgba(13, 13, 15, 1);
   --background-color-two: rgba(8, 8, 10, 1);

diff --git a/public/css/general/navbar.css b/public/css/general/navbar.css
@@ -1,5 +1,7 @@
 :root {
   --general-navbar-width: 350px;
+  --general-navbar-each-empty-line-height: 50px;
+  --general-navbar-each-empty-line-background-color: rgba(30, 30, 30, 1);
   --general-navbar-short-writing-height: 70px;
   --general-navbar-writing-height: 110px;
 }
@@ -37,6 +39,34 @@
   bottom: 0;
   right: var(--content-horizontal-padding);
 }
+.general-navbar-inner-empty-wrapper, .general-navbar-inner-wrapper {
+  width: 100%;
+  min-width: 100%;
+  height: fit-content;
+  min-height: fit-content;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-color);
+}
+
+.general-navbar-empty-wrapper {
+  height: fit-content;
+  min-height: fit-content;
+  width: 100%;
+  min-width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--box-padding);
+  margin-bottom: var(--box-padding);
+}
+.general-navbar-each-empty-line {
+  height: var(--general-navbar-each-empty-line-height);
+  min-height: var(--general-navbar-each-empty-line-height);
+  width: 100%;
+  min-width: 100%;
+  background-color: var(--general-navbar-each-empty-line-background-color);
+  margin-bottom: calc(var(--box-padding) / 3);
+}
 
 .general-navbar-title-wrapper {
   height: fit-content;

diff --git a/public/js/blog/details.js b/public/js/blog/details.js
@@ -1,5 +1,4 @@
 let MONTHS;
-const NEW_WRITING_LOAD_SCROLL_DISTANCE = 300;
 const WRITING_COUNT = 5;
 
 let blog;

diff --git a/public/js/blog/writing.js b/public/js/blog/writing.js
@@ -1,5 +1,4 @@
 let MONTHS;
-const NEW_WRITING_LOAD_SCROLL_DISTANCE = 300;
 const WRITING_COUNT = 5;
 
 let writing;

diff --git a/public/js/functions/cookies.js b/public/js/functions/cookies.js
@@ -0,0 +1,24 @@
+const COOKIE_PREFIX = 'node101-';
+const DEFAULT_COOKIE_MAX_AGE = 5 * 60 * 1000;
+
+getCookie = function (cookieName) {
+  const name = COOKIE_PREFIX + cookieName + '=';
+  const cookies = decodeURIComponent(document.cookie);
+  const cookieArray = cookies.split(';').map(each => each.trim());
+  let findCookie = cookieArray.find(each => each.indexOf(name) == 0);
+  if (findCookie)
+    findCookie = JSON.parse(findCookie.substring(name.length));
+
+  return findCookie;
+};
+
+setCookie = function (cookieName, cookieValue, cookieMaxAge) {
+  if (!cookieMaxAge || !Number.isInteger(cookieMaxAge) || cookieMaxAge < 0)
+    cookieMaxAge = DEFAULT_COOKIE_MAX_AGE;
+
+  document.cookie = `${COOKIE_PREFIX}${cookieName}=${JSON.stringify(cookieValue)}; Max-Age=${cookieMaxAge}`;
+};
+
+deleteCookie = function (cookieName) {
+  setCookie(cookieName, '', 0);
+};