Commits

Roma Sokolov  committed baeceb6

UI

  • Participants
  • Parent commits 60c78cb

Comments (0)

Files changed (11)

File static/about.js

 $(document).ready(function() {
-    handle_submit('tags_form', 'user_tags');
+    var correct_tags = false;
+
+    handle_submit('bookmarklet', 'tags');
+    add_hint($("#tags"), function(tags){
+        tags.keyup(function(){
+            correct_tags = len(tags) > 0
+
+            go_guard(correct_tags);
+        });
+    });
+
+    var tags = $('#tags');
+    var go = $('#go');
+    var go_guard = button_guard(go);
+    go.attr('disabled', 'disabled');
+
+    handle_submit('bookmarklet', 'tags', function(){correct_tags});
+
+
+
 });
 

File static/common.css

+
+body {
+    font-family: 'Georgia', serif;
+    font-size: 26px;
+    color: #000;
+}
+a {
+    color: #16496B;
+}
+
+a:hover {
+    color: #72ADD4;
+}
+
+.hint {
+    color: #8A8A8A;
+    font-style: italic;
+    font-size: 0.9em;
+}
+
+.error {
+    color: #BF0404;
+}
+
+#content{
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+}
+
+#about {
+    top: 0%;
+    text-align: right;
+    width:100%;
+}
+
+.form {
+
+}
+
+#tags {
+    width:570px;
+}
+#go {
+    width:90px;
+}
+
+#item {
+    width:665px;
+}
+
+#action {
+    margin: 0 auto;
+    text-align: right;
+    width: 670px;
+}
+
+.text {
+    margin: 0 auto;
+    text-align: justify;
+    width: 670px;
+}
+
+h1 {
+    color: #030E4D;
+    font-size: 32px;
+}
+
+.element {
+    padding-bottom: 10px;
+}
+
+div.info {
+    padding-top: 10px;
+}
+
+span.info {
+    font-weight: bold;
+}
+
+.center {
+    text-align: center;
+}
+
+.paging {
+    text-align: center;
+    font-size: 0.8em;
+    color: #8A8A8A;
+    padding-top:10px;
+    padding-bottom: 10px;
+}
+
+dd {
+    margin: 30px;
+    padding: 10px;
+    border: 1px dashed black;
+}

File static/common.js

+function _a(obj){
+    return Array.prototype.slice.call(obj);
+}
+
+function all(sequence){
+    for(var i=0; i < sequence.length; i++){
+        if(!sequence[i])
+            return false;
+    }
+    return true;
+}
+
 function clean_tag(tag){
     return encodeURIComponent(tag.trim());
 }
 
 function prepare_tags(str){
-    return $.map(str.split(' '), clean_tag).join('/');
+    return $.map(str.trim().split(' '), clean_tag).join('/');
 }
 
+function check_size(elmt){
+    return function(_){
+        return (len(elmt) < 200 && len(elmt) > 0);
+    }
+}
+
+function len(elmt){
+    return elmt.val().trim().length;
+}
+
+function add_hint(elmt, func){
+    elmt.addClass('hint')
+    elmt.click(function(){
+        elmt.removeClass('hint');
+        elmt.val('');
+        elmt.click(function(){});
+    });
+    if (func)
+        func(elmt);
+}
+
+function handle_count(elmt, place){
+    var left = 200 - len(elmt);
+    if(left < 0)
+        place.addClass('error');
+    else
+        place.removeClass('error');
+    place.html(left);
+}
+
+
+function button_guard(button){
+    return function(){
+        var conds = _a(arguments);
+        if (all(conds))
+            button.attr('disabled', '');
+        else
+            button.attr('disabled', 'disabled');
+    }
+}
 
 function handle_submit(form_id, field_id, func){
     var frm = $('#' + form_id);
     return frm.submit(function(){
         var field = $('#' + field_id);
         var tags = prepare_tags(field.val());
-        field.val("");
+        field.val('');
         var url = frm.attr('action');
         frm.attr('action', url + tags);
         if(func)
             return true;
     });
 }
+
+function ctrl_enter(elmt, frm){
+    elmt.keydown(function (e) {
+        if (e.ctrlKey && e.keyCode == 13) {
+            frm.submit();
+        }
+    });
+}

File static/list.js

