refactored JS:

- moved from global namespace into anonymous function
- as onclick has no direct access to the zerobin methods, the events are
now bound in the init() method via bindEvents()
- to simplify maintenance, the functions were wrapped into 3 objects:
zerobin (display logic, event handling), filter (compression,
encryption) and helper (stateless utilities)
- some CSS and template adjustements were also done
This commit is contained in:
El RIDO 2015-09-05 17:12:11 +02:00
parent a2af88a36e
commit 3099e10dfa
5 changed files with 905 additions and 645 deletions

View File

@ -21,12 +21,20 @@ body {
margin: 5px 0; margin: 5px 0;
} }
#comments, #comments button {
margin-bottom: 10px;
}
.comment { .comment {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
padding: 5px 0 5px 5px; padding: 5px 0 5px 10px;
white-space: pre-wrap; white-space: pre-wrap;
} }
h4 { footer h4 {
margin-top: 0; margin-top: 0;
} }
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important;
}

View File

@ -65,7 +65,6 @@ h3 {
} }
#aboutbox { #aboutbox {
font-size: 1.2em;
color: #94a3b4; color: #94a3b4;
padding: 4px 8px 4px 16px; padding: 4px 8px 4px 16px;
position: relative; position: relative;

File diff suppressed because it is too large Load Diff

View File

@ -33,25 +33,25 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="/" onclick="window.location.href=scriptLocation();return false;">{function="t('ZeroBin')"}</a> <a class="reloadlink navbar-brand" href="/">{function="t('ZeroBin')"}</a>
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li> <li>
<button id="newbutton" type="button" class="hidden btn btn-default navbar-btn" onclick="window.location.href=scriptLocation();return false;"> <button id="newbutton" type="button" class="reloadlink hidden btn btn-default navbar-btn">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span> {function="t('New')"} <span class="glyphicon glyphicon-file" aria-hidden="true"></span> {function="t('New')"}
</button> </button>
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="pr"> <li class="pr">
<button id="sendbutton" type="button" class="hidden btn btn-default navbar-btn" onclick="send_data();return false;"> <button id="sendbutton" type="button" class="hidden btn btn-default navbar-btn">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> {function="t('Send')"} <span class="glyphicon glyphicon-upload" aria-hidden="true"></span> {function="t('Send')"}
</button> </button>
<button id="clonebutton" type="button" class="hidden btn btn-default navbar-btn" onclick="clonePaste();return false;"> <button id="clonebutton" type="button" class="hidden btn btn-default navbar-btn">
<span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span> {function="t('Clone')"} <span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span> {function="t('Clone')"}
</button> </button>
<button id="rawtextbutton" type="button" class="hidden btn btn-default navbar-btn" onclick="rawText();return false;"> <button id="rawtextbutton" type="button" class="hidden btn btn-default navbar-btn">
<span class="glyphicon glyphicon-text-background" aria-hidden="true"></span> {function="t('Raw text')"} <span class="glyphicon glyphicon-text-background" aria-hidden="true"></span> {function="t('Raw text')"}
</button> </button>
</li> </li>

View File

@ -24,7 +24,7 @@
{function="t('ZeroBin is a minimalist, opensource online pastebin where the server has zero knowledge of pasted data. Data is encrypted/decrypted <i>in the browser</i> using 256 bits AES. More information on the <a href="https://github.com/elrido/ZeroBin/wiki">project page</a>.')"}<br />{if="strlen($NOTICE)"} {function="t('ZeroBin is a minimalist, opensource online pastebin where the server has zero knowledge of pasted data. Data is encrypted/decrypted <i>in the browser</i> using 256 bits AES. More information on the <a href="https://github.com/elrido/ZeroBin/wiki">project page</a>.')"}<br />{if="strlen($NOTICE)"}
<span class="blink"></span> {$NOTICE}{/if} <span class="blink"></span> {$NOTICE}{/if}
</div> </div>
<h1 title="ZeroBin" onclick="window.location.href=scriptLocation();return false;">{function="t('ZeroBin')"}</h1><br /> <h1 class="reloadlink">{function="t('ZeroBin')"}</h1><br />
<h2>{function="t('Because ignorance is bliss')"}</h2><br /> <h2>{function="t('Because ignorance is bliss')"}</h2><br />
<h3>{$VERSION}</h3> <h3>{$VERSION}</h3>
<div id="noscript" class="nonworking">{function="t('Javascript is required for ZeroBin to work.<br />Sorry for the inconvenience.')"}</div> <div id="noscript" class="nonworking">{function="t('Javascript is required for ZeroBin to work.<br />Sorry for the inconvenience.')"}</div>
@ -41,10 +41,10 @@
<div id="status">{$STATUS|htmlspecialchars}</div> <div id="status">{$STATUS|htmlspecialchars}</div>
<div id="errormessage" class="hidden">{$ERROR|htmlspecialchars}</div> <div id="errormessage" class="hidden">{$ERROR|htmlspecialchars}</div>
<div id="toolbar"> <div id="toolbar">
<button id="newbutton" onclick="window.location.href=scriptLocation();return false;" class="hidden"><img src="img/icon_new.png" width="11" height="15" alt="" />{function="t('New')"}</button> <button id="newbutton" class="reloadlink hidden"><img src="img/icon_new.png" width="11" height="15" alt="" />{function="t('New')"}</button>
<button id="sendbutton" onclick="send_data();return false;" class="hidden"><img src="img/icon_send.png" width="18" height="15" alt="" />{function="t('Send')"}</button> <button id="sendbutton" class="hidden"><img src="img/icon_send.png" width="18" height="15" alt="" />{function="t('Send')"}</button>
<button id="clonebutton" onclick="clonePaste();return false;" class="hidden"><img src="img/icon_clone.png" width="15" height="17" alt="" />{function="t('Clone')"}</button> <button id="clonebutton" class="hidden"><img src="img/icon_clone.png" width="15" height="17" alt="" />{function="t('Clone')"}</button>
<button id="rawtextbutton" onclick="rawText();return false;" class="hidden"><img src="img/icon_raw.png" width="15" height="15" alt="" />{function="t('Raw text')"}</button> <button id="rawtextbutton" class="hidden"><img src="img/icon_raw.png" width="15" height="15" alt="" />{function="t('Raw text')"}</button>
<div id="expiration" class="hidden">{function="t('Expires')"}: <div id="expiration" class="hidden">{function="t('Expires')"}:
<select id="pasteExpiration" name="pasteExpiration"> <select id="pasteExpiration" name="pasteExpiration">
{loop="EXPIRE"} {loop="EXPIRE"}
@ -61,7 +61,7 @@
<label for="opendiscussion" {if="!$OPENDISCUSSION"} style="color: #BBBBBB;"{/if}>{function="t('Open discussion')"}</label> <label for="opendiscussion" {if="!$OPENDISCUSSION"} style="color: #BBBBBB;"{/if}>{function="t('Open discussion')"}</label>
</div>{/if}{if="$PASSWORD"} </div>{/if}{if="$PASSWORD"}
<div id="password" class="hidden"> <div id="password" class="hidden">
<input id="passwordinput" placeholder="{function="t('Password (recommended)')"}" size="32" /> <input type="password" id="passwordinput" placeholder="{function="t('Password (recommended)')"}" size="32" />
</div>{/if} </div>{/if}
</div> </div>
<div id="pasteresult" class="hidden"> <div id="pasteresult" class="hidden">