Projects / lithium_anologue

diff --git a/controllers/AnologueController.php b/controllers/AnologueController.php index 92732b3..ea02a5f 100644 --- a/controllers/AnologueController.php +++ b/controllers/AnologueController.php @@ -7,6 +7,7 @@ use \app\models\Anologue; class AnologueController extends \lithium\action\Controller { public function index() { + $this->set(array('index' => true)); $this->render(); } @@ -17,7 +18,7 @@ class AnologueController extends \lithium\action\Controller { $data['ip'] = $this->request->get('env:REMOTE_ADDR'); if (!empty($data)) { $result = Anologue::addMessage($this->request->params['id'], $data); - if ($result->ok) { + if (!empty($result->ok)) { $status = 'success'; } else { $status = 'fail'; diff --git a/views/anologue/index.html.php b/views/anologue/index.html.php index 2816fe4..ee50c2a 100644 --- a/views/anologue/index.html.php +++ b/views/anologue/index.html.php @@ -1,24 +1,49 @@ <div id="anologue-new"><a href="/new">start an anologue &raquo;</a></div> -<img id="anologue-logo" src="/img/anologue.png" alt="a" /> +<div class="header"> + <header> + <div class="width-constraint"> + <img id="anologue-logo" src="/img/anologue.png" alt="a" /> + <h1 class="title">anologue</h1> + </div> + </header> +</div> -<h1 class="title">anologue</h1> +<div class="article width-constraint"> + <article> + + <p>i need to have a conversation with a couple people.</p> + <p>there's <strong>email</strong>, but i get pretty sick of the copied text that quickly gets out of control, the unnecessary repetition of everyone's signuatures... overlapping responses. and, i get so much crap in my inbox as-is--it can be cumbersome to try and isolate relevant emails and then the important parts of them.</p> + <p>i don't like <strong>instant messaging</strong>. there are so many clients out there, and, sure there are tools to help them come together, but there are some people that will never use <em>im</em> (i don't blame them, i just haven't had the choice.)</p> + <p><strong>twitter</strong> is right out.</p> + <p>then, there's one of my favorites: <strong>irc</strong>. but, let's face it: it's mostly for nerds.</p> + <p><strong>google wave</strong> may be an option... someday. even so, in my experience with the beta so far i'd have to argue that multi-threaded chats are actually less productive.</p> + <p>so, i needed something different.</p> + + <h2 class="sub">a slightly different approach to an old problem</h2> -<p>i need to have a conversation with one or more people.</p> -<p>there's <strong>email</strong>, but i get pretty sick of the copied text that quickly gets out of control, the signuatures. and, i get so much crap in my inbox as-is, it can be cumbersome to try and isolate relevant emails and the important parts of them.</p> -<p>i don't like <strong>instant messaging</strong>. there are so many clients out there, and, sure there are tools to help them come together, but there are some people that will never us im (and i don't blame them.)</p> -<p><strong>twitter</strong> is right out.</p> -<p>then, there's one of my favorites: <strong>irc</strong>. but, let's face it, it's mostly for nerds.</p> + <div class="aside excellence"> + <aside> + <img id="anologue-excellent" src="/img/excellent.jpg" alt="sixty-nine, dudes!" /> + <span>your future us's use anologue!</span> + </aside> + </div> -<h2 class="sub">in comes anologue</h2> + <p><strong>anologue</strong> is like comments, meets im, meets irc, meets <a href="http://pastium.org">your favorite paste app</a>, meets instant coffee.</p> + <p>actually, instant coffee sucks.</p> + <p>with anologue you can quickly and easily engage in an anonymous (or not) linear dialogue with any number of people (within reason).</p> + <p><strong>no accounts. no installations. no way?! <em>yes, way!</em></strong></p> + <p><a href="/new">your "chat room" is created by the time this link loads</a>. invite whoever you want by giving them your unique link, and chat away.</p> -<img id="anologue-excellent" src="/img/excellent.jpg" alt="excellent!" /> -<p>it's like comments, meets im, meets irc, meets <a href="http://pastium.org">your favorite paste app</a>, meets instant coffee.</p> -<p>actually, instant coffee sucks.</p> -<p>with anologue you can quickly and easily enjoy an anonymous (or not) dialogue between one or more persons (sorry, androids.)</p> -<p><strong>no accounts. no installations. no way?! <em>yes, way!</em></strong></p> -<p><a href="/new">your `chat room` is created in the time it takes for this link to load</a>. invite whoever you want by giving them your unique link, and chat away. if you can type, you can use anologue. and, judging by the average commenter on youtube, i'd say that includes all but those without electricity. for the more technically saavy, you may appreciate the implementation of markdown and use of gravatar.</p> + <h2 class="sub">let's make this better, together</h2> -<h2 class="sub">let's make this better, together</h2> + <p>perhaps best of all: <a href="http://rad-dev.org/projects/lithium_anologue">this is open source</a>. built with <a href="http://php.net" target="_php">php 5.3</a>, using the most non-heinous, totally rad <A href="http://li3.rad-dev.org" target="_li3">lithium framework</a>, <a href="http://couchdb.apache.org" target="_couch">couchdb</a>, <a href="http://jquery.com" target="_jquery">jquery</a> and a few other scripts; all coming together for the creamy goodness you're about to experience.</p> + <p class="last">contribute to the core or download the source and setup your own. this one's for you, internets.</p> + </article> +</div> -<p class="last"><a href="http://rad-dev.org/projects/lithium_anologue">this is open source</a>. built with <a href="http://php.net" target="_php">php 5.3</a>, using the most non-heinous, totally rad <A href="http://li3.rad-dev.org" target="_li3">lithium framework</a>, <a href="http://couchdb.apache.org" target="_couch">couchdb</a>, <a href="http://jquery.com" target="_jquery">jquery</a> and perhaps a few other scripts; all coming together for the creamy goodness you're about to experience. this one's for you: internets.</p> +<div class="footer"> + <footer> + <a href="http://li3.rad-dev.org" target="_li3"><img src="http://imgur.com/6eddU.gif" alt="powered by lithium" border="0" /></a> + </footer> +</div> diff --git a/views/anologue/view.html.php b/views/anologue/view.html.php index d01e4a2..b3370b3 100644 --- a/views/anologue/view.html.php +++ b/views/anologue/view.html.php @@ -20,9 +20,9 @@ </div> <div class="anologue-help"> - <p><strong>welcome to anologue.</strong></p> + <p><strong>hello.</strong></p> <p>to get started, type your text in the grey box at the very bottom and press &lt;enter&gt;. <br />markdown is supported, to an extent.</p> - <p><strong>for your privacy,</strong> your email is only used to generate your gravatar and is stored in an unreadable, encoded format.</p> + <p><strong>for your privacy,</strong> your email is only used to generate your <a href="http://gravatar.com" target="_gravatar">gravatar</a> and is stored in an unreadable, encoded format.</p> </div> <h3 class="hash"><?php echo $this->html->link($anologue->_id, array('action' => 'view', 'id' => $anologue->_id), array('title' => 'Copy this url and give it to others')); ?></h3> @@ -47,8 +47,10 @@ <div class="anologue-speak"> <span class="label"> - <a href="http://spacialeffect.com" target="_spacial"><img src="http://spacialeffect.com/spacial-effect-w.png" alt="a spacial effect collaborative" border="0" /></a><br /> - <a href="http://li3.rad-dev.org" target="_li3"><img src="http://imgur.com/6eddU.gif" alt="powered by lithium" border="0" /></a> + <label for="anologue-text">you say: </label> + </span> + <span class="label about"> + <a href="/">what is anologue?</a> </span> <div class="text"> <textarea name="anologue-text" id="anologue-text"></textarea> diff --git a/views/layouts/default.html.php b/views/layouts/default.html.php index cf2e3a9..b88ad91 100644 --- a/views/layouts/default.html.php +++ b/views/layouts/default.html.php @@ -1,19 +1,13 @@ <!doctype html> <html> -<head> - <?=@$this->html->charset(); ?> - <title>anologue</title> - <?=@$this->html->style('anologue'); ?> - <?=@$this->scripts(); ?> - <?=@$this->html->link('Icon', null, array('type' => 'icon')); ?> -</head> -<body> - <div id="container"> - <div id="header"></div> - <div id="content"> - <?=@$this->content; ?> - </div> - <div id="footer"></div> - </div> -</body> + <head> + <?php echo $this->html->charset(); ?> + <title>anologue</title> + <?php echo $this->html->style('anologue'); ?> + <?php echo $this->scripts(); ?> + <?php echo $this->html->link('Icon', null, array('type' => 'icon')); ?> + </head> + <body<?php echo (!empty($index)) ? ' class="index"' : null; ?>> + <?php echo $this->content; ?> + </body> </html> diff --git a/webroot/css/anologue.css b/webroot/css/anologue.css index ac2d75b..179ef21 100644 --- a/webroot/css/anologue.css +++ b/webroot/css/anologue.css @@ -1,21 +1,36 @@ * { margin:0; padding:0; } + h1.title { font-size:4em; opacity:.5; } h1.smaller-title { float:left; } - h1 a { color:black; opacity:.05; } + h1 a { color:black; opacity:.05; border:none; } h1 a:hover { color:black; opacity:.15; } -h2.sub { font-size:3em; font-weight:normal; opacity:.5; margin:1em 0 .25em 0; } +h2.sub { font-size:3em; font-weight:normal; opacity:.5; margin:.5em 0 0 0; } h3.hash { opacity:.5; clear:left; float:left; } - h3.hash a:hover { color:#00737F; } -a { color:#00737F; text-decoration:none; } -a:hover { color:#00E5FF; } + h3.hash a { border:none; } + h3.hash a:hover { } + +a { color:#4c2c59; text-decoration:none; border-bottom:1px dotted #77458c; } +a:hover { color:#77458c; } + html, body, input, password, textarea { background:white; color:black; font-family:Helvetica, Arial, sans-serif; } body { padding:1em; } +body.index { padding:0; } + p { padding:.5em 0; } p.last { padding:.5em 0 4em 0; } -#anologue-new a { display:block; font-weight:bold; padding:1em; font-size:2em; float:right; } -#anologue-logo { padding:0 2em; display:block; } -#anologue-excellent { float:right; padding:0 0 1em 1em; } +.width-constraint { display:block; width:1002px; margin:0 auto; } + +.header { background:#4c2c59 url(/img/bg.png); padding:2em 1em; margin:0 0 1em 0; } + .header .aside { text-align:right; vertical-align:bottom; } +.footer { text-align:center; padding:0 0 2em 0; } + .footer a { border:none; } + +#anologue-new a { display:block; font-weight:bold; padding:1em; font-size:2em; float:right; background:black; background:rgba(0,0,0,.35); color:white; border:none; } +#anologue-logo { padding:0 2.75em; display:block; } +.excellence { float:right; padding:1em; background:#fafafa; margin:0 0 1em 1em; } + .excellence img { margin:0 0 .5em 0; border:1em solid #f0f0f0; } + .excellence span { display:block; font-style:italic; font-size:.65em; text-align:center; } .anologue-settings { display:block; float:right; text-align:right; padding:.5em .75em 1em 1em; background:#e7e7e7; background-color:rgba(0,0,0,.15); font-size:.65em; } .anologue-settings label { opacity:.35; } @@ -32,14 +47,15 @@ p.last { padding:.5em 0 4em 0; } .anologue li.author { font-weight:bold; white-space:nowrap; text-align:right; width:14em; left:5em; padding:1em .5em; } .anologue li.author img { float:right; margin:0 0 0 .5em; } .anologue li.text { position:relative; padding:.5em .5em .5em 20.5em; min-height:1em; } + .anologue .text a { border-bottom:1px dotted #77458c; } .anologue .text .markdown { } - .anologue-speak { position:fixed; z-index:50; bottom:0; left:0; display:block; padding:.5em 2%; width:96%; clear:both; background:#333; background-color:rgba(0,0,0,.75); color:white; } - .anologue-speak span.label { display:block; position:absolute; z-index:100; top:.5em; left:.5em; font-size:.65em; padding:.5em; width:20.5em; color:rgba(255,255,255,.75); text-align:center; } - .anologue-speak .label img { padding:.25em 0 0 0; opacity:.5; } - .anologue-speak .label img:hover { opacity:1; } + .anologue-speak { position:fixed; z-index:50; bottom:0; left:0; display:block; padding:.5em 2%; width:96%; clear:both; background:#4c2c59 url(/img/bg.png); color:white; } + .anologue-speak span.label { display:block; position:absolute; z-index:100; top:.5em; left:.5em; font-size:.65em; padding:.5em 1em; width:19.5em; color:white; text-align:right; } + .anologue-speak .label.about { top:3.5em; text-align:left; } + .anologue-speak .label.about a { color:white; color:#77458c; border:none; } .anologue-speak .text { padding:0 0 0 19.5em; font-size:.65em; } - .anologue-speak textarea { display:block; width:96%; border:0; padding:.5em 1em; height:4em; font-size:1em; color:white; background:#666; background:rgba(255,255,255,.25); overflow:hidden; } - .anologue-speak textarea:focus { outline:0; background:#999; background:rgba(255,255,255,.5); } + .anologue-speak textarea { display:block; width:96%; border:0; padding:.5em 1em; height:4em; font-size:1em; color:white; background:#666; background:rgba(0,0,0,.35); overflow:hidden; } + .anologue-speak textarea:focus { outline:0; background:#999; background:rgba(0,0,0,.5); } diff --git a/webroot/img/bg.png b/webroot/img/bg.png new file mode 100644 index 0000000..66aeb4f Binary files /dev/null and b/webroot/img/bg.png differ diff --git a/webroot/js/anologue.js b/webroot/js/anologue.js index 6a6791d..4787270 100644 --- a/webroot/js/anologue.js +++ b/webroot/js/anologue.js @@ -4,6 +4,7 @@ var anologue = { line: 0, anologue: {}, converter: {}, + lastInput: null }, setup: function(config) { @@ -51,11 +52,18 @@ var anologue = { if (data.author == '') { data.author = 'anonymous'; } + this._config.lastInput = $("#anologue-text").val(); $("#anologue-text").val(""); clearTimeout(this._config.timeout); $.post("/say/" + this._config.anologue._id, data, function(response) { + + if (response.status != 'success') { + $("#anologue-text").val(anologue._config.lastInput); + // this might occur if someone sends an update at the same time... + anologue.alert('Hold your horses, Spammy McSpamsky. Wait until your last message goes through and try sending your message again.'); + } anologue.listener(); - }); + }, "json"); }, push: function(message) { @@ -67,8 +75,12 @@ var anologue = { var soundDisabled = $('#anologue-sound:checked').val(); if (!soundDisabled) { // lazy check to not trigger sound on your message - if (message.author != $('#anologue-author').val()) { - this.hey(); + var user = $('#anologue-author').val(); + if (message.author != user) { + var userRegex = new RegExp(user.toLowerCase(), 'i'); + if (userRegex.test(message.text)) { + this.hey(); + } } } $('#'+id).animate({