Skip to content

Instantly share code, notes, and snippets.

@chucksupport

chucksupport/sidebar.html

Last active September 21, 2017 18:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chucksupport/a9cc44b7b31b7a5f148c308b8c9fd664 to your computer and use it in GitHub Desktop.
Save chucksupport/a9cc44b7b31b7a5f148c308b8c9fd664 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sidebar.html
<html>
<head>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= HtmlService.createHtmlOutputFromFile('CSS_Sidebar').getContent(); ?>
</head>
</head>
<body>
<div class="sidebar">
<div class="block col-contain">
<form>
<label for="text1">Text Rule</label>
<input class="textinput width-100" type="text" name="text" id="text1" placeholder="Enter text to highlight" value="">
<label for="color1">Highlight Color Picker</label><br />
<input class="color {hash:true,pickerFaceColor:'#E7E7E7'}" value="#9ae7a4" name="color" id="color">
<div style="padding-top:15px;">Quick Colors</div>
<button type="button" class="left" onmouseup="document.getElementById('color').color.fromString('#B6E7BF')"><div class="green">Green</div></button>
<button type="button" style="margin-left:30px;" onmouseup="document.getElementById('color').color.fromString('#F2F27F')"><div class="yellow">Yellow</div></button>
<button type="button" class="right" onmouseup="document.getElementById('color').color.fromString('#ff8080')"><div class="red">Red</div></button>
</form>
<div style="height:2px;width:100%;background-color:#CCCCCC;margin:8px;margin-left:0;"></div>
<div class="block width-100" style="margin-top:15px;" id="button-bar">
<button class="blue left" id="add">Add Rule</button>
<button class="grey" style="margin-left:30px;padding-right:3px" id="reset">Drop Rules</button>
<button class="grey right" id="clear">Clear</button>
<div style="height:10px;"></div>
</div>
</div>
<div id="response"></div>
<div class="block col-contain" id="rules">
<p>Loading...</p>
</div>
</div>
<div class="sidebar bottom">
<div class="block width-100" style="padding-bottom:5px;">
<button class="create" style="float:left" id="save">Save</button>
<button class="grey" style="margin-left: 20px!important" id="load">Load</button>
<button class="grey" style="float:right" id="show">Show Current</button>
</div>
<footer><button class="share width-100" style="margin:0" id="highlight">Update Highlights</button></footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function onRules(rules) {
$('#rules').html(rules);
$('#response').empty();
}
$(function() {
$('#save').click(save);
$('#load').click(load);
$('#add').click(add);
$('#reset').click(reset);
$('#clear').click(clear);
$('#highlight').click(highlight);
$('#show').click(show);
$('button[name="1"]').click(showSuccess);
google.script.run.highlightText();
google.script.run.withSuccessHandler(onRules).withUserObject(this).showRules();
});
function highlight() {
this.disabled = false;
$('#error').remove();
$('#success').remove();
google.script.run.highlightText();
}
function show() {
$('#response').html('Loading...');
google.script.run.withSuccessHandler(onRules).withUserObject(this).showRules();
}
function save() {
$('#response').html('Loading...');
google.script.run.withUserObject(this).saveRules();
setTimeout(function() {
google.script.run.withSuccessHandler(showSaveSuccess).withUserObject(this).loadRules();
}, 2000);
}
function load() {
$('#response').html('Loading...');
google.script.run.withSuccessHandler(onRules).withUserObject(this).loadRules();
}
function loadSet(setName) {
$('#response').html('Loading...');
google.script.run.withSuccessHandler(show).withUserObject(this).loadSet(setName);
}
function deleteSet(setName) {
$('#response').html('Loading...');
google.script.run.withSuccessHandler(load).withUserObject(this).deleteSet(setName);
}
function add() {
$('#response').html('Loading...');
if (!$('input[name=text]').val()) {
$('#response').html("<div class='error'>You cannot highlight emptiness</div>")
} else {
this.disabled = false;
$('#error').remove();
$('#success').remove();
var text = $('input[name=text]').val();
var color = $('input[name=color]').val();
google.script.run
.withSuccessHandler(showSuccess)
.withFailureHandler(showError)
.withUserObject(this)
.addRules(text, color);
google.script.run.highlightText();
}
}
function reset() {
$('#response').html('Loading...');
this.disabled = false;
google.script.run
.withSuccessHandler(showResetSuccess)
.withFailureHandler(showError)
.withUserObject(this)
.resetRules();
}
function clear() {
this.disabled = false;
google.script.run
.withFailureHandler(showError)
.withUserObject(this)
.clearHighlights();
}
function deleteRule(n) {
$('#response').html('Loading...');
$('#success').remove();
$('#error').remove();
google.script.run.withSuccessHandler(successDel).withFailureHandler(showError).deleteRule(n);
}
function showSaveSuccess(msg, element) {
$('#error').remove();
$('#success').remove();
$('#successReset').remove();
var success = $('<div id="success" class="success">Rules successfully saved!</div>');
$('#response').html(success);
// google.script.run.withSuccessHandler(onRules).withUserObject(this).showRules();
}
function showSuccess(msg, element) {
$('#error').remove();
$('#success').remove();
$('#successReset').remove();
var success = $('<div id="success" class="success">Rule successfully added!</div>');
$('#response').html(success);
google.script.run.withSuccessHandler(onRules).withFailureHandler(showError).withUserObject(this).showRules();
google.script.run.withFailureHandler(showError).highlightText();
}
function showResetSuccess(msg, element) {
$('#error').remove();
$('#success').remove();
$('#successReset').remove();
var successReset = $('<div id="successReset" class="successReset">Rules dropped!</div>');
$('#response').html(successReset);
google.script.run.withSuccessHandler(onRules).withFailureHandler(showError).withUserObject(this).showRules();
google.script.run.withFailureHandler(showError).highlightText();
}
function showError(msg, element) {
$('#error').remove();
$('#success').remove();
$('#successReset').remove();
var div = $('<div id="error" class="error">Sorry, an error has occured. Please try again or contact me and include the error message below!<br /><b>' + msg + '</b></div>');
$('#response').html(div);
google.script.run.withSuccessHandler(onRules).withFailureHandler(showError).withUserObject(this).showRules();
google.script.run.withFailureHandler(showError).highlightText();
}
function successDel(msg, element) {
$('#error').remove();
$('#success').remove();
$('#successReset').remove();
var div = $('<div id="del" class="success">Rule has been removed</div>');
$('#response').html(div);
google.script.run.withSuccessHandler(onRules).withFailureHandler(showError).withUserObject(this).showRules();
google.script.run.withFailureHandler(showError).highlightText();
}
</script>
<script type="text/javascript" src="https://432studios.com/jscolor/jscolor.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment