taggle 0.1.0

data/app/assets/stylesheets/taggle.scss

@@ -0,0 +1,6 @@
+//
+// Unofficial set of styles based on the official examples of the Taggle.js project
+//
+// Author: @hsgubert - Henrique Gubert
+// Based on the examples developed by @okcoker - Sean Coker
+//*= require_tree ./taggle

data/app/assets/stylesheets/taggle/autocomplete.scss

@@ -0,0 +1,58 @@
+//
+// Unofficial set of styles based on the official examples of the Taggle.js project
+//
+// Author: @hsgubert - Henrique Gubert
+// Based on the examples developed by @okcoker - Sean Coker
+
+
+div.taggle {
+  // jQuery autocomplete example
+  .ui-autocomplete {
+      position: absolute;
+      top: 0;
+      left: 0;
+  }
+
+  .ui-menu {
+      list-style: none;
+      padding: 2px;
+      margin: 0;
+      display: block;
+      outline: none;
+  }
+
+  .ui-menu .ui-menu-item {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+  }
+
+  .ui-menu .ui-menu-item a {
+      text-decoration: none;
+      display: block;
+      padding: 2px .4em;
+      line-height: 1.5;
+      min-height: 0;
+      font-weight: normal;
+      color: #8a8a8a;
+      cursor: pointer;
+
+      &:hover {
+          color: #fff;
+          background: #990033;
+      }
+  }
+
+
+  .ui-helper-hidden-accessible {
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+  }
+
+}

data/app/assets/stylesheets/taggle/basics.scss

@@ -0,0 +1,127 @@
+//
+// Unofficial set of styles based on the official examples of the Taggle.js project
+//
+// Author: @hsgubert - Henrique Gubert
+// Based on the examples developed by @okcoker - Sean Coker
+
+
+div.taggle {
+  border: 0;
+  background: #FDFDFD;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.7);
+  min-height: 20px;
+  padding: 8px;
+  border-radius: 3px;
+  color: #555;
+  transition: all .25s;
+  cursor: text;
+  margin-bottom: 10px;
+  position: relative;
+  height: auto;
+
+  span.taggle_placeholder {
+    position: absolute;
+    color: #CCC;
+    top: 12px;
+    left: 8px;
+    transition: opacity, .25s;
+    user-select: none;
+  }
+
+  // clearfix: makes div expand as more tags are added
+  &:before, &:after {
+    display: block;
+    content: "";
+    line-height: 0;
+    clear: both;
+  }
+
+  ul.taggle_list {
+    float: left;
+    width: 100%;
+
+    li.taggle {
+      margin-right: 8px;
+      margin-bottom: 0px;
+      background: #E2E1DF;
+      padding: 5px 10px;
+      border-radius: 3px;
+      position: relative;
+      cursor: pointer;
+      transition: all .3s;
+      animation-duration: 1s;
+      animation-fill-mode: both;
+
+      &:hover {
+        padding: 5px;
+        padding-right: 15px;
+        background: #ccc;
+        transition: all .3s;
+
+        button.close {
+          display: block;
+        }
+      }
+
+      button.close {
+        font-size: 1.1rem;
+        position: absolute;
+        top: 5px;
+        right: 3px;
+        text-decoration: none;
+        padding-left: 2px;
+        padding-top: 3px;
+        line-height: 0.5;
+        color: #ccc;
+        color: rgba(0, 0, 0, 0.2);
+        padding-bottom: 4px;
+        display: none;
+        border: 0;
+        background: none;
+        cursor: pointer;
+
+        &:hover {
+          color: #990033;
+        }
+      }
+    }
+
+    li {
+      float: left;
+      display: inline-block;
+      white-space: nowrap;
+      font-weight: 500;
+      margin-bottom: 0px;
+    }
+
+    .taggle_hot {
+      background: #cac8c4;
+    }
+  }
+
+  .taggle_sizer {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: -500px;
+    z-index: -1;
+    visibility: hidden;
+  }
+
+  input.taggle_input {
+    border: none;
+    outline: none;
+    padding: 8px;
+    padding-left: 0;
+    float: left;
+    margin-top: -5px;
+    background: none;
+    width: 100%;
+    max-width: 100%;
+
+    &:focus, &.active {
+      background: #fff;
+      transition: all .25s;
+    }
+  }
+}

data/app/assets/stylesheets/taggle/custom-tags.scss