+$(document).ready(function() {
+    var texta = $("#item");
+    var add_guard = button_guard($("#add"));
+    var correct_length = false;
+    var count = $("#count");
+
+    ctrl_enter(texta, $("#post"));
+
+    texta.keyup(function(){
+        handle_count(texta, count);
+        correct_length = check_size(texta)();
+
+        add_guard(correct_length);
+    });
+    texta.keyup();
+
+    $("#post").submit(function(){
+        return correct_length;
+    });
+
+});
+

File static/main.js

 $(document).ready(function() {
+    var texta = $('#item');
+    var tags = $('#tags');
+    var go = $('#go');
+    var add = $('#add');
+    var count = $('#count');
 
-    function save_item(frm){
-        if($('#item').val())
-            $.post(frm.attr('action'), {'item':$('#item').val()},
-                   function(data, code){
-                       $('#info').html(data);
-                   });
-        else
-            $('#info').html('Enter your note, please.');
+    handle_submit('post', 'tags', check_size(texta));
+    handle_submit('search', 'tags');
+    ctrl_enter(texta, $("#post"));
 
-        return false;
-    }
+    go.attr('disabled', 'disabled');
+    add.attr('disabled', 'disabled');
 
-    handle_submit('tags_form', 'user_tags', save_item);
-    var field = $('#user_tags');
-    var url = $('#list');
-    var old_href = url.attr('href');
-    var old_tags = prepare_tags(field.val());
-    url.attr('href', old_href + old_tags);
-    old_href = url.attr('href');
+    var correct_tags = false;
+    var correct_length = false;
 
-    field.keyup(function(){
-        var new_tags = prepare_tags(field.val());
-        if(old_tags.length)
-            url.attr('href', old_href.replace(old_tags, new_tags));
-        else
-            url.attr('href', old_href + new_tags);
-        old_tags = new_tags;
-        old_href = url.attr('href');
-        if(new_tags.length)
-            url.show();
-        else
-            url.hide();
+    var add_guard = button_guard(add);
+    var go_guard = button_guard(go);
+
+    add_hint(tags, function(tags){
+        tags.keyup(function(){
+            correct_tags = tags.val().trim().length > 0
+
+            go_guard(correct_tags);
+            add_guard(correct_length, correct_tags);
+        });
     });
-    field.keyup();
 
-        var tags = prepare_tags(field.val());
+
+    texta.keyup(function(){
+        handle_count(texta, count);
+        correct_length = check_size(texta)();
+
+        add_guard(correct_length, correct_tags);
+    });
+    texta.keyup();
+
 });

File templates/about.html

+{% import "macroses.jinja" as M %}
 {% extends "base.html" %}
 {% block title %} About {% endblock %}
 {% block head %}
 
 {% block content %}
 <div>
-  <div>
-    About Page. Nikita Kovshov, Roman Sokolov.
+  <div class="text">
+    <h1>Remar.kz</h1>
+    <p>
+      Sometimes you use someone else&apos;s computer and find something neat and intersting.
+      But you, of course, afraid use your twitter, mail, bookmarks manager, because you know that everyone want your passwords!
+    </p>
+    <p>
+      So, you can easily add your stuff here and then get it back.
+      You don&apos;t need to log in or register. Just enter appropriate tags and post your remark.
+      Everyone can access to your remarks but only you know necessary words for it.
+      It&apos;s something like &quot;security through publicty&quot;.
+    </p>
+    <p>
+      Authors: Nikita Kovshov, Roman Sokolov.
+    </p>
+    <p class="hint">
+      You can generate bookmarklet with your tags. Drag link to Links Area in your browser. If you find interesting page you can click on bookmarklet and save it to selfnotes. Also you can select text and send it to selfnotes with bookmarklet. Enjoy!
+    </p>
   </div>
-  <div>
-    You can generate bookmarklet with your tags. Drag link to Links Area in your browser. If you find interesting page you can click on bookmarklet and save it to selfnotes. Also you can select text and send it to selfnotes with bookmarklet. Enjoy!
+    <form id="bookmarklet" action="/about/" method="POST">
+      <div class="form_element" >
+        <input id="tags" type="text" name="tags" size="50" value="enter tags separated by space" />
+        <input id="go" type="submit" value="Make" />
+      </div>
 
-    <form id="tags_form" action="/about/" method="POST">
-      <input id="user_tags" type="text" name="user_tags" size="50" value="enter tags separated by space" />
-      {% if request.method == 'GET' or not tags %}
-      <input id="sbm" type="submit" name="sbm" value="Get Bookmarklet!" />
-      {% else %}
-      <input id="sbm" type="submit" name="sbm" value="Get Another!" />
-
-      <br />
-      Bookmarklet with your tags ({{ ' '.join(tags) }}):
-      <a href='javascript:function tltp(a){d=document;mObj=d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));mObj.id="modalContainer";st="background-color:transparent;position:fixed;top:0px;right:0px;z-index:10000;";if(mObj.cssText)mObj.cssText=st;else mObj.style.cssText=st;alertObj=mObj.appendChild(d.createElement("div"));st="position:relative;width:300px;min-height:100px;margin-top:50px;border:2px solid #000;background-color:#F2F5F6;";if(alertObj.cssText)alertObj.cssText=st;else alertObj.style.cssText=st;alertObj.appendChild(d.createElement("p")).innerHTML=a;rem=function(){document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"))};setTimeout(rem,2E3)}function bkmrk(){d=document;t=d.getSelection?d.getSelection():d.selection.createRange().text;et=encodeURIComponent(t);t=et.trim().length?et:encodeURIComponent(d.location.toString());parameters="item="+t;url="{{ url_for('bookmarklet', tags='/'.join(tags), _external=True) }}";http_request=false;if(window.XMLHttpRequest){http_request=new XMLHttpRequest;http_request.overrideMimeType&&http_request.overrideMimeType("text/html")}else if(window.ActiveXObject)try{http_request=new ActiveXObject("Msxml2.XMLHTTP")}catch(a){try{http_request=new ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}http_request||tltp("Cannot create XMLHTTP instance");http_request.onreadystatechange=function(){if(http_request.readyState==4)if(http_request.status==200){result=http_request.responseText;tltp(result)}else tltp(http_request.status)};http_request.open("POST",url,true);http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");http_request.setRequestHeader("Content-length",parameters.length);http_request.setRequestHeader("Connection","close");http_request.send(parameters)};void(bkmrk());'>Post Selfnote</a>.
-
+      {% if request.method != 'GET' and tags %}
+      <div class="text info">
+        Bookmarklet with your tags ({% autoescape false %}{{ M.show_tags(tags) }}{% endautoescape %}):
+        <p class="center">
+          <a href='javascript:function tltp(a){d=document;mObj=d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));mObj.id="modalContainer";st="background-color:transparent;position:fixed;top:0px;right:0px;z-index:10000;";if(mObj.cssText)mObj.cssText=st;else mObj.style.cssText=st;alertObj=mObj.appendChild(d.createElement("div"));st="position:relative;width:300px;min-height:100px;margin-top:50px;border:2px solid #000;background-color:#F2F5F6;";if(alertObj.cssText)alertObj.cssText=st;else alertObj.style.cssText=st;alertObj.appendChild(d.createElement("p")).innerHTML=a;rem=function(){document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"))};setTimeout(rem,2E3)}function bkmrk(){d=document;t=d.getSelection?d.getSelection():d.selection.createRange().text;et=encodeURIComponent(t);t=et.trim().length?et:encodeURIComponent(d.location.toString());parameters="item="+t;url="{{ url_for('bookmarklet', tags='/'.join(tags), _external=True) }}";http_request=false;if(window.XMLHttpRequest){http_request=new XMLHttpRequest;http_request.overrideMimeType&&http_request.overrideMimeType("text/html")}else if(window.ActiveXObject)try{http_request=new ActiveXObject("Msxml2.XMLHTTP")}catch(a){try{http_request=new ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}http_request||tltp("Cannot create XMLHTTP instance");http_request.onreadystatechange=function(){if(http_request.readyState==4)if(http_request.status==200){result=http_request.responseText;tltp(result)}else tltp(http_request.status)};http_request.open("POST",url,true);http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");http_request.setRequestHeader("Content-length",parameters.length);http_request.setRequestHeader("Connection","close");http_request.send(parameters)};void(bkmrk());'>Post Selfnote</a>
+        </p>
+      </div>
       {% endif %}
     </form>
-  </div>
 </div>
 {% endblock %}

File templates/base.html

 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     {% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='common.css') }}">
