Skip to content

Add more options of how the theme is shown #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ElitsaPetrova wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Add more options of how the theme is shown #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5102f90
add list with all options that can be used as theme
May 23, 2018
86349c0
check the existence of given theme
May 23, 2018
c9c95ca
add class specified by used theme
May 23, 2018
478850d
add string `themes` in the menu container
May 23, 2018
8bd1eaf
show index and title of each button
May 23, 2018
3cc9b02
wrap all buttons
May 23, 2018
c210fb1
add eventlistener on menuTitle
May 23, 2018
2e46a1e
add default styles for different themes
May 23, 2018
eb33420
update readme
May 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions README.org
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,20 @@
<link class="s-css-s--style" rel="stylesheet alternate" title="Green style" href="css/green.css">
#+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
<body onload="simpleCssSwitch('numbers')">
#+END_SRC
*** Insert container for CSS switch menu
Place where you want following snippet
#+BEGIN_SRC html
Expand Down
24 changes: 24 additions & 0 deletions css/simple-css-switch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
54 changes: 51 additions & 3 deletions js/simple-css-switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')
);
Expand All @@ -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 = '<span class="s-css-s--idx">' + idx + '</span>';
styleOptionButton.innerHTML += '<span class="s-css-s--title">' + style.title + '</span>';
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){
Expand Down