302 lines
12 KiB
JavaScript
Executable File
302 lines
12 KiB
JavaScript
Executable File
(function (global, factory) {
|
|
if (typeof define === "function" && define.amd) {
|
|
define('/Plugin/skintools', [], factory);
|
|
} else if (typeof exports !== "undefined") {
|
|
factory();
|
|
} else {
|
|
var mod = {
|
|
exports: {}
|
|
};
|
|
factory();
|
|
global.PluginSkintools = mod.exports;
|
|
}
|
|
})(this, function () {
|
|
'use strict';
|
|
|
|
if (window.localStorage) {
|
|
var getLevel = function getLevel(url, tag) {
|
|
var arr = url.split('/').reverse();
|
|
var level = void 0;
|
|
var path = '';
|
|
|
|
for (var i = 0; i < arr.length; i++) {
|
|
if (arr[i] === tag) {
|
|
level = i;
|
|
}
|
|
}
|
|
|
|
for (var m = 1; m < level; m++) {
|
|
path += '../';
|
|
}
|
|
|
|
return path;
|
|
};
|
|
|
|
var layout = 'base';
|
|
var settingsName = 'remark.' + layout + '.skinTools';
|
|
var settings = localStorage.getItem(settingsName);
|
|
|
|
if (settings) {
|
|
if (settings[0] === '{') {
|
|
settings = JSON.parse(settings);
|
|
}
|
|
|
|
if (settings['primary'] && settings['primary'] !== 'primary') {
|
|
var head = document.head;
|
|
var link = document.createElement('link');
|
|
|
|
link.type = 'text/css';
|
|
link.rel = 'stylesheet';
|
|
link.href = getLevel(window.location.pathname, layout) + 'assets/skins/' + settings['primary'] + '.css';
|
|
link.id = 'skinStyle';
|
|
|
|
head.appendChild(link);
|
|
}
|
|
|
|
if (settings['sidebar'] && settings['sidebar'] === 'light') {
|
|
var menubarFn = setInterval(function () {
|
|
var menubar = document.getElementsByClassName('site-menubar');
|
|
if (menubar.length > 0) {
|
|
clearInterval(menubarFn);
|
|
menubar[0].className += ' site-menubar-light';
|
|
}
|
|
}, 5);
|
|
}
|
|
|
|
var navbarFn = setInterval(function () {
|
|
var navbar = document.getElementsByClassName('site-navbar');
|
|
|
|
if (navbar.length > 0) {
|
|
clearInterval(navbarFn);
|
|
if (settings['navbar'] && settings['navbar'] !== 'primary') {
|
|
navbar[0].className += ' bg-' + settings['navbar'] + '-600';
|
|
}
|
|
if (settings['navbarInverse'] && settings['navbarInverse'] !== 'false') {
|
|
navbar[0].className += ' navbar-inverse';
|
|
}
|
|
}
|
|
}, 5);
|
|
}
|
|
|
|
if (document.addEventListener) {
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var $body = $(document.body);
|
|
var $doc = $(document);
|
|
var $win = $(window);
|
|
|
|
var Storage = {
|
|
set: function set(key, value) {
|
|
if (!window.localStorage) {
|
|
return null;
|
|
}
|
|
if (!key || !value) {
|
|
return null;
|
|
}
|
|
|
|
if (Object(value) === value) {
|
|
value = JSON.stringify(value);
|
|
}
|
|
localStorage.setItem(key, value);
|
|
},
|
|
get: function get(key) {
|
|
if (!window.localStorage) {
|
|
return null;
|
|
}
|
|
|
|
var value = localStorage.getItem(key);
|
|
|
|
if (!value) {
|
|
return null;
|
|
}
|
|
|
|
if (value[0] === '{') {
|
|
value = JSON.parse(value);
|
|
}
|
|
|
|
return value;
|
|
}
|
|
};
|
|
|
|
var Skintools = {
|
|
tpl: '<div class="site-skintools">' + '<div class="site-skintools-inner">' + '<div class="site-skintools-toggle">' + '<i class="icon wb-settings primary-600"></i>' + '</div>' + '<div class="site-skintools-content">' + '<div class="nav-tabs-horizontal">' + '<ul role="tablist" class="nav nav-tabs nav-tabs-line">' + '<li role="presentation" class="nav-item"><a class="nav-link active" role="tab" aria-controls="skintoolsSidebar" href="#skintoolsSidebar" data-toggle="tab" aria-expanded="true">Sidebar</a></li>' + '<li class="nav-item" role="presentation"><a class="nav-link" role="tab" aria-controls="skintoolsNavbar" href="#skintoolsNavbar" data-toggle="tab" aria-expanded="false">Navbar</a></li>' + '<li class="nav-item" role="presentation"><a class="nav-link" role="tab" aria-controls="skintoolsPrimary" href="#skintoolsPrimary" data-toggle="tab" aria-expanded="false">Primary</a></li>' + '</ul>' + '<div class="tab-content">' + '<div role="tabpanel" id="skintoolsSidebar" class="tab-pane active"></div>' + '<div role="tabpanel" id="skintoolsNavbar" class="tab-pane"></div>' + '<div role="tabpanel" id="skintoolsPrimary" class="tab-pane"></div>' + '<button class="btn btn-outline btn-block btn-primary mt-20" id="skintoolsReset" type="button">Reset</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>',
|
|
skintoolsSidebar: ['dark', 'light'],
|
|
skintoolsNavbar: ['primary', 'brown', 'cyan', 'green', 'grey', 'indigo', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow'],
|
|
navbarSkins: 'bg-primary-600 bg-brown-600 bg-cyan-600 bg-green-600 bg-grey-600 bg-indigo-600 bg-orange-600 bg-pink-600 bg-purple-600 bg-red-600 bg-teal-600 bg-yellow-700',
|
|
skintoolsPrimary: ['primary', 'brown', 'cyan', 'green', 'grey', 'indigo', 'orange', 'pink', 'purple', 'red', 'teal', 'yellow'],
|
|
storageKey: settingsName,
|
|
defaultSettings: {
|
|
'sidebar': 'dark',
|
|
'navbar': 'primary',
|
|
'navbarInverse': 'false',
|
|
'primary': 'primary'
|
|
},
|
|
init: function init() {
|
|
var self = this;
|
|
|
|
this.path = getLevel(window.location.pathname, layout);
|
|
this.overflow = false;
|
|
|
|
this.$siteSidebar = $('.site-menubar');
|
|
this.$siteNavbar = $('.site-navbar');
|
|
|
|
this.$container = $(this.tpl);
|
|
this.$toggle = $('.site-skintools-toggle', this.$container);
|
|
this.$content = $('.site-skintools-content', this.$container);
|
|
this.$tabContent = $('.tab-content', this.$container);
|
|
|
|
this.$sidebar = $('#skintoolsSidebar', this.$content);
|
|
this.$navbar = $('#skintoolsNavbar', this.$content);
|
|
this.$primary = $('#skintoolsPrimary', this.$content);
|
|
|
|
this.build(this.$sidebar, this.skintoolsSidebar, 'skintoolsSidebar', 'radio', 'Sidebar Skins');
|
|
this.build(this.$navbar, ['inverse'], 'skintoolsNavbar', 'checkbox', 'Navbar Type');
|
|
this.build(this.$navbar, this.skintoolsNavbar, 'skintoolsNavbar', 'radio', 'Navbar Skins');
|
|
this.build(this.$primary, this.skintoolsPrimary, 'skintoolsPrimary', 'radio', 'Primary Skins');
|
|
|
|
this.$container.appendTo($body);
|
|
|
|
this.$toggle.on('click', function () {
|
|
self.$container.toggleClass('is-open');
|
|
});
|
|
|
|
$('#skintoolsSidebar input').on('click', function () {
|
|
self.sidebarEvents(this);
|
|
});
|
|
$('#skintoolsNavbar input').on('click', function () {
|
|
self.navbarEvents(this);
|
|
});
|
|
$('#skintoolsPrimary input').on('click', function () {
|
|
self.primaryEvents(this);
|
|
});
|
|
|
|
$('#skintoolsReset').on('click', function () {
|
|
self.reset();
|
|
});
|
|
|
|
this.initLocalStorage();
|
|
},
|
|
initLocalStorage: function initLocalStorage() {
|
|
var self = this;
|
|
|
|
this.settings = Storage.get(this.storageKey);
|
|
|
|
if (this.settings === null) {
|
|
this.settings = $.extend(true, {}, this.defaultSettings);
|
|
|
|
Storage.set(this.storageKey, this.settings);
|
|
}
|
|
|
|
if (this.settings && $.isPlainObject(this.settings)) {
|
|
$.each(this.settings, function (n, v) {
|
|
switch (n) {
|
|
case 'sidebar':
|
|
$('input[value="' + v + '"]', self.$sidebar).prop('checked', true);
|
|
self.sidebarImprove(v);
|
|
break;
|
|
case 'navbar':
|
|
$('input[value="' + v + '"]', self.$navbar).prop('checked', true);
|
|
self.navbarImprove(v);
|
|
break;
|
|
case 'navbarInverse':
|
|
var flag = v === 'false' ? false : true;
|
|
$('input[value="inverse"]', self.$navbar).prop('checked', flag);
|
|
self.navbarImprove('inverse', flag);
|
|
break;
|
|
case 'primary':
|
|
$('input[value="' + v + '"]', self.$primary).prop('checked', true);
|
|
self.primaryImprove(v);
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
updateSetting: function updateSetting(item, value) {
|
|
this.settings[item] = value;
|
|
Storage.set(this.storageKey, this.settings);
|
|
},
|
|
title: function title(content) {
|
|
return $('<h4 class="site-skintools-title">' + content + '</h4>');
|
|
},
|
|
item: function item(type, name, id, content) {
|
|
var item = '<div class="' + type + '-custom ' + type + '-' + content + '"><input id="' + id + '" type="' + type + '" name="' + name + '" value="' + content + '"><label for="' + id + '">' + content + '</label></div>';
|
|
return $(item);
|
|
},
|
|
build: function build($wrap, data, name, type, title) {
|
|
if (title) {
|
|
this.title(title).appendTo($wrap);
|
|
}
|
|
for (var i = 0; i < data.length; i++) {
|
|
this.item(type, name, name + '-' + data[i], data[i]).appendTo($wrap);
|
|
}
|
|
},
|
|
sidebarEvents: function sidebarEvents(self) {
|
|
var val = $(self).val();
|
|
|
|
this.sidebarImprove(val);
|
|
this.updateSetting('sidebar', val);
|
|
},
|
|
navbarEvents: function navbarEvents(self) {
|
|
var val = $(self).val();
|
|
var checked = $(self).prop('checked');
|
|
|
|
this.navbarImprove(val, checked);
|
|
|
|
if (val === 'inverse') {
|
|
this.updateSetting('navbarInverse', checked.toString());
|
|
} else {
|
|
this.updateSetting('navbar', val);
|
|
}
|
|
},
|
|
primaryEvents: function primaryEvents(self) {
|
|
var val = $(self).val();
|
|
|
|
this.primaryImprove(val);
|
|
|
|
this.updateSetting('primary', val);
|
|
},
|
|
sidebarImprove: function sidebarImprove(val) {
|
|
if (val === 'dark') {
|
|
this.$siteSidebar.removeClass('site-menubar-light');
|
|
} else if (val === 'light') {
|
|
this.$siteSidebar.addClass('site-menubar-' + val);
|
|
}
|
|
},
|
|
navbarImprove: function navbarImprove(val, checked) {
|
|
if (val === 'inverse') {
|
|
checked ? this.$siteNavbar.addClass('navbar-inverse') : this.$siteNavbar.removeClass('navbar-inverse');
|
|
} else {
|
|
var bg = 'bg-' + val + '-600';
|
|
if (val === 'yellow') {
|
|
bg = 'bg-yellow-700';
|
|
}
|
|
if (val === 'primary') {
|
|
bg = '';
|
|
}
|
|
|
|
this.$siteNavbar.removeClass(this.navbarSkins).addClass(bg);
|
|
}
|
|
},
|
|
primaryImprove: function primaryImprove(val) {
|
|
var $link = $('#skinStyle', $('head'));
|
|
var href = this.path + 'assets/skins/' + val + '.css';
|
|
if (val === 'primary') {
|
|
$link.remove();
|
|
return;
|
|
}
|
|
if ($link.length === 0) {
|
|
$('head').append('<link id="skinStyle" href="' + href + '" rel="stylesheet" type="text/css"/>');
|
|
} else {
|
|
$link.attr('href', href);
|
|
}
|
|
},
|
|
reset: function reset() {
|
|
localStorage.clear();
|
|
this.initLocalStorage();
|
|
}
|
|
};
|
|
|
|
Skintools.init();
|
|
});
|
|
}
|
|
}
|
|
}); |