+
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='common.js') }}"></script>
     <title> {% block title %} {% endblock %} -- Selfnote </title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
-    {% block content %}
-
-    {% endblock %}
+    <div id="about">
+      <a href="{{ url_for('main') }}" tabindex="42">Remar.kz</a> &lt;$&gt;
+      <a href="{{ url_for('about') }}" tabindex="43">About </a>
+    </div>
+    <div id="content">
+      {% block content %}  {% endblock %}
+    </div>
   </body>
 </html>

File templates/list.html

-{% extends "main.html" %}
-{% block title %} List for {{ ', '.join(tags) }} {% endblock %}
-{% block tags_input %}{{ ', '.join(tags) }} {% endblock %}
-{% block list %}
-<div>
+{% import "macroses.jinja" as M %}
+{% extends "posting.html" %}
+{% block title %} List for {{ ' '.join(tags) }} {% endblock %}
+{% block head %}
+{{ super() }}
+<script type="text/javascript" src="{{ url_for('static', filename='list.js') }}"></script>
+{% endblock %}
+{% block top_content %}
+<div class="text info">Tags: {% autoescape false %}{{ M.show_tags(tags) }}{% endautoescape %}</div>
+<div class="paging">
 {% if page > 1 %} <a href="{{ url_for('get', tags='/'.join(tags)) }}?page={{ page - 1 }}"> back </a> {% endif %}
 &nbsp;Page # {{ page }} &nbsp;
 {% if not last_page %} <a href="{{ url_for('get', tags='/'.join(tags)) }}?page={{ page + 1 }}"> forward </a> {% endif %}
 </div>
