Skip to content
This repository was archived by the owner on Sep 1, 2022. It is now read-only.

Added bootstrap-tags 1.1 #32

Merged
merged 3 commits into from
Oct 15, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,7 @@ term.js/example/
term.js/index.js
term.js/lib/
term.js/.npmignore

# Bootstrap-tags excludes
bootstrap-tags/Guardfile
bootstrap-tags/sass/*.scss
45 changes: 45 additions & 0 deletions bootstrap-tags/.bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{
"name": "bootstrap-tags",
"version": "1.1.5",
"homepage": "http://github.com/maxwells/bootstrap-tags",
"bugs": "https://github.com/maxwells/bootstrap-tags/issues",
"authors": [
"Max Lahey <[email protected]>"
],
"description": "Boostrap-themed jquery tag interface",
"main": [
"dist/js/bootstrap-tags.js",
"dist/css/bootstrap-tags.css"
],
"keywords": [
"jquery",
"bootstrap",
"bootstrap3",
"tagging",
"tags",
"typeahead",
"autocomplete"
],
"license": "MIT",
"ignore": [
"src",
"spec",
"*.html"
],
"dependencies": {
"jquery": ">=1.9.0",
"bootstrap": ">=2.3.2"
},
"scripts": {
"test": "grunt jasmine"
},
"_release": "1.1.5",
"_resolution": {
"type": "version",
"tag": "1.1.5",
"commit": "893dd88dcc0d2c9fb1ee72b882830085ef748e7c"
},
"_source": "git://github.com/maxwells/bootstrap-tags.git",
"_target": "~1.1",
"_originalSource": "bootstrap-tags"
}
19 changes: 19 additions & 0 deletions bootstrap-tags/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Copyright (c) 2012-2014 Max Lahey

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
147 changes: 147 additions & 0 deletions bootstrap-tags/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
# Bootstrap Tags

Bootstrap Tags is a jQuery plugin meant to extend Twitter Bootstrap to include tagging functionality. It supports Bootstrap 2.3.2 and ≥ 3.0.

[![Build Status](https://travis-ci.org/maxwells/bootstrap-tags.png?branch=master)](https://travis-ci.org/maxwells/bootstrap-tags)

## Demo
[http://maxwells.github.com/bootstrap-tags.html](http://maxwells.github.com/bootstrap-tags.html)

## Installation

$ bower install bootstrap-tags

or

$ git clone https://github.com/maxwells/bootstrap-tags.git
--> js files are located in dist/js, CSS in dist/css

## Features
- Support for Bootstrap 2.3.2 and 3+
- Autosuggest (for typing or activated by pressing the down key when empty)
- Bootstrap Popovers (for extended information on a tag)
- Exclusions (denial of a specified list)
- Filters (allowance of only a specified list)
- Placeholder prompts
- Uses bootstrap button-[type] class styling (customizing your bootstrap will change tag styles accordingly)
- Extensible with custom functions (eg, before/after tag addition/deletion, key presses, exclusions)

## Usage

<!-- include bootstrap tags js, css files -->
<script src='path/to/bootstrap-tags/dist/js/bootstrap-tags.min.js'></script>
<link rel="stylesheet" type="text/css" href="path/to/bootstrap-tags/dist/css/bootstrap-tags.css" />

<div id="my-tag-list" class="tag-list"></div>
<script>
$(function() {
// If using Bootstrap 2, be sure to include:
// Tags.bootstrapVersion = "2";
$('#my-tag-list').tags({
tagData:["boilerplate", "tags"],
suggestions:["basic", "suggestions"],
excludeList:["not", "these", "words"]
});
});
</script>

## Documentation

### Settings

The following options are supported. Pass them as a javascript object to the `tags` jQuery function:

```javascript
$('selector').tags({
readOnly: true,
tagData: ["a", "prepopulated", "list", "of", tags],
beforeAddingTag: function(tag){ console.log(tag); }
});
```

option | type | description | default
-------|------|-------------|---------
`bootstrapVersion` | `String` | specify which version of bootstrap to format generated HTML for. Acceptable values are "2", "3" | `3`
`tagData` | `Array` | a list of tags to initialize the tagging interace with | `[]`
`tagSize` | `String` | describes what size input to use. Acceptable values are "lg", "md", or "sm" | `md`
`readOnly` | `boolean` | whether or not to disable user input | `false`
`suggestions` | `Array` | a list of terms that will populate the autosuggest feature when a user types in the first character. | `[]`
`caseInsensitive` | `Boolean` | whether or not autosuggest should ignore case sensitivity | `false`
`restrictTo` | `Array` | a list of allowed tags (will be combined with suggestions, if provided). User inputted tags that aren't included in this list will be ignored | `[]`
`exclude` | `Array` | a list of case insensitive disallowed tags. Supports wildcarding (eg. `['*offensive*']` will ignore any word that has `offensive` in it) | `[]`
`popoverData` | `Array` | a list of popover data. The index of each element should match the index of corresponding tag in `tagData` array | `null`
`popovers` | `Boolean` | whether or not to enable bootstrap popovers on tag mouseover | whether `popoverData` was provided
`popoverTrigger` | `String` | indicates how popovers should be triggered. Acceptable values are 'click', 'hover', 'hoverShowClickHide' | `hover`
`tagClass` | `String` | which class the tag div will have for styling | `btn-info`
`promptText` | `String` | placeholder string when there are no tags and nothing typed in | `Enter tags…`
`maxNumTags` | `Integer` | Maximum number of allowable (user-added) tags. All tags that are initialized in the tagData property are retained. If set, then input is disabled when the number of tags exceeds this value. | `-1` (no limit)
`readOnlyEmptyMessage` | `String` | text to be displayed if there are no tags in readonly mode. Can be HTML | `No tags to display...`
`beforeAddingTag` | `function(String tag)` | anything external you'd like to do with the tag before adding it. Returning false will stop tag from being added | `null`
`afterAddingTag` | `function(String tag)` | anything external you'd like to do with the tag after adding it | `null`
`beforeDeletingTag` | `function(String tag)` | find out which tag is about to be deleted. Returning false will stop tag from being deleted | `null`
`afterDeletingTag` | `function(String tag)` | find out which tag was removed by either pressing delete key or clicking the (x) | `null`
`definePopover` | `function(String tag)` | must return the popover content for the tag that is being added. (eg "Content for [tag]") | `null`
`excludes` | `function(String tag)` | return true if you want the tag to be excluded, false if allowed | `null`

### Controlling tags
Some functions are chainable (returns a `Tagger` object), and can be used to move the data around outside of the plugin.

function | return type | description
---------|-------------|-------------
`hasTag(tag:string)` | `Boolean` | whether tag is in tag list
`getTags()` | `Array` | a list of tags currently in the interface
`getTagsWithContent()` | `Array` | a list of javascript objects with a `tag` property and `content` property
`getTag(tag:string)` | `String` | returns tag as string
`getTagWithContent(tag:string)` | `Object` | returns object with `tag` and `content` property (popover)
`addTag(tag:string)` | `Tagger` | add a tag
`renameTag(tag:string, newTag:string)` | `Tagger` | rename one tag to another value
`removeLastTag()` | `Tagger` | removes last tag if it exists
`removeTag(tag:string)` | `Tagger` | removes tag specified by string if it exists
`addTagWithContent(tag:string, popoverContent:string)` | `Tagger` | Add a tag with associated popover content
`setPopover(tag:string, popoverContent:string)` | `Tagger` | update a tag's associated popover content, if that tag exists

Example:

```javascript
var tags = $('#one').tags( {
suggestions : ["here", "are", "some", "suggestions"],
popoverData : ["What a wonderful day", "to make some stuff", "up so that I", "can show it works"],
tagData: ["tag a", "tag b", "tag c", "tag d"],
excludeList : ["excuse", "my", "vulgarity"],
} );
tags.addTag("tag e!!").removeTag("tag b").setPopover("tag c", "Changed popover content");
console.log(tags.getTags());
```

To reference a tags instance that you've already attached to a selector, (eg. $(selector).tags(options)) you can use $(selector).tags() or $(selector).tags(index)

### Building

For a one off:

$ grunt build

_To build continously_:

$ grunt watch

### Testing

$ grunt test

### Contributing

If you spot a bug, experience browser incompatibility, or have feature requests, please submit them [here](https://github.com/maxwells/bootstrap-tags/issues).

If you want to hack away to provide a new feature/bug-fix, please follow these guidelines:

- Make changes to the coffeescript and sass files, not js/css. This is to ensure that the next person who comes in and edits upstream from js/css will not overwrite your changes.
- Create a pull request for your feature branch, updating README documentation if necessary

### License

This project rocks and uses the MIT-LICENSE.

### Author

Max Lahey
36 changes: 36 additions & 0 deletions bootstrap-tags/bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"name": "bootstrap-tags",
"version": "1.1.3",
"homepage": "http://github.com/maxwells/bootstrap-tags",
"bugs": "https://github.com/maxwells/bootstrap-tags/issues",
"authors": [
"Max Lahey <[email protected]>"
],
"description": "Boostrap-themed jquery tag interface",
"main": [
"dist/js/bootstrap-tags.js",
"dist/css/bootstrap-tags.css"
],
"keywords": [
"jquery",
"bootstrap",
"bootstrap3",
"tagging",
"tags",
"typeahead",
"autocomplete"
],
"license": "MIT",
"ignore": [
"src",
"spec",
"*.html"
],
"dependencies": {
"jquery": ">=1.9.0",
"bootstrap": ">=2.3.2"
},
"scripts": {
"test": "grunt jasmine"
}
}
78 changes: 78 additions & 0 deletions bootstrap-tags/dist/css/bootstrap-tags.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/* bootstrap-tags styles */
.bootstrap-tags.bootstrap-3 .tag a {
margin: 0 0 0 .3em; }
.bootstrap-tags.bootstrap-3 .glyphicon-white {
color: #fff; }

.bootstrap-tags.bootstrap-2 .tag.md {
padding: .3em .4em .4em; }
.bootstrap-tags.bootstrap-2 .tag.lg {
padding: .4em .4em .5em; }

.bootstrap-tags {
position: relative; }
.bootstrap-tags .tags {
width: inherit;
height: 0;
position: absolute;
padding: 0;
margin: 0; }
.bootstrap-tags .tag-data {
display: none; }
.bootstrap-tags .tags-input {
width: 100%;
margin: 0;
padding: 0;
height: 1.7em;
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box; }
.bootstrap-tags .tag-list {
width: 280px;
height: auto;
min-height: 26px;
left: 2px;
top: 2px;
position: relative; }
.bootstrap-tags .tag {
padding: .4em .4em .4em;
margin: 0 .1em;
float: left; }
.bootstrap-tags .tag.sm {
padding: .4em .4em .5em;
font-size: 12px; }
.bootstrap-tags .tag.md {
font-size: 14px; }
.bootstrap-tags .tag.lg {
font-size: 18px;
padding: .4em .4em .4em;
margin: 0 .2em .2em 0; }
.bootstrap-tags .tag a {
color: #bbb;
cursor: pointer;
opacity: .5; }
.bootstrap-tags .tag .remove {
vertical-align: bottom;
top: 0; }
.bootstrap-tags ul.tags-suggestion-list {
width: 300px;
height: auto;
list-style: none;
margin: 0;
z-index: 2;
max-height: 160px;
overflow: scroll; }
.bootstrap-tags ul.tags-suggestion-list li.tags-suggestion {
padding: 3px 20px;
height: auto; }
.bootstrap-tags ul.tags-suggestion-list li.tags-suggestion-highlighted {
color: white;
text-decoration: none;
background-color: #0081C2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); }
Loading