Skip to content

Commit

Permalink
New popup design
Browse files Browse the repository at this point in the history
  • Loading branch information
@stoodkev
stoodkev committed Jan 27, 2018
1 parent 0e64533 commit 8577c0f
Show file tree
Hide file tree
Showing 6 changed files with 342 additions and 100 deletions.
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

"name": "SteemPlus",
"description": "Lightweight toolbox for Steemit",
"version": "2.3.0.0",
"version": "2.3.1.0",

"browser_action": {
"default_icon": "src/img/logo.png",
Expand Down
96 changes: 71 additions & 25 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

<link id="themecss" rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="src/css/popup.css">

</head>
<body>
<div>
Expand Down Expand Up @@ -39,34 +38,81 @@ <h1>SteemPlus</h1>
<div class="content">
<div class="back_menu">Back</div>
<h3>Options</h3>
<h4>Badges</h4>
<input type="radio" name="badges" value="1" id="1"/> <label for="1">@hag228</label> <br>
<input type="radio" name="badges" value="2" id="2"/> <label for="2">@fabiyamada</label> <br>
<input type="radio" name="badges" value="hide" id="hide"/> <label for="hide">Hide</label> <br>
<h4>Feed+</h4>
<input type="radio" name="feedp" value="show" id="show"> <label for="show">Show</label> <br>
<input type="radio" name="feedp" value="hide" id="hide"> <label for="hide">Hide</label> <br>
<h4>Delegation</h4>
<input type="radio" name="del" value="show" id="show"> <label for="show">Show</label> <br>
<input type="radio" name="del" value="hide" id="hide"> <label for="hide">Hide</label> <br>
<h4>Transfers</h4>
<input type="radio" name="transfers" value="show" id="show"> <label for="show">Show</label> <br>
<input type="radio" name="transfers" value="hide" id="hide"> <label for="hide">Hide</label> <br>
<h4>Beneficiaries</h4>
<input type="radio" name="ben" value="show" id="show"> <label for="show">Show</label> <br>
<input type="radio" name="ben" value="hide" id="hide"> <label for="hide">Hide</label> <br>
<h4>Dropdown</h4>
<input type="radio" name="drop" value="show" id="show"> <label for="show">Show</label> <br>
<input type="radio" name="drop" value="hide" id="hide"> <label for="hide">Hide</label> <br>
<h4>Account Value</h4>
<input type="radio" name="acc_v" value="show" id="show"> <label for="show">Show</label> <br>
<input type="radio" name="acc_v" value="hide" id="hide"> <label for="hide">Hide</label> <br>

<div class="sp_option">
<div class="custom-select" style="width:100%;">
<select id="badges" >
<option name="badges" value="2" id="q">Show badges?</option>
<option name="badges" value="hide" id="hide">Don't show badges</option>
<option name="badges" value="1" id="1">Badges @hag228</option>
<option name="badges" value="2" id="2">Badges @fabiyamada</option>
</select>
</div>
</div>

<div class="sp_option">
<label class="switch">
<input type="checkbox" name="oneup" id="oneup">
<span class="slider2 round"></span>
</label>
<p>Utopian 1UP</p>
</div>

<div class="sp_option">
<label class="switch">
<input type="checkbox" name="feedp" id="feedp">
<span class="slider2 round"></span>
</label>
<p>Feed+</p>
</div>

<div class="sp_option">
<label class="switch">
<input type="checkbox" name="del" id="del">
<span class="slider2 round"></span>
</label>
<p>Delegation</p>
</div>

<div class="sp_option">
<label class="switch">
<input type="checkbox" name="transfers" id="transfers">
<span class="slider2 round"></span>
</label>
<p>Transfers</p>
</div>

<div class="sp_option">
<label class="switch">
<input type="checkbox" name="drop" id="drop">
<span class="slider2 round"></span>
</label>
<p>Dropdown</p>
</div>

<div class="sp_option">
<label class="switch">
<input type="checkbox" name="ben" id="ben">
<span class="slider2 round"></span>
</label>
<p>Beneficiaries</p>
</div>

<div class="sp_option">
<label class="switch">
<input type="checkbox" name="acc_v" id="acc_v">
<span class="slider2 round"></span>
</label>
<p>Account Value</p>
</div>
</div>
</div>
<div id="powered">
<div id="shortcuts"><img src="/src/img/shortcuts/steemit.png" id="steemify"/><img src="/src/img/shortcuts/utopian.png" id="utopify"/><img src="/src/img/shortcuts/busy.png" id="busyfy"/><img src="/src/img/shortcuts/steemd.png" id="steemdify"/>
<div id="shortcuts">
<img src="/src/img/shortcuts/steemit.png" id="steemify"/><img src="/src/img/shortcuts/utopian.png" id="utopify"/><img src="/src/img/shortcuts/busy.png" id="busyfy"/><img src="/src/img/shortcuts/steemd.png" id="steemdify"/>
</div>
<p>Powered by <b>Adsactly</b></p>
</div>
<p>Powered by <b>Adsactly</b></p></div>
<script src="vendor/sc2.min.js"></script>
<script src="vendor/jquery.js"></script>
<script src="vendor/steemjs.js"></script>
Expand Down
115 changes: 97 additions & 18 deletions popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ document.getElementById('vote').addEventListener("click", Upvote);
var weight;
var vpow;
var width=0;
var badge,ben,feedp,del,drop,acc_v,transfers;
var badge,ben,feedp,del,drop,acc_v,transfers,oneup;
var me,acc;
var menus=document.getElementsByClassName("menu");
var content=document.getElementsByClassName("content");
var back=document.getElementsByClassName("back_menu");

$('#shortcuts').hide();
// Get local parameters stored using Chrome Storage API
chrome.storage.local.get(['sessionToken','tokenExpire','weight','resteem','blacklist','whitelist','reputation','rep','badge','del','ben','feedp','drop','acc_v','transfers'], function (items) {
chrome.storage.local.get(['oneup','sessionToken','tokenExpire','weight','resteem','blacklist','whitelist','reputation','rep','badge','del','ben','feedp','drop','acc_v','transfers'], function (items) {
var steemConnect=(items.sessionToken===undefined||items.tokenExpire===undefined||items.tokenExpire<Date.now())?{connect:false}:{connect:true,sessionToken:items.sessionToken,tokenExpire:items.tokenExpire};

if(steemConnect.connect===true)
Expand Down Expand Up @@ -50,6 +50,7 @@ chrome.storage.local.get(['sessionToken','tokenExpire','weight','resteem','black
feedp=items.feedp==undefined?'show':items.feedp;
ben=items.ben==undefined?'show':items.ben;
del=items.del==undefined?'show':items.del;
oneup=items.oneup==undefined?'show':items.oneup;
transfers=items.transfers==undefined?'show':items.transfers;
acc_v=items.acc_v==undefined?'show':items.acc_v;
drop=items.drop==undefined?'show':items.drop;
Expand All @@ -60,13 +61,88 @@ chrome.storage.local.get(['sessionToken','tokenExpire','weight','resteem','black
document.getElementById("myRange").value=weight;
}

$('input[name=badges][value='+badge+']').prop('checked',true);
$('input[name=feedp][value='+feedp+']').prop('checked',true);
$('input[name=del][value='+del+']').prop('checked',true);
$('input[name=ben][value='+ben+']').prop('checked',true);
$('input[name=drop][value='+drop+']').prop('checked',true);
$('input[name=acc_v][value='+acc_v+']').prop('checked',true);
$('input[name=transfers][value='+transfers+']').prop('checked',true);
$('option[name=badges][value='+badge+']').prop('selected',true);
$('input[name=feedp]').prop('checked',feedp=='show');
$('input[name=del]').prop('checked',del=='show');
$('input[name=ben]').prop('checked',ben=='show');
$('input[name=drop]').prop('checked',drop=='show');
$('input[name=acc_v]').prop('checked',acc_v=='show');
$('input[name=oneup]').prop('checked',oneup=='show');
$('input[name=transfers]').prop('checked',transfers=='show');

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var i, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
this.parentNode.parentNode.getElementsByTagName("select")[0];


h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
break;
}
}
chrome.storage.local.set({
badge:s[s.selectedIndex].value
});
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*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");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

});

Expand All @@ -76,13 +152,15 @@ Array.from(menus).forEach(function(element, i, arr) {
content[i].style.display='block';
Array.from(menus).forEach(function(element, i, arr) {element.style.display="none";});
document.getElementById("logo").style.display="none";
$('#powered').css('display','none');
});
});

Array.from(back).forEach(function(element, i, arr) {
element.addEventListener('click', function(){
content[i].style.display='none';
Array.from(menus).forEach(function(element, i, arr) {element.style.display="block";});
$('#powered').css('display','block');

document.getElementById("logo").style.display="block";
});
Expand All @@ -99,46 +177,46 @@ document.getElementById("weight").onblur = function() {
});
}


$("#myRange").blur(function(){chrome.storage.local.set({
weight:document.getElementById('weight').value
});});
$("")

$(document).on("change","input[name=badges]",function(){

$(document).on("change","input[name=oneup]",function(){
chrome.storage.local.set({
badge:$("input[name=badges]:checked").val()
oneup:$("input[name=oneup]").prop('checked')?'show':'hide'
});
});
$(document).on("change","input[name=ben]",function(){
chrome.storage.local.set({
ben:$("input[name=ben]:checked").val()
ben:$("input[name=ben]").prop('checked')?'show':'hide'
});
});
$(document).on("change","input[name=acc_v]",function(){
chrome.storage.local.set({
acc_v:$("input[name=acc_v]:checked").val()
acc_v:$("input[name=acc_v]").prop('checked')?'show':'hide'
});
});
$(document).on("change","input[name=feedp]",function(){
chrome.storage.local.set({
feedp:$("input[name=feedp]:checked").val()
feedp:$("input[name=feedp]").prop('checked')?'show':'hide'
});
});
$(document).on("change","input[name=del]",function(){
chrome.storage.local.set({
del:$("input[name=del]:checked").val()
del:$("input[name=del]").prop('checked')?'show':'hide'
});
});
$(document).on("change","input[name=transfers]",function(){
chrome.storage.local.set({
transfers:$("input[name=transfers]:checked").val()
transfers:$("input[name=transfers]").prop('checked')?'show':'hide'
});
});

$(document).on("change","input[name=drop]",function(){
chrome.storage.local.set({
drop:$("input[name=drop]:checked").val()
drop:$("input[name=drop]").prop('checked')?'show':'hide'
});
});

Expand Down Expand Up @@ -215,4 +293,5 @@ function Upvote(){
else alert('The current URL does not correspond to a post. Click to "... ago" on the post summary to change the url.')
});


}
Loading

0 comments on commit 8577c0f

Please sign in to comment.