init

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+bower_components/

bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "lovely-tag",
+  "version": "0.0.0",
+  "homepage": "https://github.com/kalasoo/lovely-tag",
+  "authors": [
+    "kalasoo <ym.kalasoo@gmail.com>"
+  ],
+  "description": "Lovely Tag & Input",
+  "main": "['dist/lovely-tag.js', 'dist/lovely-tag.css']",
+  "keywords": [
+    "tag"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.1.3"
+  }
+}

dist/lovely-tag.css

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+@-webkit-keyframes tagZoomIn {
+  from {
+    -webkit-transform: scale(0);
+    transform: scale(0); }
+
+  to {
+    -webkit-transform: scale(1);
+    transform: scale(1); } }
+
+@keyframes tagZoomIn {
+  from {
+    -webkit-transform: scale(0);
+    transform: scale(0); }
+
+  to {
+    -webkit-transform: scale(1);
+    transform: scale(1); } }
+
+.tags {
+  font-size: 0.8em;
+  margin: 0.5em 0; }
+  .tags .tag {
+    margin-right: 1em;
+    margin-bottom: 0.5em; }
+
+.tag {
+  display: inline-block;
+  padding: 0.3em 0.6em;
+  border-radius: 6px;
+  color: #777;
+  background: #f1f1f1;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s; }
+  .tag.tag-blue, .tag.tag-green, .tag.tag-red {
+    color: #fff; }
+  .tag.tag-blue {
+    background-color: #4a90e2; }
+  .tag.tag-green {
+    background-color: #2cc185; }
+  .tag.tag-red {
+    background-color: #f4726d; }
+  .tag.added {
+    -webkit-transform-origin: right 50%;
+    transform-origin: right 50%;
+    -webkit-animation: tagZoomIn 0.3s forwards;
+    animation: tagZoomIn 0.3s forwards; }
+  .tag.to-be-checked, .tag.to-be-crossed {
+    cursor: pointer;
+    color: #fff;
+    position: relative;
+    padding-right: 1.7em; }
+    .tag.to-be-checked:after, .tag.to-be-crossed:after {
+      position: absolute;
+      top: 0.2em;
+      right: 0.5em;
+      font-weight: bold; }
+  .tag.to-be-checked {
+    background: #2cc185; }
+    .tag.to-be-checked:after {
+      content: '✔'; }
+  .tag.to-be-crossed {
+    background: #f4726d; }
+    .tag.to-be-crossed:after {
+      content: '×'; }
+
+.new-tag input[type="checkbox"] {
+  display: none; }
+.new-tag .tag {
+  cursor: pointer; }

dist/lovely-tag.js

@@ -0,0 +1,110 @@
+(function() {
+  var LovelyTagInput, Tag;
+
+  Tag = (function() {
+    function Tag(str, hasHashTag) {
+      if (hasHashTag == null) {
+        hasHashTag = true;
+      }
+      this.text = str;
+      this.$checkbox = $('<input>').attr({
+        type: 'checkbox',
+        name: 'tags',
+        value: this.text,
+        checked: 'checked'
+      });
+      this.$ele = $('<div>').addClass('tag').text("" + (hasHashTag ? '#' : void 0) + this.text).append(this.$checkbox).click((function(_this) {
+        return function() {
+          if (_this.$ele.hasClass('to-be-crossed')) {
+            return _this.destroy();
+          } else {
+            return _this.toBeDeleted();
+          }
+        };
+      })(this));
+    }
+
+    Tag.prototype.justAdded = function() {
+      this.$ele.addClass('added');
+      return this;
+    };
+
+    Tag.prototype.toBeDeleted = function() {
+      this.$ele.addClass('to-be-crossed');
+      return this;
+    };
+
+    Tag.prototype.normal = function() {
+      this.$ele.removeClass('added to-be-crossed removed');
+      return this;
+    };
+
+    Tag.prototype.destroy = function() {
+      return this.$ele.addClass('removed').remove();
+    };
+
+    return Tag;
+
+  })();
+
+  LovelyTagInput = function(ele, options) {
+    var $input, $new, $tags, addTag, blurLastTag, selectOrRemoveLastTag, settings, tags, toBeDeletedTag;
+    settings = $.extend({
+      hasHashTag: true
+    }, options || {});
+    $new = $(ele);
+    tags = [];
+    toBeDeletedTag = null;
+    $tags = $new.find('.tags');
+    $input = $new.find('.new-tag-input');
+    addTag = function(str) {
+      var _tag;
+      _tag = new Tag(str, settings.hasHashTag);
+      _tag.$ele.insertBefore($input);
+      return tags.push(_tag.justAdded());
+    };
+    selectOrRemoveLastTag = function() {
+      if (toBeDeletedTag) {
+        toBeDeletedTag.destroy();
+        return toBeDeletedTag = null;
+      } else if (tags.length > 0) {
+        return toBeDeletedTag = tags.pop().toBeDeleted();
+      }
+    };
+    blurLastTag = function() {
+      if (toBeDeletedTag != null) {
+        toBeDeletedTag.normal();
+        tags.push(toBeDeletedTag);
+        return toBeDeletedTag = null;
+      }
+    };
+    return $input.keydown(function(e) {
+      var _keyCode, _tagText;
+      _keyCode = e.keyCode || e.which;
+      _tagText = $input.val();
+      if (_tagText.length !== 0 && (_keyCode === 9 || _keyCode === 13)) {
+        blurLastTag();
+        addTag(_tagText);
+        $input.val('');
+        e.preventDefault();
+      }
+      if (_tagText.length === 0 && _keyCode === 8) {
+        selectOrRemoveLastTag();
+        return e.preventDefault();
+      }
+    });
+  };
+
+  $.fn.LovelyTag = function(options) {
+    return this.each(function() {
+      var $ele;
+      $ele = $(this);
+      if (!$ele.data('lovely-tag')) {
+        return $ele.data('lovely-tag', new LovelyTagInput(this, options));
+      }
+    });
+  };
+
+  $('.new-tag').LovelyTag();
+
+}).call(this);

gulpfile.js

@@ -0,0 +1,21 @@
+var gulp = require('gulp'),
+    sass = require('gulp-sass'),
+    coffee = require('gulp-coffee');
+
+gulp.task('default', ['sass', 'coffee'])
+
+// CSS
+gulp.task('sass', function() {
+    gulp.src('./src/*.scss')
+        .pipe(sass())
+        .pipe(gulp.dest('./dist/'))
+});
+gulp.watch('./src/*.scss', ['sass']);
+
+// JS
+gulp.task('coffee', function() {
+    gulp.src('./src/*.coffee')
+        .pipe(coffee())
+        .pipe(gulp.dest('./dist/'))
+});
+gulp.watch('./src/*.coffee', ['coffee']);

sample.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lovely Tags</title>
+    <style>
+        body {
+            font-family: sans-serif;
+        }
+
+        p {
+            margin-top: 2em;
+        }
+
+        .container {
+            width: 960px;
+            max-width: 960px;
+            margin: 100px auto;
+        }
+
+        input[type="text"] {
+            padding: 0;
+            border: none;
+            background-color: #f1f1f1;
+            outline: none;
+            padding: 0.5em;
+        }
+
+        input[type="text"]:focus {
+            background-color: #eaeaea;
+        }
+
+    </style>
+    <link rel="stylesheet" type="text/css" href="dist/lovely-tag.css">
+</head>
+<body>
+
+    <div class="container">
+        <h3>♥ Lovely Tag ♥</h3>
+
+        <p>
+            <pre><code>
+.tags
+    .tag
+    .tag.tag-blue
+    .tag.tag-green
+    .tag.tag-red
+    .tag.to-be-checked
+    .tag.to-be-crossed</code>
+            </pre>
+        </p>
+
+        <p>
+            <div class="tags">
+                <span class="tag">I'm a tag</span>
+                <span class="tag tag-blue">I'm blue</span>
+                <span class="tag tag-green">I'm green</span>
+                <span class="tag tag-red">Lol, but I'm red</span>
+                <span class="tag to-be-checked">Hah, I can be checked</span>
+                <span class="tag to-be-crossed">or crossed</span>
+            </div>
+        </p>
+
+        <p>
+            <pre><code>
+.new-tag
+    .tags
+        .tag
+        .new-tag-input</code>
+            </pre>
+        </p>
+
+        <div class="new-tag">
+            <div class="tags">
+                <input type="text" placeholder="add a new tag" class="new-tag-input">
+            </div>
+        </div>
+
+        <p>
+            <small>
+                Developed by <a href="https://xitu.io/4">Ming</a>.
+            </small>
+        </p>
+
+    </div>
+
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="dist/lovely-tag.js"></script>
+
+</body>
+</html>