started on horizontal scroller for theme previews

themes/grav/app/whitelabel/presets.js

@@ -38,7 +38,9 @@ body.on('click', '[data-preset-values]', (event) => {
     let data = target.data('preset-values');
 
     Object.keys(data).forEach((section) => {
-        if (typeof data[section] === 'string') { return; }
+        if (typeof data[section] === 'string') {
+            return;
+        }
 
         Object.keys(data[section]).forEach((key) => {
             let field = $(`[name="data[whitelabel][color_scheme][${section}][${key}]"], [name="data[${section}][${key}]"]`);
@@ -62,3 +64,107 @@ body.on('click', '[data-reset-scss]', (event) => {
     });
     fields = [];
 });
+
+// Horizontal Scroll Functionality
+$.fn.hscrollarrows = function() {
+    return this.each(function() {
+
+        let navNext = $('<a class="nav-next hide"></a>');
+        let navPrev = $('<a class="nav-prev hide"></a>');
+        let scrollTime = null;
+        let resizeTime = null;
+        let scrolling = false;
+
+        let elm_w = 0;
+        let elem_data_w = 0;
+        let max_scroll = 0;
+        let inc_scroll = 0;
+
+        let calcData = function() {
+            elm_w = elem.width();
+            elem_data_w = elem_data.width();
+            max_scroll = elem_data_w - elm_w;
+            inc_scroll = elm_w * 0.3; // 20%
+        };
+
+        let revalidate = function() {
+            calcData();
+            stateNavs();
+        };
+
+        let run = function() {
+            calcData();
+            setupNavs();
+        };
+
+        let setupNavs = function() {
+
+            elem.parent().prepend(navNext);
+            elem.parent().prepend(navPrev);
+            navNext.on('click', next);
+            navPrev.on('click', prev);
+            stateNavs();
+
+            $(elem).scroll(function() {
+                if (!scrolling) {
+                    clearTimeout(scrollTime);
+                    scrollTime = setTimeout(function() {
+                        stateNavs();
+                    }, 250);
+                }
+            });
+
+            $(window).resize(function() {
+                clearTimeout(resizeTime);
+                resizeTime = setTimeout(function() {
+                    revalidate();
+                }, 250);
+            });
+        };
+
+        let stateNavs = function() {
+            let current_scroll = elem.scrollLeft;
+            if (current_scroll < max_scroll) {
+                navNext.removeClass('hide');
+            } else {
+                navNext.addClass('hide');
+            }
+            if (current_scroll > 0) {
+                navPrev.removeClass('hide');
+            } else {
+                navPrev.addClass('hide');
+            }
+            scrolling = false;
+        };
+
+        let next = function() {
+            let current_scroll = elem.scrollLeft;
+            if (current_scroll < max_scroll) {
+                scrolling = true;
+                elem.stop().animate({
+                    scrollLeft: (current_scroll + inc_scroll)
+                }, stateNavs);
+            }
+        };
+
+        let prev = function() {
+            let current_scroll = elem.scrollLeft;
+            if (current_scroll > 0) {
+                scrolling = true;
+                elem.stop().animate({
+                    scrollLeft: (current_scroll - inc_scroll)
+                }, stateNavs);
+            }
+        };
+
+        let elem = $(this);
+        let elem_data = $(':first-child', elem);
+
+        run();
+
+    });
+};
+
+$(document).ready(() => {
+    $('.jquery-horizontal-scroll').hscrollarrows();
+});

themes/grav/scss/template.scss

@@ -99,5 +99,8 @@
 // Whitelabel
 @import "template/whitelabel";
 
+// Horizontal Scroll
+@import "template/horizontal-scroll";
+
 // Custom
 @import "template/custom";

themes/grav/scss/template/_horizontal-scroll.scss

@@ -0,0 +1,54 @@
+.jquery-horizontal-scroll-wrap{
+    position: relative;
+
+    .nav-next, .nav-prev{
+        position: absolute;
+        z-index: 5;
+        top: 50%;
+        font-size: 20px;
+        line-height: 20px;
+        display: block;
+        padding: 30px 8px;
+        color: #fff;
+        background: #000;
+        background: rgba(0,0,0,0.65);
+        cursor: pointer;
+        margin-top: -40px;
+
+        &.hide {
+            display: none;
+        }
+
+        &:hover, &:focus {
+            opacity: 1;
+        }
+
+        &:before{
+            display: inline;
+            font-family: "FontAwesome";
+        }
+    }
+
+    .nav-next {
+        right: 0;
+
+        &:before {
+            content: "\f105";
+        }
+
+    }
+
+    .nav-prev {
+        left: 0;
+
+        & :before {
+            content: "\f104";
+        }
+
+    }
+
+    .jquery-horizontal-scroll{
+        overflow: auto;
+        position: relative;
+    }
+}

themes/grav/scss/template/_whitelabel.scss

@@ -20,6 +20,7 @@ $transparent-image: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEB
     &.predefined-scheme:hover {
         cursor: pointer;
 
+
         span {
             color: white;
         }

themes/grav/templates/forms/fields/themepreview/themepreview.html.twig

@@ -1,100 +1,104 @@
 {% extends "forms/field.html.twig" %}
 
 {% block input %}
-    {% for id,preset in whitelabel_presets %}
+    <div class="jquery-horizontal-scroll-wrap">
-    <style>
+        <div class="jquery-horizontal-scroll">
-        .pid-{{ id }} .admin-preview {
+            {% for id,preset in whitelabel_presets %}
-            background: {{ preset.colors['page-bg'] }};
+            <style>
-        }
+                .pid-{{ id }} .admin-preview {
-        .pid-{{ id }} .ap-sidebar {
+                    background: {{ preset.colors['page-bg'] }};
-            background: {{ preset.colors['nav-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-sidebar {
-        .pid-{{ id }} .ap-logo {
+                    background: {{ preset.colors['nav-bg'] }};
-            background: {{ preset.colors['logo-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-logo {
-        .pid-{{ id }} .ap-logo::after {
+                    background: {{ preset.colors['logo-bg'] }};
-            background: {{ preset.colors['logo-link'] }};
+                }
-        }
+                .pid-{{ id }} .ap-logo::after {
-        .pid-{{ id }} .ap-text, .pid-{{ id }} .ap-text::before, .pid-{{ id }} .ap-text::after {
+                    background: {{ preset.colors['logo-link'] }};
-            background: {{ preset.colors['nav-link'] }};
+                }
-        }
+                .pid-{{ id }} .ap-text, .pid-{{ id }} .ap-text::before, .pid-{{ id }} .ap-text::after {
-        .pid-{{ id }} .ap-active {
+                    background: {{ preset.colors['nav-link'] }};
-            background: {{ preset.colors['nav-selected-bg'] }};
+                }
-            border-left-color: {{ preset.colors['button-bg'] }};
+                .pid-{{ id }} .ap-active {
-        }
+                    background: {{ preset.colors['nav-selected-bg'] }};
-        .pid-{{ id }} .ap-active::after {
+                    border-left-color: {{ preset.colors['button-bg'] }};
-            background: {{ preset.colors['nav-selected-link'] }};
+                }
-        }
+                .pid-{{ id }} .ap-active::after {
-        .pid-{{ id }} .ap-toolbar {
+                    background: {{ preset.colors['nav-selected-link'] }};
-            background: {{ preset.colors['toolbar-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-toolbar {
-        .pid-{{ id }} .ap-toolbar::after {
+                    background: {{ preset.colors['toolbar-bg'] }};
-            background: {{ preset.colors['toolbar-text'] }};
+                }
-        }
+                .pid-{{ id }} .ap-toolbar::after {
-        .pid-{{ id }} .ap-button {
+                    background: {{ preset.colors['toolbar-text'] }};
-            background: {{ preset.colors['button-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-button {
-        .pid-{{ id }} .ap-content {
+                    background: {{ preset.colors['button-bg'] }};
-            background: {{ preset.colors['content-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-content {
-        .pid-{{ id }} .ap-title {
+                    background: {{ preset.colors['content-bg'] }};
-            background: {{ preset.colors['content-header'] }};
+                }
-        }
+                .pid-{{ id }} .ap-title {
-        .pid-{{ id }} .ap-content .ap-text {
+                    background: {{ preset.colors['content-header'] }};
-            background: {{ preset.colors['content-link'] }};
+                }
-        }
+                .pid-{{ id }} .ap-content .ap-text {
-        .pid-{{ id }} .ap-content .ap-text::before, .pid-{{ id }} .ap-content .ap-text::after {
+                    background: {{ preset.colors['content-link'] }};
-            background: {{ preset.colors['content-text'] }};
+                }
-        }
+                .pid-{{ id }} .ap-content .ap-text::before, .pid-{{ id }} .ap-content .ap-text::after {
-        .pid-{{ id }} .ap-update {
+                    background: {{ preset.colors['content-text'] }};
-            background: {{ preset.colors['update-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-update {
-        .pid-{{ id }} .ap-update::after {
+                    background: {{ preset.colors['update-bg'] }};
-            background: {{ preset.colors['update-text'] }};
+                }
-        }
+                .pid-{{ id }} .ap-update::after {
-        .pid-{{ id }} .ap-notice {
+                    background: {{ preset.colors['update-text'] }};
-            background: {{ preset.colors['notice-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-notice {
-        .pid-{{ id }} .ap-notice::after {
+                    background: {{ preset.colors['notice-bg'] }};
-            background: {{ preset.colors['notice-text'] }};
+                }
-        }
+                .pid-{{ id }} .ap-notice::after {
-        .pid-{{ id }} .ap-critical {
+                    background: {{ preset.colors['notice-text'] }};
-            background: {{ preset.colors['critical-bg'] }};
+                }
-        }
+                .pid-{{ id }} .ap-critical {
-        .pid-{{ id }} .ap-critical::after {
+                    background: {{ preset.colors['critical-bg'] }};
-            background: {{ preset.colors['critical-text'] }};
+                }
-        }
+                .pid-{{ id }} .ap-critical::after {
-    </style>
+                    background: {{ preset.colors['critical-text'] }};
-    <div class="pid-{{ id }} admin-preview-wrapper" data-preset-values="{{ preset|json_encode|e('html_attr') }}">
+                }
-        <div class="admin-preview form-border">
+            </style>
-            <div class="ap-overlay"><b><i class="fa fa-download"></i> {{ "PLUGIN_ADMIN.LOAD_PRESET"|tu|e }}</b></div>
+            <div class="pid-{{ id }} admin-preview-wrapper" data-preset-values="{{ preset|json_encode|e('html_attr') }}">
-            <div class="ap-sidebar">
+                <div class="admin-preview form-border">
-                <div class="ap-logo"></div>
+                    <div class="ap-overlay"><b><i class="fa fa-download"></i> {{ "PLUGIN_ADMIN.LOAD_PRESET"|tu|e }}</b></div>
-                <div class="ap-nav">
+                    <div class="ap-sidebar">
-                    <span class="ap-text"></span>
+                        <div class="ap-logo"></div>
-                    <span class="ap-active"></span>
+                        <div class="ap-nav">
-                    <span class="ap-text"></span>
+                            <span class="ap-text"></span>
+                            <span class="ap-active"></span>
+                            <span class="ap-text"></span>
+                        </div>
+                    </div>
+                    <div class="ap-toolbar">
+                        <span class="ap-button"></span>
+                    </div>
+                    <div class="ap-page">
+                        <div class="ap-content">
+                            <span class="ap-update"></span>
+                            <span class="ap-title"></span>
+                            <span class="ap-text"></span>
+                            <span class="ap-notice"></span>
+                            <span class="ap-text"></span>
+                            <span class="ap-critical"></span>
+                            <span class="ap-text"></span>
+                        </div>
+                    </div>
                 </div>
-            </div>
+                <div class="admin-preview-title">
-            <div class="ap-toolbar">
+                    {{ preset.name|e }}
-                <span class="ap-button"></span>
-            </div>
-            <div class="ap-page">
-                <div class="ap-content">
-                    <span class="ap-update"></span>
-                    <span class="ap-title"></span>
-                    <span class="ap-text"></span>
-                    <span class="ap-notice"></span>
-                    <span class="ap-text"></span>
-                    <span class="ap-critical"></span>
-                    <span class="ap-text"></span>
                 </div>
+                <input type="hidden" value="{{ preset|json_encode }}" />
             </div>
+            {% endfor %}
         </div>
-        <div class="admin-preview-title">
-            {{ preset.name|e }}
-        </div>
-        <input type="hidden" value="{{ preset|json_encode }}" />
     </div>
-    {% endfor %}
 {% endblock %}