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

22
index.htm
View file

@ -16,7 +16,15 @@
</head> </head>
<body> <body>
<div id="hero" class="screen"> <div id="error" class="error">
<div class="card">
<span></span>
</div>
</div>
<div id="wrapper">
<div id="hero">
<div class="card blank"> <div class="card blank">
<h1>Telegraph Manager</h1> <h1>Telegraph Manager</h1>
<p> <p>
@ -25,13 +33,13 @@
</div> </div>
</div> </div>
<div id="screen-nosupport" class="screen"> <div id="screen-nosupport">
<div class="card"> <div class="card">
Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript. Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript.
</div> </div>
</div> </div>
<div id="screen-login" class="screen"> <div id="screen-login">
<div class="card"> <div class="card">
<h1>create an account</h1> <h1>create an account</h1>
<input type="text" name="author_name" placeholder="your name" required /> <input type="text" name="author_name" placeholder="your name" required />
@ -46,7 +54,7 @@
</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>
@ -57,7 +65,7 @@
</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">
@ -84,7 +92,7 @@
</div> </div>
<div id="screen-edit" class="screen"> <div id="screen-edit">
<div class="card blank"> <div class="card blank">
<a onclick="main()" href="#">back</a> <a onclick="main()" href="#">back</a>
</div> </div>
@ -105,5 +113,7 @@
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

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{