(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;
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 = 'iconbar';
var settingsName = "remark.".concat(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 = "".concat(getLevel(window.location.pathname, layout), "assets/skins/").concat(settings.primary, ".css");
link.id = 'skinStyle';
head.appendChild(link);
}
if (settings.sidebar && settings.sidebar === 'dark') {
var menubarFn = setInterval(function () {
var menubar = document.getElementsByClassName('site-menubar');
if (menubar.length > 0) {
clearInterval(menubarFn);
menubar[0].className += ' site-menubar-dark';
}
}, 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-".concat(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: '
',
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: 'light',
navbar: 'indigo',
navbarInverse: 'true',
primary: 'indigo'
},
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=\"".concat(v, "\"]"), self.$sidebar).prop('checked', true);
self.sidebarImprove(v);
break;
case 'navbar':
$("input[value=\"".concat(v, "\"]"), self.$navbar).prop('checked', true);
self.navbarImprove(v);
break;
case 'navbarInverse':
var flag = v !== 'false';
$('input[value="inverse"]', self.$navbar).prop('checked', flag);
self.navbarImprove('inverse', flag);
break;
case 'primary':
$("input[value=\"".concat(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 $(""));
},
item: function item(type, name, id, content) {
var item = "");
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, "".concat(name, "-").concat(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 === 'light') {
// this.$siteSidebar.removeClass('site-menubar-dark');
this.$siteSidebar.removeClass('site-menubar-dark').addClass("site-menubar-".concat(val));
} else if (val === 'dark') {
// this.$siteSidebar.addClass('site-menubar-' + val);
this.$siteSidebar.removeClass('site-menubar-light');
}
},
navbarImprove: function navbarImprove(val, checked) {
if (val === 'inverse') {
checked ? this.$siteNavbar.addClass('navbar-inverse') : this.$siteNavbar.removeClass('navbar-inverse');
} else {
var bg = "bg-".concat(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 = "".concat(this.path, "assets/skins/").concat(val, ".css");
if (val === 'primary') {
$link.remove();
return;
}
if ($link.length === 0) {
$('head').append(""));
} else {
$link.attr('href', href);
}
},
reset: function reset() {
localStorage.clear();
this.initLocalStorage();
}
};
Skintools.init();
});
}
}
});