mirror of
https://github.com/getgrav/grav-plugin-admin.git
synced 2025-11-02 11:26:04 +01:00
started on horizontal scroller for theme previews
This commit is contained in:
Andy Miller
@@ -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();
|
||||
});
|
||||
|
||||
2
themes/grav/css-compiled/template.css
vendored
2
themes/grav/css-compiled/template.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
38
themes/grav/js/admin.min.js
vendored
38
themes/grav/js/admin.min.js
vendored
File diff suppressed because one or more lines are too long
71
themes/grav/js/vendor.min.js
vendored
71
themes/grav/js/vendor.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -99,5 +99,8 @@
|
||||
// Whitelabel
|
||||
@import "template/whitelabel";
|
||||
|
||||
// Horizontal Scroll
|
||||
@import "template/horizontal-scroll";
|
||||
|
||||
// Custom
|
||||
@import "template/custom";
|
||||
|
||||
54
themes/grav/scss/template/_horizontal-scroll.scss
Normal file
54
themes/grav/scss/template/_horizontal-scroll.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,7 @@ $transparent-image: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEB
|
||||
&.predefined-scheme:hover {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
span {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -1,100 +1,104 @@
|
||||
{% extends "forms/field.html.twig" %}
|
||||
|
||||
{% block input %}
|
||||
{% for id,preset in whitelabel_presets %}
|
||||
<style>
|
||||
.pid-{{ id }} .admin-preview {
|
||||
background: {{ preset.colors['page-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-sidebar {
|
||||
background: {{ preset.colors['nav-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-logo {
|
||||
background: {{ preset.colors['logo-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-logo::after {
|
||||
background: {{ preset.colors['logo-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-text, .pid-{{ id }} .ap-text::before, .pid-{{ id }} .ap-text::after {
|
||||
background: {{ preset.colors['nav-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-active {
|
||||
background: {{ preset.colors['nav-selected-bg'] }};
|
||||
border-left-color: {{ preset.colors['button-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-active::after {
|
||||
background: {{ preset.colors['nav-selected-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-toolbar {
|
||||
background: {{ preset.colors['toolbar-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-toolbar::after {
|
||||
background: {{ preset.colors['toolbar-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-button {
|
||||
background: {{ preset.colors['button-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-content {
|
||||
background: {{ preset.colors['content-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-title {
|
||||
background: {{ preset.colors['content-header'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-content .ap-text {
|
||||
background: {{ preset.colors['content-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-content .ap-text::before, .pid-{{ id }} .ap-content .ap-text::after {
|
||||
background: {{ preset.colors['content-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-update {
|
||||
background: {{ preset.colors['update-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-update::after {
|
||||
background: {{ preset.colors['update-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-notice {
|
||||
background: {{ preset.colors['notice-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-notice::after {
|
||||
background: {{ preset.colors['notice-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-critical {
|
||||
background: {{ preset.colors['critical-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-critical::after {
|
||||
background: {{ preset.colors['critical-text'] }};
|
||||
}
|
||||
</style>
|
||||
<div class="pid-{{ id }} admin-preview-wrapper" data-preset-values="{{ preset|json_encode|e('html_attr') }}">
|
||||
<div class="admin-preview form-border">
|
||||
<div class="ap-overlay"><b><i class="fa fa-download"></i> {{ "PLUGIN_ADMIN.LOAD_PRESET"|tu|e }}</b></div>
|
||||
<div class="ap-sidebar">
|
||||
<div class="ap-logo"></div>
|
||||
<div class="ap-nav">
|
||||
<span class="ap-text"></span>
|
||||
<span class="ap-active"></span>
|
||||
<span class="ap-text"></span>
|
||||
<div class="jquery-horizontal-scroll-wrap">
|
||||
<div class="jquery-horizontal-scroll">
|
||||
{% for id,preset in whitelabel_presets %}
|
||||
<style>
|
||||
.pid-{{ id }} .admin-preview {
|
||||
background: {{ preset.colors['page-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-sidebar {
|
||||
background: {{ preset.colors['nav-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-logo {
|
||||
background: {{ preset.colors['logo-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-logo::after {
|
||||
background: {{ preset.colors['logo-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-text, .pid-{{ id }} .ap-text::before, .pid-{{ id }} .ap-text::after {
|
||||
background: {{ preset.colors['nav-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-active {
|
||||
background: {{ preset.colors['nav-selected-bg'] }};
|
||||
border-left-color: {{ preset.colors['button-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-active::after {
|
||||
background: {{ preset.colors['nav-selected-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-toolbar {
|
||||
background: {{ preset.colors['toolbar-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-toolbar::after {
|
||||
background: {{ preset.colors['toolbar-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-button {
|
||||
background: {{ preset.colors['button-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-content {
|
||||
background: {{ preset.colors['content-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-title {
|
||||
background: {{ preset.colors['content-header'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-content .ap-text {
|
||||
background: {{ preset.colors['content-link'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-content .ap-text::before, .pid-{{ id }} .ap-content .ap-text::after {
|
||||
background: {{ preset.colors['content-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-update {
|
||||
background: {{ preset.colors['update-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-update::after {
|
||||
background: {{ preset.colors['update-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-notice {
|
||||
background: {{ preset.colors['notice-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-notice::after {
|
||||
background: {{ preset.colors['notice-text'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-critical {
|
||||
background: {{ preset.colors['critical-bg'] }};
|
||||
}
|
||||
.pid-{{ id }} .ap-critical::after {
|
||||
background: {{ preset.colors['critical-text'] }};
|
||||
}
|
||||
</style>
|
||||
<div class="pid-{{ id }} admin-preview-wrapper" data-preset-values="{{ preset|json_encode|e('html_attr') }}">
|
||||
<div class="admin-preview form-border">
|
||||
<div class="ap-overlay"><b><i class="fa fa-download"></i> {{ "PLUGIN_ADMIN.LOAD_PRESET"|tu|e }}</b></div>
|
||||
<div class="ap-sidebar">
|
||||
<div class="ap-logo"></div>
|
||||
<div class="ap-nav">
|
||||
<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="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 class="admin-preview-title">
|
||||
{{ preset.name|e }}
|
||||
</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 %}
|
||||
|
||||
Reference in New Issue
Block a user