+{% endblock %}
+{% block bottom_content %}
+<dl class="text">
 {% for item in items %}
-<p>{{ item }}</p>
+<dd>{{ item }}</dd>
 {% endfor %}
+</dl>
 {% endblock %}
 

File templates/macroses.jinja

+{%- macro show_tags(tags) -%}
+{%- for tag in tags -%}
+<span class="info">{{ tag }}</span>{% if not loop.last %}, {% endif %}{% endfor %}
+{%- endmacro -%}
+

File templates/main.html

-{% extends "base.html" %}
+{% extends "posting.html" %}
 {% block title %} Welcome {% endblock %}
 {% block head %}
 {{ super() }}
 <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
 {% endblock %}
-{% block content %}
-<div>
-  <div>
-    <a href="{{ url_for('about') }}">About </a>
-  </div>
-  <div>
-    <form id="tags_form" action="{{ url_for('add', tags='') }}" method="POST">
-      Comma-sepparated tags: <input id="user_tags" type="text" name="user_tags" size="53" value="{% block tags_input %}{% endblock %}" />
-      <a id="list" href="{{ url_for('get', tags='') }}">See this tags</a>
-      <br />
-      <textarea id="item" cols="65" rows="2"></textarea>
-      <br />
-      <div id="info">
-      </div>
-      <input id="sbm" type="submit" name="sbm" value="Send Note!" />
-    </form>
-  </div>
-  {% block list %}
-  {% endblock %}
+{% block top_content %}
+<div class="form">
+  <form id="search" action="{{ url_for('get', tags='') }}" method="get">
+    <div class="form_element">
+      <input id="tags" type="text" tabindex="1" size="53" value="enter tags separated by space" />
+      <input type="submit" id="go" tabindex="41" value="search" />
+    </div>
+  </form>
 </div>
+{% if error %}
+<div class="error">{{ error }}</div>
+{% endif %}
 {% endblock %}

File templates/posting.html

+{% extends "base.html" %}
+{% block content %}
+  {% block top_content %}
+  {% endblock %}
+<div class="form">
+  <form id="post" action="{{ url_for('add', tags='/'.join(tags)) }}" method="POST">
+    <div class="form_element">
+      <textarea id="item" cols="48" rows="3" name="item" tabindex="2"></textarea>
+    </div>
+    <div class="form_element" id="action">
+        <span id="count"></span>
+        <input id="add" type="submit" tabindex="3" value="add" />
+    </div>
+  </form>
+</div>
+{% block bottom_content %}{% endblock %}
+{% endblock %}