]> git.decadent.org.uk Git - memories.git/commitdiff
Rather more lightweight (and functional) tag completion code.
authorSimon Cozens <simon@simon-cozens.org>
Sat, 17 Feb 2007 18:35:14 +0000 (18:35 +0000)
committerSimon Cozens <simon@simon-cozens.org>
Sat, 17 Feb 2007 18:35:14 +0000 (18:35 +0000)
git-svn-id: http://svn.simon-cozens.org/memories/trunk@35 041978f6-d955-411f-a9d7-1d8545c9c3c7

templates/header
templates/photo/tagedit
templates/photo/upload
templates/photo/view
templates/static/memories.css
templates/static/upload.js

index 50c09d7190050ede6391e9527c381e260643034d..797ad0826828cdd0335676844a063aaf24a9a037 100644 (file)
@@ -9,15 +9,10 @@
 href="[%base%]/[%path%]?format=rss" />
 [% END %]
     <script type="text/javascript" src="[%base%]/static/prototype.js"></script>
-[% IF request.params.active == "tagedit" %]
-    <script type="text/javascript" src="[%base%]/tag/list_js"></script>
-    <script type="text/javascript" src="[%base%]/static/upload.js"></script>
-</head>
-<body onload="init()">
-[% ELSE %]
+<script type="text/javascript" src="[%base%]/tag/list_js"></script>
+<script type="text/javascript" src="[%base%]/static/upload.js"></script>
 </head>
 <body>
-[% END %]
 [% INCLUDE nav %]
 <table width="100%">
     <tr>
index a34d8bd644ace8ff25f095ac5497cc2d48677ea3..24f60ad25b6c836e988314dbf631e9a2bc909143 100644 (file)
@@ -1,3 +1,4 @@
+
 <div class="messages"><small>
 <b>Tagging advice</b>: Tags should be words, (<i>portrait</i>, <i>henry</i>) or
 phrases surrounded by double quotes. (<i>"tall buildings"</i>) You can
@@ -11,11 +12,10 @@ put any number of tags in the "add tags" box, like this:
 </div>
 
 Delete tags: <form action="[%base%]/photo/edit_tags/[%photo.id%]" method="post">
-<ul>
 [% FOR tagging = photo.taggings %]
-    <li> [% tagging.tag %] <input type="checkbox" name="delete_[%tagging.id%]">
+    <span class="tagedittagdelete">[% tagging.tag %]<input type="checkbox" name="delete_[%tagging.id%]"></span>
 [% END %]
-</ul>
 <p> Add tags: <input type="textbox" name="newtags" id="tags"> <input
 type="submit" value="Tag it!"> </p>
+<script type="text/javascript"> addHandler($("tags")) </script>
 </form>
index ad88ff84974eb0c8c6c483aaadfc8ef39a086bb1..02ef5e8f1cbf536efc4ff5b32de7d5dd4f78fa8e 100644 (file)
@@ -1,21 +1,4 @@
-<html>
-<head>
-    <title> Memories - Photo Sharing </title>
-    <link title="Maypole" href="[%base%]/static/memories.css" type="text/css" rel="stylesheet"/>
-    <script type="text/javascript" src="[%base%]/tag/list_js"></script>
-    <script type="text/javascript" src="[%base%]/static/upload.js"></script>
-</head>
-<body onload="init()">
-[% INCLUDE nav %]
-<table width="100%">
-    <tr>
-    <td valign="top">
-    [% IF messages %]
-    <div class="messages">
-    <ul> [% FOR m = messages %] <li> [%m%] </li> [% END %]
-    </ul></div>
-    [% END %]
-   <div id="main">
+[% INCLUDE header %]
 <h1> Upload a photo </h1>
 <p>
 This is where you can upload your photographs. At the moment, you must
@@ -38,6 +21,7 @@ server, so don't press stop or reload after pressing the Upload button.
     <td><input name="tags" id="tags"></td>
     <tr><td> &nbsp; </td> <td>
 <div class="messages"><small>
+<script type="text/javascript"> addHandler($("tags")) </script>
 <b>Tagging advice</b>: Tags should be words, (<i>portrait</i>, <i>henry</i>) or
 phrases surrounded by double quotes. (<i>"tall buildings"</i>) You can
 put any number of tags in the "add tags" box, like this:
index 0fbccbba48aa0c1b6559f8665bb88822b11b194e..0216bdaeacb01c6fa3da2392829796043034c962 100644 (file)
@@ -75,7 +75,7 @@ END %]
 function select_tab(name) {
     document.getElementsByClassName("active").each(function (x) { x.removeClassName("active")});
     new Ajax.Updater("content","[%base%]/photo/"+name+"/[%photo.id%]",
-      { method: "get" }
+      { method: "get", evalScripts: true }
     )
     $(name).addClassName("active");
 }
index 77476f213e87d09abcaede27a021b1ec6db12433..e6df986b3737092e362ee2ad95a145635f0f7e81 100644 (file)
@@ -93,6 +93,9 @@ p { font-family: sans-serif; }
 
 .frontpagetable { padding: 10px;  }
 .frontpagetable th { border: 1px solid black; }
+
+.tagedittagdelete { margin-right: 2em; }
+
 span.tagcloud0 { font-size: 9px;}
 span.tagcloud1 { font-size: 10px;}
 span.tagcloud2 { font-size: 10px;}