@@ -0,0 +1,96 @@
+//
+// Unofficial set of styles based on the official examples of the Taggle.js project
+//
+// Author: @hsgubert - Henrique Gubert
+// Based on the examples developed by @okcoker - Sean Coker
+
+div.taggle {
+  &.custom {
+    border-radius: 0;
+    box-shadow: none;
+
+    .taggle {
+      border-radius: 0;
+      padding: 5px;
+      padding-right: 20px;
+
+      .close {
+        display: inline-block;
+        right: 3px;
+      }
+    }
+
+    // Delicious style
+    &.delicious {
+      background-image: linear-gradient(to bottom,#eee 1%,#fff 15%);
+      border: 1px solid #AAA;
+      min-height: 50px;
+
+      &.active {
+        border-color: #3274D1;
+        background-image: linear-gradient(to bottom,#eee 1%,#fff 15%);
+      }
+
+      .taggle {
+        color: #444;
+        border-radius: 0;
+        border-top-left-radius: 1.5rem;
+        border-bottom-left-radius: 1.5rem;
+        background-color: #ddd;
+        font-family: sans-serif;
+        font-size: 0.8rem;
+        padding: 5px;
+        padding-left: 20px;
+
+        .close {
+          color: #aaa;
+          font-size: 0.9rem;
+          height: 0.7rem;
+          width: 0.7rem;
+          line-height: .1rem;
+          margin-top: 3px;
+          right: auto;
+          left: 5px;
+
+          &:hover {
+            color: #888;
+          }
+        }
+      }
+    }
+
+    // StackOverflow style
+    &.stackoverflow {
+      border: 1px solid #ccc;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+      .taggle {
+        color: #3E6D8E;
+        border-radius: 0;
+        background-color: #E0EAF1;
+        font-weight: 200;
+
+        &.taggle_hot {
+          background: #BDD0DD;
+        }
+
+        .close {
+          color: #aaa;
+          border-radius: 0.7rem;
+          font-size: 0.9rem;
+          height: 0.7rem;
+          width: 0.7rem;
+          line-height: .1rem;
+          margin-top: 3px;
+
+          &:hover {
+            background: #C03434;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    // Other custom styles here
+  }
+}

data/app/assets/stylesheets/taggle/duplicate-tag-animations.scss

@@ -0,0 +1,81 @@
+//
+// Unofficial set of styles based on the official examples of the Taggle.js project
+//
+// Author: @hsgubert - Henrique Gubert
+// Based on the examples developed by @okcoker - Sean Coker
+
+div.taggle {
+  // Bounce animation
+  .bounce {
+    animation-name: bounce;
+  }
+
+  @-webkit-keyframes bounce {
+
+      0%, 20%, 50%, 80%, 100% {
+          -webkit-transform: translateY(0);
+      }
+
+
+      40% {
+          -webkit-transform: translateY(-16px);
+      }
+
+
+      60% {
+          -webkit-transform: translateY(-7px);
+      }
+  }
+
+  @-moz-keyframes bounce {
+
+      0%, 20%, 50%, 80%, 100% {
+          -moz-transform: translateY(0);
+      }
+
+
+      40% {
+          -moz-transform: translateY(-16px);
+      }
+
+
+      60% {
+          -moz-transform: translateY(-7px);
+      }
+  }
+
+  @-o-keyframes bounce {
+
+      0%, 20%, 50%, 80%, 100% {
+          -o-transform: translateY(0);
+      }
+
+
+      40% {
+          -o-transform: translateY(-16px);
+      }
+
+
+      60% {
+          -o-transform: translateY(-7px);
+      }
+  }
+
+  @keyframes bounce {
+
+      0%, 20%, 50%, 80%, 100% {
+          transform: translateY(0);
+      }
+
+
+      40% {
+          transform: translateY(-16px);
+      }
+
+
+      60% {
+          transform: translateY(-7px);
+      }
+  }
+
+}

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "taggle"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/taggle.rb

@@ -0,0 +1,7 @@
+require "taggle/version"
+
+# requires the Rails engine, that automatically includes the assets on the app
+require "taggle/engine"
+
+module Taggle
+end

data/lib/taggle/engine.rb

@@ -0,0 +1,5 @@
+# Defining the engine automatically includes the assets on the apps
+module Taggle
+  class Engine < Rails::Engine
+  end
+end

data/lib/taggle/version.rb

@@ -0,0 +1,3 @@
+module Taggle
+  VERSION = "0.1.0"
+end

data/taggle.gemspec

@@ -0,0 +1,35 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'taggle/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "taggle"
+  spec.version       = Taggle::VERSION
+  spec.date          = '2016-09-20'
+  spec.authors       = ["Henrique Gubert"]
+  spec.email         = ["guberthenrique@hotmail.com"]
+
+  spec.summary       = %q{Wrapper gem for the Taggle.js project}
+  spec.description   = %q{This gem allows you to include Taggle.js in your Rails app, using the asset pipeline.}
+  spec.homepage      = "https://github.com/hsgubert/taggle"
+  spec.license       = "MIT"
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  # if spec.respond_to?(:metadata)
+  #   spec.metadata['allowed_push_host'] = "TODO: Set to 'http://mygemserver.com'"
+  # else
+  #   raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
+  # end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency 'rails', '>= 3.2'
+  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec", "~> 3.0"
+end