j1-template 2024.3.14 → 2024.3.16

data/assets/theme/j1/adapter/js/amplitude.js

@@ -87,10 +87,10 @@ j1.adapter.amplitude = ((j1, window) => {
 
   // göobal settings
   // ---------------------------------------------------------------------------
-  var environment             = '{{environment}}';
-  var cookie_names            = j1.getCookieNames();
-  var user_state              = j1.readCookie(cookie_names.user_state);
-  var state                   = 'not_started';
+  var environment   = '{{environment}}';
+  var cookie_names  = j1.getCookieNames();
+  var user_state    = j1.readCookie(cookie_names.user_state);
+  var state         = 'not_started';
 
   // module settings
   // ---------------------------------------------------------------------------
@@ -156,23 +156,6 @@ j1.adapter.amplitude = ((j1, window) => {
   // ---------------------------------------------------------------------------
   // var playerWaveformSampleRate       = '{{amplitude_defaults.player.waveform_sample_rate}}';
 
-  // ---------------------------------------------------------------------------
-  // YouTube Player Tech (loaded early, runs on Document Ready)
-  // ---------------------------------------------------------------------------
-  //
-  // $(function() {
-  //   // Load YTP API code asynchronously and create a player for later use
-  //   var techScript;
-  //   var tech    = document.createElement('script');
-  //
-  //   tech.id     = 'yt_player_init';
-  //   tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js";
-  //   techScript  = document.getElementsByTagName('script')[0];
-  //
-  //   // Append Tech script
-  //   techScript.parentNode.insertBefore(tech, techScript);
-  // });
-
   // ---------------------------------------------------------------------------
   // helper functions
   // ---------------------------------------------------------------------------
@@ -208,7 +191,6 @@ j1.adapter.amplitude = ((j1, window) => {
       _this             = j1.adapter.amplitude;
       logger            = log4javascript.getLogger('j1.adapter.amplitude');
 
-
       // -----------------------------------------------------------------------
       // module initializer
       // -----------------------------------------------------------------------
@@ -224,8 +206,6 @@ j1.adapter.amplitude = ((j1, window) => {
           logger.debug('\n' + 'module state: ' + _this.getState());
           logger.info('\n' + 'module is being initialized');
 
-          // jQuery('.scrollbar-rail').scrollbar();
-
           // -------------------------------------------------------------------
           // create global playlist (songs)
           // -------------------------------------------------------------------
@@ -355,7 +335,7 @@ j1.adapter.amplitude = ((j1, window) => {
           );
 
           // dynamic loader variable to setup the player on ID {{player.id}}
-          dependency = 'dependencies_met_html_loaded_{{player.id}}';
+          dependency                    = 'dependencies_met_html_loaded_{{player.id}}';
           load_dependencies[dependency] = '';
 
           // ---------------------------------------------------------------------
@@ -396,7 +376,6 @@ j1.adapter.amplitude = ((j1, window) => {
     // initApi
     // -------------------------------------------------------------------------
     initApi: (songlist) => {
-
       logger.info('\n' + 'initialze API: started');
 
       {% comment %} collect playlists
@@ -456,6 +435,7 @@ j1.adapter.amplitude = ((j1, window) => {
       // See:  https://521dimensions.com/open-source/amplitudejs/docs
       // NOTE: slider VALUE (volume) is set by DEFAULT settings (player)
       Amplitude.init({
+
         bindings: {
           33:  'play_pause',
           37:  'prev',
@@ -530,13 +510,16 @@ j1.adapter.amplitude = ((j1, window) => {
             } // END if pause on next title
           }
         }, // END callbacks
+
         // waveforms: {
         //   sample_rate:    playerWaveformSampleRate
         // },
+
         continue_next:    playerPlayNextTitle,
         volume:           playerVolumeValue,
         volume_decrement: playerVolumeSliderStep,
         volume_increment: playerVolumeSliderStep
+
       }); // END Amplitude init
 
     }, // END initApi
@@ -548,22 +531,25 @@ j1.adapter.amplitude = ((j1, window) => {
 
       var dependencies_met_player_instances_initialized = setInterval (() => {
         if (apiInitialized.state) {
-            logger.info('\n' + 'initialize player specific UI events: started');
+          var parentContainer = (document.getElementById('{{xhr_container_id}}') !== null) ? true : false;
+          var parentContainerExist = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
 
+          logger.info('\n' + 'initialize player specific UI events: started');
+          
           {% for player in amplitude_options.players %} {% if player.enabled %}
             {% assign xhr_data_path = amplitude_options.xhr_data_path %}
             {% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
 
-            playerID      = '{{player.id}}';
-            playerType    = '{{player.type}}';
-            playList      = '{{player.playlist}}';
-            playListName  = '{{player.playlist.name}}'
-            playListTitle = '{{player.playlist.title}}';
-
+            playerID            = '{{player.id}}';
+            playerType          = '{{player.type}}';
+            playList            = '{{player.playlist}}';
+            playListName        = '{{player.playlist.name}}'
+            playListTitle       = '{{player.playlist.title}}';
+            
             logger.debug('\n' + 'set playlist {{player.playlist}} on id #{{player.id}} with title: ' + playListTitle);
 
             // dynamic loader variable to setup the player on ID {{player.id}}
-            dependency = 'dependencies_met_player_loaded_{{player.id}}';
+            dependency                    = 'dependencies_met_player_loaded_{{player.id}}';
             load_dependencies[dependency] = '';
 
             // -----------------------------------------------------------------
@@ -571,9 +557,10 @@ j1.adapter.amplitude = ((j1, window) => {
             // -----------------------------------------------------------------
             load_dependencies['dependencies_met_player_loaded_{{player.id}}'] = setInterval (() => {
               // check if HTML portion of the player is loaded successfully
-              var xhrLoadState = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
+              var xhrLoadState        = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
+              var playerExistsInPage  = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
 
-              if (xhrLoadState === 'success') {
+              if (xhrLoadState === 'success' && playerExistsInPage) {
 
                 // set song (title) specific audio info links
                 // -------------------------------------------------------------
@@ -625,11 +612,11 @@ j1.adapter.amplitude = ((j1, window) => {
                     {% if player.id contains 'compact' %}
                     // ---------------------------------------------------------
                     // START compact player UI events
-                    //
+                    //                    
                     if (document.getElementById('{{player.id}}') !== null) {
 
-                      // show|hide scrollbar in playlist
-                      // -------------------------------------------------------
+                      // show|hide scrollbar in playlist (compact player)
+                      // -------------------------------------------------------                   
                       const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
                       if (songsInPlaylist.length <= 8) {
                         const titleListCompactPlayer = document.getElementById('compact_player_title_list_' + playListName);
@@ -658,7 +645,7 @@ j1.adapter.amplitude = ((j1, window) => {
                           playlistScreen.classList.remove('slide-out-top');
                           playlistScreen.classList.add('slide-in-top');
                           playlistScreen.style.display = "block";
-                          playlistScreen.style.zIndex = "999";
+                          playlistScreen.style.zIndex = "199";
 
                           // disable scrolling (if window viewport >= BS Medium and above)
                           if (window.innerWidth >= 720) {
@@ -669,28 +656,28 @@ j1.adapter.amplitude = ((j1, window) => {
                             }
                           }
                         }); // END EventListener 'click' (compact player|show playlist)
-                     }
+                     } // END if showPlaylist
 
-                      // hide playlist
-                      var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
-                      if (hidePlaylist !== null) {
-                        hidePlaylist.addEventListener('click', function(event) {
-                          var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
+                    // hide playlist
+                    var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
+                    if (hidePlaylist !== null) {
+                      hidePlaylist.addEventListener('click', function(event) {
+                        var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
 
-                          playlistScreen.classList.remove('slide-in-top');
-                          playlistScreen.classList.add('slislide-out-top');
-                          playlistScreen.style.display = "none";
-                          playlistScreen.style.zIndex = "1";
+                        playlistScreen.classList.remove('slide-in-top');
+                        playlistScreen.classList.add('slislide-out-top');
+                        playlistScreen.style.display = "none";
+                        playlistScreen.style.zIndex = "1";
 
-                          // enable scrolling
-                          if ($('body').hasClass('stop-scrolling')) {
-                            $('body').removeClass('stop-scrolling');
-                          }
-                        }); // END EventListener 'click' (compact player|show playlist)
-                      }
+                        // enable scrolling
+                        if ($('body').hasClass('stop-scrolling')) {
+                          $('body').removeClass('stop-scrolling');
+                        }
+                      }); // END EventListener 'click' (compact player|show playlist)
+                    } // END if hidePlaylist
 
-                      // click on progress bar
-                      // -------------------------------------------------------
+                    // click on progress bar
+                    // -------------------------------------------------------
 
                       // getElementsByClassName returns an Array-like object
                       var progressBars = document.getElementsByClassName("compact-player-progress");
@@ -704,7 +691,7 @@ j1.adapter.amplitude = ((j1, window) => {
                           Amplitude.setSongPlayedPercentage(
                             (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
                         }); // END EventListener 'click'
-                      }
+                      } // END for
 
                       // click on skip forward|backward (compact player)
                       // See: https://github.com/serversideup/amplitudejs/issues/384
@@ -722,8 +709,8 @@ j1.adapter.amplitude = ((j1, window) => {
 
                             if (currentTime > 0) {
                               Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
-                            } // END EventListener 'click'
-                          });
+                            }
+                          }); // END EventListener 'click'
                         } // END if ID
                       } // END for SkipForwardButtons
 
@@ -739,8 +726,8 @@ j1.adapter.amplitude = ((j1, window) => {
 
                             if (currentTime > 0) {
                               Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
-                            } // END EventListener 'click'
-                          });
+                            }
+                          }); // END EventListener 'click'
                         } // END if ID
                       } // END for SkipBackwardButtons
 
@@ -749,6 +736,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       if (compactPlayerShuffleButton) {
                         compactPlayerShuffleButton.addEventListener('click', function(event) {
                           var shuffleState = (document.getElementById('compact_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
+
                           Amplitude.setShuffle(shuffleState)
                         }); // END EventListener 'click'
                       } // END compactPlayerShuffleButton
@@ -758,6 +746,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       if (compactPlayerRepeatButton) {
                         compactPlayerRepeatButton.addEventListener('click', function(event) {
                           var repeatState = (document.getElementById('compact_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
+
                           Amplitude.setRepeat(repeatState)
                         }); // END EventListener 'click'
                       } // END compactPlayerRepeatButton
@@ -778,7 +767,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       if (largePlayerPreviousButton && largePlayerPreviousButton.getAttribute("data-amplitude-source") === 'youtube') {
                         largePlayerPreviousButton.addEventListener('click', function(event) {
                           var playlist  = this.getAttribute("data-amplitude-playlist");
-                          var songIndex = ytpSongIndex;                          // Amplitude.getActiveIndex();
+                          var songIndex = ytpSongIndex;                         // Amplitude.getActiveIndex();
 
                         }); // END EventListener 'click'
                       }
@@ -822,7 +811,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       if (largePlayerNextButton && largePlayerPlayButton.getAttribute("data-amplitude-source") === 'youtube') {
                         largePlayerNextButton.addEventListener('click', function(event) {
                           var playlist  = this.getAttribute("data-amplitude-playlist");
-                          var songIndex = ytpSongIndex;                          // Amplitude.getActiveIndex();
+                          var songIndex = ytpSongIndex;                         // Amplitude.getActiveIndex();
                         }); // END EventListener 'click'
                       }
 
@@ -833,8 +822,8 @@ j1.adapter.amplitude = ((j1, window) => {
                           largetPlayerSongContainer[i].addEventListener('click', function(event) {
                             var playlist        = this.getAttribute("data-amplitude-playlist");
                             var playlistLength  = largetPlayerSongContainer.length;
-                            ytpSongIndex         = this.getAttribute("data-amplitude-song-index");
-                          });
+                            ytpSongIndex        = this.getAttribute("data-amplitude-song-index");
+                          }); // END EventListener 'click'
                         } // END if Attribute
                       } // END for
 
@@ -849,7 +838,7 @@ j1.adapter.amplitude = ((j1, window) => {
                           Amplitude.setSongPlayedPercentage(
                             (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
                         }); // END EventListener 'click'
-                      }
+                      } // END for
 
                       // click on skip forward|backward (large player)
                       // See: https://github.com/serversideup/amplitudejs/issues/384
@@ -880,9 +869,8 @@ j1.adapter.amplitude = ((j1, window) => {
                               if (currentTime > 0) {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
-                            }); // END EventListener 'click
-                          }
-
+                            }); // END EventListener 'click'
+                          } // END else
                         } // END if ID
                       } // END for SkipForwardButtons
 
@@ -905,8 +893,7 @@ j1.adapter.amplitude = ((j1, window) => {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
                             }); // END EventListener 'click'
-                          }
-
+                          } // END else
                         } // END if ID
                       } // END for SkipBackwardButtons
 
@@ -926,14 +913,14 @@ j1.adapter.amplitude = ((j1, window) => {
                           var repeatState = (document.getElementById('large_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
                           Amplitude.setRepeat(repeatState)
                         }); // END EventListener 'click'
-                      } // END largePlayerRepeatButton
+                      } // END if largePlayerRepeatButton
 
-                      // enable|disable scrolling on playlist
+                      // enable|disable scrolling on playlist (large player)
                       // -------------------------------------------------------
                       if (document.getElementById('large_player_right') !== null) {
 
                         // show|hide scrollbar in playlist
-                        // -------------------------------------------------------
+                        // -----------------------------------------------------
                         const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
 
                         if (songsInPlaylist.length <= 8) {
@@ -943,18 +930,38 @@ j1.adapter.amplitude = ((j1, window) => {
                           }
                         }
 
-                        // scroll to player top position
-                        // -------------------------------------------------------
-                        var playlistHeader = document.getElementById("playlist_header_{{player.id}}");
-
-                        playlistHeader.addEventListener('click', function(event) {
-                          var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
+                        // scroll to player top position (large player)
+                        //
+                        // Bootstrap grid breakpoints
+                        //   SN:     576px           Mobile
+                        //   MD:     768px           Small Desktop|Tablet
+                        //   LG:     992px           Default Desktop
+                        //   XL:     1200px          Large Desktop
+                        //   XXL:    1400px          X Large Desktop
+                        // -----------------------------------------------------
+                        var largePlayerPlaylistHeader = document.getElementById("playlist_header_{{player.id}}");
+
+                        largePlayerPlaylistHeader.addEventListener('click', function(event) {
+                          var playerRight     = document.getElementById("{{player.id}}");
+                          var playlistHeader  = document.getElementById("playlist_header_{{player.id}}");
+                          var scrollOffset    = (window.innerWidth >= 992) ? -130 : -43;
+
+                          // scroll player|playlist to top position (large player)
+                          //
+                          const targetDivPlayerRight            = playerRight;
+                          const targetDivPositionPlayerRight    = targetDivPlayerRight.offsetTop;
+                          const targetDivPlaylistHeader         = playlistHeader;
+                          const targetDivPositionplaylistHeader = targetDivPlaylistHeader.offsetTop;
+
+                          // NOTE: depending on WINDOW SIZE the relation changes to TOP POSITION (targetDivPosition)
+                          //
+                          if (targetDivPositionPlayerRight > targetDivPositionplaylistHeader) {
+                            window.scrollTo(0, targetDivPositionPlayerRight + targetDivPlaylistHeader.offsetParent.firstElementChild.clientHeight + scrollOffset);
+                          } else {
+                            window.scrollTo(0, targetDivPositionplaylistHeader + scrollOffset);
+                          }
 
-                          // scroll player to top position
-                          const targetDiv         = document.getElementById("playlist_header_{{player.id}}");
-                          const targetDivPosition = targetDiv.offsetTop;
-                          window.scrollTo(0, targetDivPosition + scrollOffset);
-                        }); // END EventListener 'click'
+                        }); // END EventListener largePlayerPlaylistHeader 'click'
 
                         // disable scrolling (if window viewport >= BS Medium and above)
                         document.getElementById('large_player_right').addEventListener('mouseenter', function() {
@@ -976,6 +983,23 @@ j1.adapter.amplitude = ((j1, window) => {
 
                       } // END enable|disable scrolling on playlist
 
+                      // set volume slider presets (for the player when exists|enabled)
+                      //
+                      var volumeSlider = document.getElementById('volume_slider_{{player.id}}');
+                      if (volumeSlider !== null) {
+                        const volumeMin     = parseInt('{{player.volume_slider.min_value}}'); 
+                        const volumeMax     = parseInt('{{player.volume_slider.max_value}}'); 
+                        const volumeValue   = parseInt('{{player.volume_slider.preset_value}}'); 
+                        const volumeStep    = parseInt('{{player.volume_slider.slider_step}}'); 
+  
+                        // if player has NO slider presets, use amplitude defaults
+                        //
+                        volumeSlider.min    = (isNaN(volumeMin))   ? parseInt('{{amplitude_defaults.player.volume_slider.min_value}}')    : volumeMin;
+                        volumeSlider.max    = (isNaN(volumeMax))   ? parseInt('{{amplitude_defaults.player.volume_slider.max_value}}')    : volumeMax;
+                        volumeSlider.value  = (isNaN(volumeValue)) ? parseInt('{{amplitude_defaults.player.volume_slider.preset_value}}') : volumeValue;
+                        volumeSlider.step   = (isNaN(volumeStep))  ? parseInt('{{amplitude_defaults.player.volume_slider.slider_step}}')  : volumeStep; 
+                      } // END volumeSlider exists
+
                     } // END large player UI events
                     {% endif %}
 
@@ -1130,4 +1154,4 @@ j1.adapter.amplitude = ((j1, window) => {
   {{ cache|strip_empty_lines }}
 {%- endif -%}
 
-{%- assign cache = false -%}
+{%- assign cache = false -%}

data/assets/theme/j1/adapter/js/j1.js

@@ -301,10 +301,10 @@ var j1 = ((options) => {
   var user_state = {
     'writer':                       'j1.adapter',
     'template_version':             '{{template_version}}',
-    'theme_name':                   'UnoLight',
-    'theme_css':                    '/assets/theme/j1/core/css/themes/unolight/bootstrap.css',
-    'theme_author':                 'J1 Team',
-    'theme_version':                '{{template_version}}',
+    'theme_name':                   '',
+    'theme_css':                    '',
+    'theme_author':                 '',
+    'theme_version':                '',
     'session_active':               false,
     'google_translate':             'disabled',
     'translate_all_pages':          true,

data/assets/theme/j1/adapter/js/masonry.js

@@ -141,7 +141,7 @@ j1.adapter.masonry = ((j1, window) => {
       // Load  module DEFAULTS|CONFIG
       masonryDefaults = $.extend({}, {{masonry_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
       masonrySettings = $.extend({}, {{masonry_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
-      masonryOptions =  $.extend(true, {}, masonryDefaults, masonrySettings);
+      masonryOptions  =  $.extend(true, {}, masonryDefaults, masonrySettings);
 
       // load HTML portion for all grids
       _this.loadGridHTML(masonryOptions, masonryOptions.grids);
@@ -153,7 +153,7 @@ j1.adapter.masonry = ((j1, window) => {
         var pageState      = $('#content').css("display");
         var pageVisible    = (pageState === 'block') ? true: false;
         var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
-        // var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
+//      var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
         if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();

data/assets/theme/j1/adapter/js/themes.js

@@ -263,9 +263,47 @@ j1.adapter.themes = (function (j1, window) {
           logger.info('\n' + 'hide page until theme is loaded');
           $('#no_flicker').hide();
 
-          // logger.info('\n' + 'cookie ' +  cookie_names.user_state + ' successfully loaded after: ' + interval_count * 25 + ' ms');
-
-          // initial theme data
+          logger.info('\n' + 'cookie ' +  cookie_names.user_state + ' successfully loaded after: ' + interval_count * 25 + ' ms');
+
+          // load previously selected theme from cookie (preferred)
+          // if (user_state.theme_css !== '') {
+          //   user_state.theme_name       = default_theme_name;
+          //   user_state.theme_css        = default_theme_css;
+          //   user_state.theme_author     = default_theme_author;
+          //   user_state.theme_author_url = default_theme_author_url;
+
+          //   cookie_written = j1.writeCookie({
+          //     name:     cookie_names.user_state,
+          //     data:     user_state,
+          //     secure:   secure,
+          //     expires:  365
+          //   });
+
+          //   if (!cookie_written) {
+          //     logger.error('\n' + 'failed to write cookie: ' + cookie_names.user_consent);
+          //   }
+          // } // END load previously selected theme
+
+          // load default theme (j1_config and NO theme given with (user_state) cookie
+          // if (user_state.theme_css === '' && default_theme_css.theme_css !== '') {
+          //   user_state.theme_name       = default_theme_name;
+          //   user_state.theme_css        = default_theme_css;
+          //   user_state.theme_author     = default_theme_author;
+          //   user_state.theme_author_url = default_theme_author_url;
+
+          //   cookie_written = j1.writeCookie({
+          //     name:     cookie_names.user_state,
+          //     data:     user_state,
+          //     secure:   secure,
+          //     expires:  365
+          //   });
+
+          //   if (!cookie_written) {
+          //     logger.error('\n' + 'failed to write cookie: ' + cookie_names.user_consent);
+          //   }
+          // } // END load default theme
+
+          // load default theme if NO theme given with (user_state) cookie
           if (user_state.theme_css === '') {
             user_state.theme_name       = default_theme_name;
             user_state.theme_css        = default_theme_css;
@@ -282,7 +320,7 @@ j1.adapter.themes = (function (j1, window) {
             if (!cookie_written) {
              logger.error('\n' + 'failed to write cookie: ' + cookie_names.user_consent);
             }
-          } // END if user_state theme_css === ''
+          } // END oad default theme
 
           // set the theme switcher state
           user_state.theme_switcher = themesOptions.enabled;