Author: jruchaud Date: 2015-04-15 10:39:42 +0000 (Wed, 15 Apr 2015) New Revision: 1187 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1187 Log: Create tag Modified: wit/css/style.css wit/index.html wit/js/main.js Modified: wit/css/style.css =================================================================== --- wit/css/style.css 2015-04-15 10:22:01 UTC (rev 1186) +++ wit/css/style.css 2015-04-15 10:39:42 UTC (rev 1187) @@ -15,9 +15,14 @@ margin: 0px; padding: 0px 5px; width: 100%; + + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.selection li { +.selection li.tag { background-color: #E4E4E4; border: 1px solid #AAA; border-radius: 4px; @@ -27,3 +32,25 @@ margin-top: 5px; padding: 0px 5px; } + +.selection .remove { + color: #999; + cursor: pointer; + display: inline-block; + font-weight: bold; + margin-right: 2px; +} + +.selection li.input { + float: left; +} + +.selection li input { + width: 6em; + background: none repeat scroll 0% 0% transparent; + border: medium none; + outline: 0px none; + + font-size: 100%; + margin-top: 5px; +} \ No newline at end of file Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-15 10:22:01 UTC (rev 1186) +++ wit/index.html 2015-04-15 10:39:42 UTC (rev 1187) @@ -3,15 +3,17 @@ <head> <title>WIT</title> <link type="text/css" href="css/style.css" rel="stylesheet"/> - <script type="application/javascript" src="js/main.js"></script> </head> <body> <div class="selection"> - <ul> - <li>wit</li> - <li>js</li> - <li>dev</li> + <ul id="tags"> + <li class="tag"><span class="remove">x</span>wit</li> + <li class="tag"><span class="remove">x</span>js</li> + <li class="tag"><span class="remove">x</span>dev</li> + <li class="input"><input id="inputTag" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" type="search"></input></li> </ul> </div> + + <script type="application/javascript" src="js/main.js"></script> </body> </html> Modified: wit/js/main.js =================================================================== --- wit/js/main.js 2015-04-15 10:22:01 UTC (rev 1186) +++ wit/js/main.js 2015-04-15 10:39:42 UTC (rev 1187) @@ -0,0 +1,11 @@ +var tagsNode = document.getElementById("tags"); +var inputTagNode = document.getElementById("inputTag"); + +var templateTag = "<li class=\"tag\"><span class=\"remove\">x</span>{{value}}</li>"; + +inputTagNode.onkeydown = function(e) { + if (e.keyCode == 13 && this.value != "") { // On enter + inputTagNode.parentNode.insertAdjacentHTML("beforebegin", templateTag.replace("{{value}}", this.value)); + this.value = ""; + } +}