diff options
| -rw-r--r-- | static/js/fullscreen.js | 118 | ||||
| -rw-r--r-- | template/fullscreen.st | 230 |
2 files changed, 250 insertions, 98 deletions
diff --git a/static/js/fullscreen.js b/static/js/fullscreen.js index cf2d997..192f92a 100644 --- a/static/js/fullscreen.js +++ b/static/js/fullscreen.js @@ -1,9 +1,10 @@ function initFullscreen(){ - Room = "dumpfm"; - refresh() - ImageCache = [] - SeenImages = {} - $('#tools-button').click(toolsToggle); + Room = "dumpfm"; + refresh(); + ImageCache = []; + SeenImages = {}; + FavedMap = {}; + $('#tools-button').click(toolsToggle); } function toolsToggle(){ if ($("#msgInputDiv").css("display") == "none") @@ -26,12 +27,35 @@ function scanMessagesForImages(messages){ NextImage = new Image() NextImage.onload = displayImage NextImage.src = images[i] + NextImage.msg_id = messages[m].msg_id; } } } +function clickImage(img) { + if (!LoggedIn) return; + var msg_id = $(img).attr('msg_id'); + if (!$(img).hasClass('fullscreen-favorite')) { + FavedMap[msg_id] = true; + $('#fav-indicator').show(); + console.log('faving ' + msg_id); + Tag.add(msg_id, "favorite"); + $(img).addClass("fullscreen-favorite"); + } else { + delete FavedMap[msg_id]; + $('#fav-indicator').hide(); + console.log('defaving ' + msg_id); + Tag.rm(msg_id, "favorite"); + $(img).removeClass("fullscreen-favorite"); + } +} + function displayImage(){ - $("#big-image").html('<img src="'+this.src+'">') + $("#big-image").html('<img src="'+this.src+'" msg_id = "' + this.msg_id + '" onclick="clickImage(this)">'); + if (FavedMap[this.msg_id]) + $('#fav-indicator').show(); + else + $('#fav-indicator').hide(); } function refresh() { @@ -43,12 +67,11 @@ function refresh() { } catch(e) { } - - setTimeout(refresh, 1000); + setTimeout(refresh, 1000); }; var onError = function(resp, textStatus, errorThrown) { - setTimeout(refresh, 1000); + setTimeout(refresh, 4000); }; $.ajax({ @@ -63,9 +86,86 @@ function refresh() { }); } +function initLogin() { + $('#logininner').ridgificate('2px solid #dd0000', + '2px solid #fe6230', + '2px solid #fef600', + '2px solid #00bc00', + '2px solid #009bfe', + '2px solid #000083', + '2px solid #30009b', + '2px solid #dd0000', + '2px solid #fe6230', + '2px solid #fef600', + '2px solid #00bc00', + '2px solid #009bfe', + '2px solid #000083', + '2px solid #30009b'); +} +function showLogin() { + $('#loginbox').show().center().center(); + $('#username').focus(); + $('input').removeAttr('disabled'); +} +function login() { + $('#spinner').show(); + $('input').attr('disabled', 'disabled'); + var nick = $('#nickInput').val(); + var password = $('#passwordInput').val(); + var rememberme = $('#remembermeInput').attr('checked') ? 'yes' : ''; + var hash = hex_sha1(nick + '$' + password + '$dumpfm'); + var onSuccess = function(json) { + if (typeof pageTracker !== 'undefined') { + pageTracker._setCustomVar(1, "logged-in", nick); + } + LoggedIn = true; + $('#loginbox').hide(); + $('.sublogo').text('click to fav'); + }; + var onError = function(resp, textStatus, errorThrown) { + $('#spinner').hide(); + $('input').removeAttr('disabled'); + $('#errormsg').text("Couldn't log you in :( Bad password?"); + } + + $.ajax({ + type: 'POST', + timeout: 5000, + url: '/login', + data: {'nick': nick, ts: '', 'hash': hash, 'rememberme': rememberme}, + cache: false, + dataType: 'json', + success: onSuccess, + error: onError + }); +} +// http://plugins.jquery.com/project/autocenter +(function($){ + $.fn.extend({ + center: function () { + return this.each(function() { + var top = ($(window).height() - $(this).outerHeight()) / 2; + var left = ($(window).width() - $(this).outerWidth()) / 2; + $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'}); + }); + } + }); +})(jQuery); +// me (scottbot) (dumpco 2010 ltd inc) +(function($) { + $.fn.extend({ + ridgificate: function() { + var ridges = arguments; + return this.each(function() { + for (var i = 0; i < ridges.length; i++) { + $(this).wrap('<div style="border: ' + ridges[i] + '">'); + } + }); + }}); +})(jQuery); diff --git a/template/fullscreen.st b/template/fullscreen.st index fc57dc0..2f8aab2 100644 --- a/template/fullscreen.st +++ b/template/fullscreen.st @@ -1,94 +1,146 @@ <html> -<head> -$head()$ -<title>dump.fm - fullscreen</title> -<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -<script src="$domain$/static/js/pichat.js"></script> -<script src="$domain$/static/js/fullscreen.js"></script> - <script> - jQuery(document).ready(initChat); - var Room = $json_room_key$; - var Timestamp = $timestamp$; - var Version = $version$; -$if(isadmin)$ - var IsAdmin = true; -$else$ - var IsAdmin = false; -$endif$ - if (Nick) { - jQuery(document).ready(function() { setupUpload('upload', Room); }); - } - function showAlert() { alert('MUST LOGIN'); } - var newwindow; - function pop(url) { + <head> + <title>dump.fm - fullscreen</title> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> + <script src="$domain$/static/js/pichat.js"></script> + <script src="$domain$/static/js/fullscreen.js"></script> + <script> + var LoggedIn = $if(user_nick)$true$else$false$endif$; + var Timestamp = $timestamp$; + var newwindow; + function pop(url) { newwindow=window.open(url,'name','height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0'); if (window.focus) {newwindow.focus()} - } - jQuery(startTitleUpdater); - jQuery(initChatMsgs); - $if(user_nick)$ // - $else$ - function showAlert() { - alert('Join dump.fm @ http://dump.fm/register'); - } + } + jQuery(startChatUpdater); + </script> + <style> + html, body, div, img { margin: 0; padding: 0; border: 0; overflow: hidden; font-family: Monaco, "Courier New", Courier, monospace; } + input { + font-family: Monaco, "Courier New", Courier, monospace; + } + #big-image img { + width: 100%; height: 100%; + cursor: pointer; + box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + } + #loginbox { + background: white; + z-index: 999; + position: absolute; + display: none; + } + #logininner { + width: 30em; + height: 20em; + position: relative; + } + #infocol { + width: 50%; + float: left; + position: relative; + } + #formcontainer { + padding: 0; + margin-top: 20%; + width: 80%; + position: relative; + } + #nickInput, #passwordInput { + width: 100%; + } + #piccol { + width: 50%; + float: right; + position: relative; + } + #loginimg { + width: 75%; + margin-top: 20%; + } + #spinner { display: none; } + #forgetpw { + position: absolute; + left: 5px; + bottom: 5px; + font-size: 80%; + } + #fav-indicator { + display: none; + position: fixed; + z-index: 999; + height: 150px; + width: 150px; + left: 20px; + top: 20px; + } + #errormsg { + position: relative; + color: red; + text-align: center; + margin-top: 250px; + } -$endif$ - </script> -<style> -html, body, div, img { margin: 0; padding: 0; border: 0; overflow: hidden; } -#controls { display: none; } -#big-image img { width: 100%; height: 100%;} -#big-image{font-size:120px;text-align: justify; text-justify: newspaper; text-shadow: 1px 1px #eee, 2px 2px #f0e, 3px 3px #eee,4px 4px #f0e,5px 5px #eee, 3px 3px #eee,4px 4px #f0e,5px 5px #eee,6px 6px #f0e,6px 6px #eee,7px 7px #f0e,7px 7px #eee,8px 8px #f0e,8px 8px #eee,9px 9px #f0e,9px 9px #eee; font-family: Monaco, "Courier New", Courier, monospace;color:#fff} -#tools-button{position:absolute;height:10px;width:10px;background-color:#eee;bottom:37px;left:2px;} -#msgInputDiv{display:none;} + #loginclose { + position: absolute; + right: 3px; + top: 3px; + } + #big-image{font-size:120px;text-align: justify; text-justify: newspaper; text-shadow: 1px 1px #eee, 2px 2px #f0e, 3px 3px #eee,4px 4px #f0e,5px 5px #eee, 3px 3px #eee,4px 4px #f0e,5px 5px #eee,6px 6px #f0e,6px 6px #eee,7px 7px #f0e,7px 7px #eee,8px 8px #f0e,8px 8px #eee,9px 9px #f0e,9px 9px #eee; color:#fff} + #memelogo { position: fixed; z-index: 999; bottom: 30px; right: 80px; } + .sublogo { font-family: Monaco, "Courier New", Courier, monospace; } + a { color:#000 } + </style> + <script>jQuery(initLogin)</script> + </head> + <body> + <div id="loginbox"> + <div id="logininner"> + <div id="infocol"> + <center> + <div id="formcontainer"> + <form onsubmit="login(); return false;"> + <div align="left">username</div> + <div><input id="nickInput"></div> + <br> + <div align="left">password</div> + <div><input id="passwordInput" type="password"></div> + <div align="right" style="font-size: 80%">remember me? <input id="remembermeInput" type="checkbox" checked="true"></div> + <br> + <div> + <center><input type="submit" value="LOGIN"></center> + <img id="spinner" src="/static/img/spinner.gif"> + </div> + </form> + </div> + </center> + </div> + <div id="piccol"> + <center><img id="loginimg" src="/static/img/danceman.gif"></center> + <center><i>join the party</i></center> + </div> + <div id="errormsg"></div> + <div id="forgetpw"><a href="$domain$/reset">forgot password?</a></div> + <div id="loginclose"><a href="#" onclick="jQuery('#loginbox').hide(); return false;">X</a></div> + </div> + </div> -#msgInputDiv { - position:fixed; - min-width:500px; - z-index:100; -left:3px;opacity:0.5; -bottom: 0px; - width: 100%; -} - -#msgInput { - z-index:100; - left:-3px;border:1px solid #000; - position:relative;border-right:0px; -height:35px; -font-size:20px; - min-width:500px;padding-right:38px;padding-left:1px; - box-shadow: 2px 3px 4px #eee; -} -.msgInput { - min-width:500px;width:100%; - z-index:100;background-color:#eff5fb; -} -#msginputrapper{ -margin-right:0; -height:35px; - -} -.memelogo{padding:0px;top:0px;position:absolute;} -#fullscreen-logo { - - position: fixed; - z-index: 999; - bottom: 60px; - right: 200px; -} -</style> -</head> -<body> -<a id="fullscreen-logo" href="http://dump.fm"> -<img src="http://dump.fm/static/img/dumppixelhover.png"class="memelogo"> -</a> -<div id="big-image">waiting 4 new image from dump.fm.............</div> -<div id="controls"></div> -<script> -Timestamp = $timestamp$; -initFullscreen() -</script> -$google_analytics()$ -</body> -</html>
\ No newline at end of file + <div id="memelogo"> + <a href="http://dump.fm"><img src="http://dump.fm/static/img/dumppixelhover.png" class="memelogo"></a> + <br><br> + <div class="sublogo"> + $if(user_nick)$ + click to fav + $else$ + <a href="#" onclick="showLogin(); return false;">LOGIN</a> | <a href="$domain$/register">REGISTER</a> + $endif$ + </div> + </div> + <div id="big-image">waiting 4 new image from dump.fm.............</div> + <img src="/static/img/thumbs/heartfaved.gif" id="fav-indicator"> + <script> + initFullscreen() + </script> + $google_analytics()$ + </body> +</html> |