haselkern/telegraph-manager
1
0
Fork 0
Code Activity

custom error popups

Browse source
This commit is contained in:
haselkern 2017-01-07 21:46:31 +01:00
parent 7808a71e71
commit 233cdb8247
3 changed files with 133 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

144
index.htm
View file

@ -16,93 +16,103 @@
</head> </head>
<body> <body>
<div id="hero" class="screen"> <div id="error" class="error">
<div class="card blank"> <div class="card">
<h1>Telegraph Manager</h1> <span></span>
<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>
<div id="screen-nosupport" class="screen"> <div id="wrapper">
<div class="card">
Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript. <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>
<div id="screen-login" class="screen"> <div id="screen-nosupport">
<div class="card"> <div class="card">
<h1>create an account</h1> Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript.
<input type="text" name="author_name" placeholder="your name" required /> </div>
<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>
<div class="card">
<h1>login with token</h1> <div id="screen-login">
<input type="text" name="token" placeholder="your token (like this: b968da509bb768...)" required /> <div class="card">
<button onclick="tokenLogin()">login</button> <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>
<div id="screen-login-telegraph" class="screen"> <div id="screen-login-telegraph">
<div class="card"> <div class="card">
<p> <p>
<a href="#" target="_blank" onclick="doneAuthorized()">click to login to telegra.ph</a> <a href="#" target="_blank" onclick="doneAuthorized()">click to login to telegra.ph</a>
</p> </p>
<p> <p>
You have to do this in order to publish articles. After you've clicked the link, come back to this website. You have to do this in order to publish articles. After you've clicked the link, come back to this website.
</p> </p>
</div>
</div> </div>
</div>
<div id="screen-main" class="screen"> <div id="screen-main">
<a id="fab" href="http://telegra.ph/" target="_blank" title="new page"><img src="g/ic_add.png" /></a> <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-animator" title="edit profile" onclick="edit()">
<div id="user-image"> <div id="user-image">
<img src="g/ic_account.png" /> <img src="g/ic_account.png" />
</div> </div>
<div id="user-edit"> <div id="user-edit">
<img src="g/ic_edit_white.png" /> <img src="g/ic_edit_white.png" />
</div>
</div> </div>
<span id="user-name"></span>
<span id="user-short"></span>
<a id="user-url" href="#" target="_blank"></a>
<br>
<span>&mdash; <span id="user-page-count"></span> &mdash;</span>
</div> </div>
<span id="user-name"></span> <div id="page-list">
<span id="user-short"></span>
<a id="user-url" href="#" target="_blank"></a>
<br>
<span>&mdash; <span id="user-page-count"></span> &mdash;</span>
</div>
<div id="page-list"> </div>
</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> </div>
</body> </body>

51
main.js
View file

@ -7,6 +7,9 @@ var numberOfPagesToLoad = 10;
// How many pixels should there be space around the FAB // How many pixels should there be space around the FAB
var fabSpace = 30; var fabSpace = 30;
// How many milliseconds should an error message be visible
var errorTime = 2000;
$(document).ready(function(){ $(document).ready(function(){
// Check for localStorage // Check for localStorage
@ -28,20 +31,23 @@ $(document).ready(function(){
} }
} }
// Window resize for positioning FAB // Window resize for positioning elements
window.onresize = resize; window.onresize = resize;
resize(); resize();
}); });
// Position FAB and error popups when resizing
function resize(){ function resize(){
var fab = $("#fab"); 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("bottom", fabSpace);
fab.css("left", left); fab.css("left", fabLeft);
$(".error").css("right", $("#wrapper").offset().left)
} }
// http://stackoverflow.com/a/488073/1456971 // http://stackoverflow.com/a/488073/1456971
@ -55,6 +61,33 @@ function isScrolledIntoView(elem) {
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 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){ function showScreen(name){
// Hide all other screens // Hide all other screens
$("[id^=screen-]").hide(); $("[id^=screen-]").hide();
@ -97,7 +130,7 @@ function createAccount(){
// Check for valid data // Check for valid data
if(!data.ok){ if(!data.ok){
alert(data.error); error(data.error);
return; return;
} }
@ -121,7 +154,7 @@ function tokenLogin(){
// Check for valid data // Check for valid data
if(!data.ok){ if(!data.ok){
alert(data.error); error(data.error);
return; return;
} }
@ -194,7 +227,7 @@ function loadPages(){
// Check for valid data // Check for valid data
if(!data.ok){ if(!data.ok){
alert(data.error); error(data.error);
return; return;
} }
@ -229,7 +262,7 @@ function edit(){
// Check for valid data // Check for valid data
if(!data.ok){ if(!data.ok){
alert(data.error); error(data.error);
return; return;
} }
@ -255,7 +288,7 @@ function saveEdit(){
// Check for valid data // Check for valid data
if(!data.ok){ if(!data.ok){
alert(data.error); error(data.error);
return; return;
} }

15
style.css
View file

@ -34,7 +34,7 @@ p{
a.card{ a.card{
cursor: pointer; cursor: pointer;
} }
.screen{ #wrapper{
max-width: 600px; max-width: 600px;
margin: 1em auto; margin: 1em auto;
} }
@ -43,6 +43,19 @@ a.card{
box-shadow: none; 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 */ /* Main Screen */
#user-info{ #user-info{