From 5102f9050b3e0eb300413ead8488388e6b3ff1cf Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 14:54:33 +0300 Subject: [PATCH 1/9] add list with all options that can be used as theme --- js/simple-css-switch.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js index 10c79f7..215bcde 100644 --- a/js/simple-css-switch.js +++ b/js/simple-css-switch.js @@ -1,4 +1,31 @@ -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 stylesMenuContainer = document.getElementById('s-css-s--menu'); var styleButtons = []; var stylesAvailable = Array.prototype.slice.call( From 86349c0d908e1be3613980a189741af1dd3a7303 Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 14:56:00 +0300 Subject: [PATCH 2/9] check the existence of given theme --- js/simple-css-switch.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js index 215bcde..d02ee33 100644 --- a/js/simple-css-switch.js +++ b/js/simple-css-switch.js @@ -26,6 +26,10 @@ function simpleCssSwitch(theme) { titles: true } }; + var choosenStyle = "default"; + if (theme && scsssStyles[theme]) { + choosenStyle = theme; + } var stylesMenuContainer = document.getElementById('s-css-s--menu'); var styleButtons = []; var stylesAvailable = Array.prototype.slice.call( From c9c95ca3122420fdce858d747082f920be63bb55 Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 15:02:23 +0300 Subject: [PATCH 3/9] add class specified by used theme --- js/simple-css-switch.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js index d02ee33..a4cc26f 100644 --- a/js/simple-css-switch.js +++ b/js/simple-css-switch.js @@ -31,6 +31,7 @@ function simpleCssSwitch(theme) { choosenStyle = theme; } var stylesMenuContainer = document.getElementById('s-css-s--menu'); + stylesMenuContainer.classList.add('s-css-s-style--' + choosenStyle); var styleButtons = []; var stylesAvailable = Array.prototype.slice.call( document.querySelectorAll('.s-css-s--style') From 478850dbfe59d9e433fbcd5ff55ac391a082f4ff Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 16:13:23 +0300 Subject: [PATCH 4/9] add string `themes` in the menu container --- js/simple-css-switch.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js index a4cc26f..88a0c00 100644 --- a/js/simple-css-switch.js +++ b/js/simple-css-switch.js @@ -33,6 +33,12 @@ function simpleCssSwitch(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 stylesAvailable = Array.prototype.slice.call( document.querySelectorAll('.s-css-s--style') ); From 8bd1eafab7892f722f7364d4c11f7a5b4df2a45f Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 16:28:19 +0300 Subject: [PATCH 5/9] show index and title of each button --- js/simple-css-switch.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js index 88a0c00..e657291 100644 --- a/js/simple-css-switch.js +++ b/js/simple-css-switch.js @@ -47,7 +47,8 @@ function simpleCssSwitch(theme) { 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); From 3cc9b0285699b47638cad107a25dcc9fb66267ff Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 16:29:21 +0300 Subject: [PATCH 6/9] wrap all buttons --- js/simple-css-switch.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js index e657291..0c18dc8 100644 --- a/js/simple-css-switch.js +++ b/js/simple-css-switch.js @@ -39,6 +39,9 @@ function simpleCssSwitch(theme) { 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') ); @@ -54,8 +57,9 @@ function simpleCssSwitch(theme) { chooseStyle(style.title); markActiveButton(e.target); }); + stylesMenuContainer.appendChild(menuWrap); styleButtons.push(styleOptionButton); - stylesMenuContainer.appendChild(styleOptionButton); + menuWrap.appendChild(styleOptionButton); }); var activeStyle = localStorage.getItem('s-css-s--active-style'); From c210fb17e2cffad95e564cd5a8ea26e25d8d3dc1 Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 16:49:42 +0300 Subject: [PATCH 7/9] add eventlistener on menuTitle when is clicked, open a dropdown menu which is hidden by default --- js/simple-css-switch.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/simple-css-switch.js b/js/simple-css-switch.js index 0c18dc8..662a595 100644 --- a/js/simple-css-switch.js +++ b/js/simple-css-switch.js @@ -62,6 +62,11 @@ function simpleCssSwitch(theme) { 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){ From 2e46a1e0309ee3b29cb7fa945363ab9530db1310 Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 17:17:09 +0300 Subject: [PATCH 8/9] add default styles for different themes --- css/simple-css-switch.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) 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; +} From eb334204db266e98f642a66425a69b9d0cd37a58 Mon Sep 17 00:00:00 2001 From: Elitsa Petrova Date: Wed, 23 May 2018 18:11:50 +0300 Subject: [PATCH 9/9] update readme --- README.org | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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