index 0b033c6951c8d7575a397efd49ff4f8bf20070d5..c62663d10e844bcc3d40a6de746df9f3fb28a8d2 100644 (file)
@@ -1,82 +1,59 @@
 String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g,'') }
 String.prototype.escRegExp = function(){ return this.replace(/[\\$*+?()=!|,{}\[\]\.^]/g,'\\$&') }
 String.prototype.unescHtml = function(){ var i,t=this; for(i in e) t=t.replace(new RegExp(i,'g'),e[i]); return t }
-function Suggestions() { this.length=0; this.picked=0 }
-var suggestions = new Suggestions();
-var tagSearch='', lastEdit='';
-var h={}, sections=[{},{},{},{},{},{}], selected={}, currentTag={},
-e={'&lt;':'<','&gt;':'>','&amp;':'&','&quot;':'"'};
-
-function init () {
-    document.onkeydown = document.onkeypress = document.onkeyup = handler
-    h.suggest = document.getElementById("suggestionlist");
-    h.tags = document.getElementById("tags");
-}
-
-function handler(event) { var e=(event||window.event) //w3||ie
-    if (e.type == 'keyup') {
+var availhash = {};
+var tags = tagList.split(/\s+/); 
+for (t in tags) { availhash[tags[t]] = 1 }
+
+function addHandler( elt ) {
+    var params = {
+        elt: elt,
+        oldvalue: elt.value
+    };
+    document.onkeyup = function (event) {
+       var e=(event||window.event) //w3||ie
         switch(e.keyCode) {
-            //case 8:  //backspace
-            //case 46: //delete
             case 35: //end
             case 36: //home
             case 39: // right
             case 37: // left
             case 32: // space
-                hideSuggestions(); break
-            case 38: case 40: break;
-            case 9: break;
-            case 13: break;
+                params.elt.style.background = "#fff";
+                $("suggestionlist").style.visibility='hidden';
+                break
+            case 38: case 40: case 9: case 13: break;
             default: 
-            updateSuggestions()
-}}
-    else if (e.type == "keypress") { lastEdit = h.tags.value }
-}
-
-function makeTag(parent, tag, js) {
-    parent.appendChild(document.createTextNode(" "+ tag))
-}
-
-function updateSuggestions() {
-    while (h.suggest.hasChildNodes()) h.suggest.removeChild(h.suggest.firstChild)
-    if(!getCurrentTag() || !currentTag.text) { 
-        hideSuggestions(); return false 
-    }
-    var tagArray = h.tags.value.toLowerCase().split(' '),
-    txt=currentTag.text.trim().escRegExp(), tagHash={}, t
-    for(t in tagArray) tagHash[tagArray[t]] = true;
-
-    var search = tagList.match(new RegExp(("(?:^| )("+txt+"[^ ]+)"), "gi"))
-    if(search){
-        var i;
-        for (i=0; i<search.length; i++) {
-            var tl = search[i].trim()
-            if(tagHash[tl])  continue // do not suggest already typed tag
-            suggestions[suggestions.length] = makeTag(h.suggest, tl, 'complete')
-            suggestions.length++
-    }} 
-    if (suggestions.length > 0) { showSuggestions() } 
-    else { hideSuggestions(); }
-}
-
-function getCurrentTag() {
-    if(h.tags.value == lastEdit) return true // no edit
-    if(h.tags == '') return false
-    currentTag = {}
-    var tagArray=h.tags.value.toLowerCase().split(' '), oldArray=lastEdit.toLowerCase().split(' '), currentTags = [], matched=false, t,o
-    for (t in tagArray) {
-        for (o in oldArray) {
-            if(typeof oldArray[o] == 'undefined') { oldArray.splice(o,1); break }
-            if(tagArray[t] == oldArray[o]) { matched = true; oldArray.splice(o,1); break; }
+            var tagArray = params.elt.value.toLowerCase().split(' '),
+            txt=tagArray[tagArray.length-1].trim().escRegExp(), tagHash={}, t
+            for(t in tagArray) tagHash[tagArray[t]] = true;
+            var sl = $("suggestionlist");
+            if (!txt) { sl.style.visibility = 'hidden'; return; }
+
+            var search = tagList.match(new RegExp(("(?:^| )("+txt+"[^ ]+)"), "gi"))
+            if(search){ 
+                params.elt.style.background = availhash[txt] ? "#dfd" : "#fff";
+                while(sl.childNodes.length > 0) { sl.removeChild(sl.firstChild) }
+                sl.style.visibility='visible';
+                var i;
+                for (i in search) {
+                    if (!tagHash[search[i]]) {
+                        var tn = document.createTextNode(search[i]);
+                        var a = document.createElement("a");
+                        var elt = params.elt;
+                        var closureTxt = txt;
+                        a.onclick = function () {
+                            elt.value = elt.value.replace(new RegExp(closureTxt+"$"),this.firstChild.nodeValue+" ");
+                            elt.focus(); 
+                            sl.style.visibility='hidden';
+                        };
+                        a.appendChild(tn);
+                        sl.appendChild(a);
+                    }
+                }
+            } else { 
+                params.elt.style.background = availhash[txt] ? "#dfd" : "#fdd";
+                sl.style.visibility='hidden';
+           }
         }
-        if(!matched) currentTags[currentTags.length] = t
-        matched=false
     }
-    // more than one word changed... abort
-    currentTag = { text:tagArray[currentTags[0]], index:currentTags[0] }
-    return true
 }
-
-
-function hideSuggestions() { h.suggest.style.visibility='hidden' }
-function showSuggestions() { h.suggest.style.visibility='visible' }