custom error popups
This commit is contained in:
haselkern
parent
7808a71e71
commit
233cdb8247
3 changed files with 133 additions and 77 deletions
144
index.htm
144
index.htm
|
|
@ -16,93 +16,103 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div id="hero" class="screen">
|
||||
<div class="card blank">
|
||||
<h1>Telegraph Manager</h1>
|
||||
<p>
|
||||
An easy way to manage your articles, profile and views for <a href="http://telegra.ph/">telegra.ph</a>.
|
||||
</p>
|
||||
<div id="error" class="error">
|
||||
<div class="card">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="screen-nosupport" class="screen">
|
||||
<div class="card">
|
||||
Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript.
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="hero">
|
||||
<div class="card blank">
|
||||
<h1>Telegraph Manager</h1>
|
||||
<p>
|
||||
An easy way to manage your articles, profile and views for <a href="http://telegra.ph/">telegra.ph</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="screen-login" class="screen">
|
||||
<div class="card">
|
||||
<h1>create an account</h1>
|
||||
<input type="text" name="author_name" placeholder="your name" required />
|
||||
<input type="text" name="short_name" placeholder="short name (not published)" required />
|
||||
<input type="url" name="author_url" placeholder="your website (optional)" />
|
||||
<button onclick="createAccount()">create account</button>
|
||||
<div id="screen-nosupport">
|
||||
<div class="card">
|
||||
Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h1>login with token</h1>
|
||||
<input type="text" name="token" placeholder="your token (like this: b968da509bb768...)" required />
|
||||
<button onclick="tokenLogin()">login</button>
|
||||
|
||||
<div id="screen-login">
|
||||
<div class="card">
|
||||
<h1>create an account</h1>
|
||||
<input type="text" name="author_name" placeholder="your name" required />
|
||||
<input type="text" name="short_name" placeholder="short name (not published)" required />
|
||||
<input type="url" name="author_url" placeholder="your website (optional)" />
|
||||
<button onclick="createAccount()">create account</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h1>login with token</h1>
|
||||
<input type="text" name="token" placeholder="your token (like this: b968da509bb768...)" required />
|
||||
<button onclick="tokenLogin()">login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="screen-login-telegraph" class="screen">
|
||||
<div class="card">
|
||||
<p>
|
||||
<a href="#" target="_blank" onclick="doneAuthorized()">click to login to telegra.ph</a>
|
||||
</p>
|
||||
<p>
|
||||
You have to do this in order to publish articles. After you've clicked the link, come back to this website.
|
||||
</p>
|
||||
<div id="screen-login-telegraph">
|
||||
<div class="card">
|
||||
<p>
|
||||
<a href="#" target="_blank" onclick="doneAuthorized()">click to login to telegra.ph</a>
|
||||
</p>
|
||||
<p>
|
||||
You have to do this in order to publish articles. After you've clicked the link, come back to this website.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="screen-main" class="screen">
|
||||
<a id="fab" href="http://telegra.ph/" target="_blank" title="new page"><img src="g/ic_add.png" /></a>
|
||||
<div id="screen-main">
|
||||
<a id="fab" href="http://telegra.ph/" target="_blank" title="new page"><img src="g/ic_add.png" /></a>
|
||||
|
||||
<div id="user-info">
|
||||
<div id="user-info">
|
||||
|
||||
<div id="user-image-animator" title="edit profile" onclick="edit()">
|
||||
<div id="user-image">
|
||||
<img src="g/ic_account.png" />
|
||||
</div>
|
||||
<div id="user-edit">
|
||||
<img src="g/ic_edit_white.png" />
|
||||
<div id="user-image-animator" title="edit profile" onclick="edit()">
|
||||
<div id="user-image">
|
||||
<img src="g/ic_account.png" />
|
||||
</div>
|
||||
<div id="user-edit">
|
||||
<img src="g/ic_edit_white.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span id="user-name"></span>
|
||||
<span id="user-short"></span>
|
||||
<a id="user-url" href="#" target="_blank"></a>
|
||||
<br>
|
||||
<span>— <span id="user-page-count"></span> —</span>
|
||||
</div>
|
||||
|
||||
<span id="user-name"></span>
|
||||
<span id="user-short"></span>
|
||||
<a id="user-url" href="#" target="_blank"></a>
|
||||
<br>
|
||||
<span>— <span id="user-page-count"></span> —</span>
|
||||
</div>
|
||||
<div id="page-list">
|
||||
|
||||
<div id="page-list">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="screen-edit">
|
||||
<div class="card blank">
|
||||
<a onclick="main()" href="#">back</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h1>change account information</h1>
|
||||
<input type="text" name="author_name_edit" placeholder="your name" required />
|
||||
<input type="text" name="short_name_edit" placeholder="short name (not published)" required />
|
||||
<input type="url" name="author_url_edit" placeholder="your website (optional)" />
|
||||
<button onclick="saveEdit()">save</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h1>logout</h1>
|
||||
<p>
|
||||
<strong>Warning!</strong> To be able log into this account again you <strong> will need</strong> this token:
|
||||
</p>
|
||||
<p id="logout-token"></p>
|
||||
<button onclick="logout()">logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="screen-edit" class="screen">
|
||||
<div class="card blank">
|
||||
<a onclick="main()" href="#">back</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h1>change account information</h1>
|
||||
<input type="text" name="author_name_edit" placeholder="your name" required />
|
||||
<input type="text" name="short_name_edit" placeholder="short name (not published)" required />
|
||||
<input type="url" name="author_url_edit" placeholder="your website (optional)" />
|
||||
<button onclick="saveEdit()">save</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h1>logout</h1>
|
||||
<p>
|
||||
<strong>Warning!</strong> To be able log into this account again you <strong> will need</strong> this token:
|
||||
</p>
|
||||
<p id="logout-token"></p>
|
||||
<button onclick="logout()">logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
51
main.js
51
main.js
|
|
@ -7,6 +7,9 @@ var numberOfPagesToLoad = 10;
|
|||
// How many pixels should there be space around the FAB
|
||||
var fabSpace = 30;
|
||||
|
||||
// How many milliseconds should an error message be visible
|
||||
var errorTime = 2000;
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
// Check for localStorage
|
||||
|
|
@ -28,20 +31,23 @@ $(document).ready(function(){
|
|||
}
|
||||
}
|
||||
|
||||
// Window resize for positioning FAB
|
||||
// Window resize for positioning elements
|
||||
window.onresize = resize;
|
||||
resize();
|
||||
|
||||
});
|
||||
|
||||
// Position FAB and error popups when resizing
|
||||
function resize(){
|
||||
var fab = $("#fab");
|
||||
var screenWidth = $(".screen:visible").width();
|
||||
var screenWidth = $("#wrapper").width();
|
||||
|
||||
var left = ($(window).width() - screenWidth)/2 + screenWidth - fab.width() - fabSpace;
|
||||
var fabLeft = ($(window).width() - screenWidth)/2 + screenWidth - fab.width() - fabSpace;
|
||||
|
||||
fab.css("bottom", fabSpace);
|
||||
fab.css("left", left);
|
||||
fab.css("left", fabLeft);
|
||||
|
||||
$(".error").css("right", $("#wrapper").offset().left)
|
||||
}
|
||||
|
||||
// http://stackoverflow.com/a/488073/1456971
|
||||
|
|
@ -55,6 +61,33 @@ function isScrolledIntoView(elem) {
|
|||
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
|
||||
}
|
||||
|
||||
// Shows an error message
|
||||
function error(msg){
|
||||
|
||||
// Prettify msg, replace all _ with blanks and set to lowercase
|
||||
msg = msg.toLowerCase().replace(new RegExp("_", "g"), " ");
|
||||
|
||||
// Create popup
|
||||
var popup = $("#error").clone();
|
||||
popup.removeAttr("id");
|
||||
$("body").append(popup);
|
||||
|
||||
// Set positions
|
||||
resize();
|
||||
|
||||
// Set message and animate popup
|
||||
popup.find("span").text(msg);
|
||||
popup.addClass("active");
|
||||
setTimeout(function(){
|
||||
popup.removeClass("active");
|
||||
|
||||
// Destroy element
|
||||
setTimeout(function(){
|
||||
popup.remove();
|
||||
}, errorTime);
|
||||
}, errorTime);
|
||||
}
|
||||
|
||||
function showScreen(name){
|
||||
// Hide all other screens
|
||||
$("[id^=screen-]").hide();
|
||||
|
|
@ -97,7 +130,7 @@ function createAccount(){
|
|||
|
||||
// Check for valid data
|
||||
if(!data.ok){
|
||||
alert(data.error);
|
||||
error(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +154,7 @@ function tokenLogin(){
|
|||
|
||||
// Check for valid data
|
||||
if(!data.ok){
|
||||
alert(data.error);
|
||||
error(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -194,7 +227,7 @@ function loadPages(){
|
|||
|
||||
// Check for valid data
|
||||
if(!data.ok){
|
||||
alert(data.error);
|
||||
error(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -229,7 +262,7 @@ function edit(){
|
|||
|
||||
// Check for valid data
|
||||
if(!data.ok){
|
||||
alert(data.error);
|
||||
error(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -255,7 +288,7 @@ function saveEdit(){
|
|||
|
||||
// Check for valid data
|
||||
if(!data.ok){
|
||||
alert(data.error);
|
||||
error(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
15
style.css
15
style.css
|
|
@ -34,7 +34,7 @@ p{
|
|||
a.card{
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen{
|
||||
#wrapper{
|
||||
max-width: 600px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
|
@ -43,6 +43,19 @@ a.card{
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* error popup */
|
||||
.error{
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: -100px;
|
||||
transition: 200ms;
|
||||
color: #B71C1C;
|
||||
font-weight: bold;
|
||||
}
|
||||
.error.active{
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Main Screen */
|
||||
|
||||
#user-info{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue