diff --git a/README.org b/README.org
index 8c5da47..69991bc 100644
--- a/README.org
+++ b/README.org
@@ -13,6 +13,20 @@
#+END_SRC
*** Add attribute ~onload="simpleCssSwitch()"~ to *body* tag
+ This include string "themes", and show only titles of themes.
+
+ If you want to use different theme style, you can choose from the predifined:
+
+ - themes-all :: include string "themes", show index and title of the theme
+ - themes-numbers :: include string "themes", and show only the numbers as title
+ - default :: include string "themes", and show only titles of themes
+ - numbers :: show only the numbers
+ - titles :: show only the titles
+
+ For example if you want to use the theme style /numbers/ you need to do this:
+ #+BEGIN_SRC html
+
+ #+END_SRC
*** Insert container for CSS switch menu
Place where you want following snippet
#+BEGIN_SRC html
diff --git a/css/simple-css-switch.css b/css/simple-css-switch.css
index e6cc130..bdc8103 100644
--- a/css/simple-css-switch.css
+++ b/css/simple-css-switch.css
@@ -39,3 +39,27 @@
color: #ddd;
background-color: #122112;
}
+.s-css-s-style--default .s-css-s--idx,
+.s-css-s-style--titles .s-css-s--idx,
+.s-css-s-style--themes-numbers .s-css-s--title,
+.s-css-s-style--numbers .s-css-s--title,
+.s-css-s-style--titles #s-css-s--menu-title,
+.s-css-s-style--numbers #s-css-s--menu-title,
+.s-css-s-style--default .s-css-s--wrapper,
+.s-css-s-style--themes-numbers .s-css-s--wrapper,
+.s-css-s-style--themes-all .s-css-s--wrapper {
+ display: none;
+}
+.s-css-s-style--themes-all .s-css-s--idx:after {
+ content: '.';
+ margin-right: .2em;
+}
+#s-css-s--menu-title:hover,
+.s-css-s--button:hover{
+ cursor: pointer;
+}
+.s-css-s-style--default .s-css-s--menu-visible,
+.s-css-s-style--themes-numbers .s-css-s--menu-visible,
+.s-css-s-style--themes-all .s-css-s--menu-visible {
+ display: block;
+}
diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js
index 10c79f7..662a595 100644
--- a/js/simple-css-switch.js
+++ b/js/simple-css-switch.js
@@ -1,6 +1,47 @@
-function simpleCssSwitch() {
+function simpleCssSwitch(theme) {
+ var scsssStyles = {
+ "default" : {
+ title: "themes",
+ numbers: false,
+ titles: true
+ },
+ "themes-numbers" : {
+ title: "themes",
+ numbers: true,
+ titles: false
+ },
+ "themes-all" : {
+ title: "themes",
+ numbers: true,
+ titles: true
+ },
+ "numbers" : {
+ title: "undefined",
+ numbers: true,
+ titles: false
+ },
+ "titles" : {
+ title: "undefined",
+ numbers: false,
+ titles: true
+ }
+ };
+ var choosenStyle = "default";
+ if (theme && scsssStyles[theme]) {
+ choosenStyle = theme;
+ }
var stylesMenuContainer = document.getElementById('s-css-s--menu');
+ stylesMenuContainer.classList.add('s-css-s-style--' + choosenStyle);
var styleButtons = [];
+
+ var menuTitle = document.createElement('div');
+ menuTitle.setAttribute("id", "s-css-s--menu-title");
+ menuTitle.innerText = 'Themes';
+ stylesMenuContainer.appendChild(menuTitle);
+
+ var menuWrap = document.createElement('div');
+ menuWrap.classList.add('s-css-s--wrapper');
+
var stylesAvailable = Array.prototype.slice.call(
document.querySelectorAll('.s-css-s--style')
);
@@ -9,16 +50,23 @@ function simpleCssSwitch() {
var styleOptionButton = document.createElement('button');
styleOptionButton.setAttribute('title', style.title);
styleOptionButton.classList.add('s-css-s--button', cssFileAsClass);
- styleOptionButton.innerText = idx;
+ styleOptionButton.innerHTML = '' + idx + '';
+ styleOptionButton.innerHTML += '' + style.title + '';
styleOptionButton.addEventListener(
'click', function(e) {
chooseStyle(style.title);
markActiveButton(e.target);
});
+ stylesMenuContainer.appendChild(menuWrap);
styleButtons.push(styleOptionButton);
- stylesMenuContainer.appendChild(styleOptionButton);
+ menuWrap.appendChild(styleOptionButton);
});
+ menuTitle.addEventListener(
+ 'click', function() {
+ menuWrap.classList.toggle("s-css-s--menu-visible");
+ });
+
var activeStyle = localStorage.getItem('s-css-s--active-style');
if (activeStyle) {
styleButtons.forEach(function(btn){