Skip to content
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

Allow switching between visual test themes easily #1198

Merged
merged 3 commits into from
Jun 19, 2019
Merged

Allow switching between visual test themes easily #1198

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
40d1364
Allow switching between visual test themes easily
ashmaroli Jun 18, 2019
9638d9b
Drop all fancy clutter
ashmaroli Jun 19, 2019
b722a92
Revert to stock controls (#3)
pyrmont Jun 19, 2019
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
156 changes: 151 additions & 5 deletions spec/visual/templates/layout.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,164 @@
#page-footer {
border-top: 1px dotted
}

#theme-selector {
display: inline-block;
position: relative;
margin: 0 auto;
width: 170px;
font-family: Arial;
ashmaroli marked this conversation as resolved.
Show resolved Hide resolved
font-size: smaller;
text-align: left;
}
#theme-selector select, .select-hide {
ashmaroli marked this conversation as resolved.
Show resolved Hide resolved
display: none;
}
#theme-selected {
color: <%= @comment_color %>;
font-weight: bold;
border-radius: 8px;
z-index: 99;
}
#theme-selected:hover:after,
#theme-selected.select-arrow-active:after {
position: absolute;
top: 3px;
right: 10px;
width: 0;
height: 0;
content: "";
border: 6px solid transparent;
border-color: transparent transparent currentColor transparent;
}
#theme-selected.select-arrow-active:after {
top: 12px;
border-color: currentColor transparent transparent transparent;
}
#theme-selected,
#themes div {
padding: 5px 8px;
border: 1px dotted transparent;
cursor: pointer;
}
#theme-selected:hover,
#theme-selected.select-arrow-active {
border-color: currentColor
}
#themes {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 218px;
overflow-y: auto;
z-index: 97;
border: 1px dotted;
}
#themes div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
</style>
</head>

<body>
<%= yield %>
<footer id="page-footer">
<small>Rendered with theme
<strong style="text-transform: capitalize">
<%= @theme.class.name.gsub(/_/, ' ') %>
</strong>
</small>
<small>Rendered with theme:</small>
<div id="theme-selector">
<select>
<% Rouge::Theme.registry.each_key do |name|
%><option value="<%= name %>"<% if @theme.class.name == name %> selected<% end %>><%= name %></option>
<% end %>
</select>
</div>
</footer>

<script>
/*
* --------------------------------------------------------------
* Adapted from sample code found at:
* https://www.w3schools.com/howto/howto_custom_select.asp
ashmaroli marked this conversation as resolved.
Show resolved Hide resolved
* --------------------------------------------------------------
*/
var x, i, selElmnt, a, b, c;
x = document.getElementById("theme-selector");
selElmnt = x.getElementsByTagName("select")[0];

a = document.createElement("DIV");
a.setAttribute("id", "theme-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x.appendChild(a);

b = document.createElement("DIV");
b.setAttribute("id", "themes");
b.setAttribute("class", "select-hide");

// For each option in the original select element, create a new DIV that will act as an option item
for (i = 1; i < selElmnt.length; i++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[i].innerHTML;

// When an item is clicked, update the original select box, and the selected item
c.addEventListener("click", function(e) {
var h, j, k, s, y, z;
var initial = location.href;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (j = 0; j < s.length; j++) {
if (s.options[j].innerHTML == this.innerHTML) {
s.selectedIndex = j;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();

if (initial.includes('theme=')) {
z = initial.replace(/theme=.*/, 'theme=' + this.innerHTML);
} else {
z = initial + '?theme=' + this.innerHTML;
}
location.assign(z);
});
b.appendChild(c);
}
x.appendChild(b);

a.addEventListener("click", function(e) {
var selItems = document.getElementById("themes");
var bgColor = window.getComputedStyle(document.body).getPropertyValue("background-color");
if (bgColor == 'rgba(0, 0, 0, 0)') {
bgColor = 'rgb(255, 255, 255)';
}
selItems.style.backgroundColor = bgColor;

// When the select box is clicked, close any other select boxes, and open/close the current select box
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});

// A function that will close all select boxes in the document, except the current select box
function closeAllSelect(elmnt) {
var x, y, temp = [];
x = document.getElementById("themes");
y = document.getElementById("theme-selected");

(elmnt == y) ? temp.push(0) : y.classList.remove("select-arrow-active");
if (temp.indexOf(0)) { x.classList.add("select-hide"); }
}

// If the user clicks anywhere outside the select box, then close all select boxes
document.addEventListener("click", closeAllSelect);
</script>
</body>

</html>