Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @sedeh/tagger with all npm packages installed. Try it out:

var tagger = require("@sedeh/tagger")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@sedeh/tagger v2.0.0

Welcome to tagger!

Have you ever been in need of a tagger that can tag a product or show a product as a favourite or some other purpose without writing much of a code? Tagger will tag items in the order being tagged. But wait. What if your user tag items in different days and you care about segregating them by date when displaying them back in a seperate page. No worries, you can set the tagger to remember dates of entry as well!

Live Demo | Source code | Comments/Requests

MODULE:     TaggerModule
DIRECTIVE:  TaggerDirective
INTERFACE:  TagInfo
SERVICE:    TaggerService

DEPENDENCIES: 
    "font-awesome": "^4.7.0", 
    "@sedeh/wizard-storage": "^1.2.5"

Functionalities

Interfaces

interface TagInfo {
    tagDate: Date,
    taggedItem: any
}

Events

EventDetails
taggerChangedwill be triggered once an item is tagged. will send TagInfo of trigger ID, item ID, and the entry date if dateEnabled attribute is set. Otherwise will only send tagger ID as event.

Attributes

NameDetails
tagItTitle message to display when hovered on. default is 'tag it'.
taggedItTitle message to display when hovered on. default is 'tagged it'.
taggedClassUsing Font-awesome or any other library, display icon to un-tag item.
taggableClassUsing Font-awesome or any other library, display icon to tag item.
taggerSizeFont size of the tag icon that displays the tag/un-tag font.
stickyIf the tag icon should stick on targeted item or hid/unhide on mouse enter/exit.
positionPosition of tag icon on screen. choice of 'top:left', 'top:center', 'top:right', 'center:left', 'center:center', 'center:right', 'bottom:left', 'bottom:center', 'bottom:right'
dateEnabledWill instruct the tagger to keep a reference of tagged items along with tagged date.
taggerID of the list in which tagged items should be added into.
taggerTagThe information that should be stored in tag list. it can be a user ID, product id, SKU, image URL, video URL, or any other relevant information for the application. If JSON is supplied, it will be stored as string. Avoid using json as tag info to have a better performance on large data sets.

Service methods

Recommend to only use hasTaggedItem, indexOfTaggedItem, getTaggedItems, and setTaggedItems unless if you are bypassing the tagger directive.

NameDetails
tagItemWill add the given info in tag list in session storage.
1) id: ID of the tag items list
2) info: the information to be stored (i.e, product id, url, ...)
releaseTaggedItemWill remove the given info out of tag list in session storage.
1) id: ID of the tag items list
2) info: the information to be stored (i.e, product id, url, ...)
indexOfTaggedItemReturns index of item in the list.
1) id: ID of the tag items list
2) info: the information to be stored (i.e, product id, url, ...)
hasTaggedItemReturns true if item is in the list.
1) id: ID of the tag items list
2) info: the information to be stored (i.e, product id, url, ...)
getTaggedItemsReturns the list of items.
1) id: ID of the tag items list
setTaggedItemsSets the list of items in one shot. Good for initialization purpose. To reset the items, pass in an empty list.
1) id: ID of the tag items list
2) list: the tag items list

Sample usage

how to use it on any html node?

Use tagger directive on a node
<span 
    tagger="image-box" 
    taggableClass="fa fa-tag" 
    taggedClass="fa fa-minus-square" 
    position="bottom:right" 
    [sticky]="true" 
    [dateEnabled]="true" 
    [taggerTag]="myImageUrl"
    (taggerChanged)="itemTagUpdate($event)">
    <img [src]="myImageUrl" height="100px" />
</span>

how to use it in conjunction with into-pipes?

Use both into and tagger directive.
<span 
    rawContent="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" 
    into="video:auto:100px:alt text"
    intoName="video 1" intoId="video1" 

    tagger="video-box"
    taggerTag="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
    (taggerChanged)="itemTagUpdate($event)">
</span>

Once you receive the taggerChanged notification, use the TaggerService to retrieve the data for the tagger id sent to you as the event to save it in data base of your choice.

itemTagUpdate(event) {
    if (event.taggedItem) { // when tagger dateEnabled is set
        const list = this.taggerService.getTaggedItems(event.tagger);
        // save the list in database here..
    } else {
        const list = this.taggerService.getTaggedItems(event);
        // save the list in database here..
    }
}

Revision History

VersionDescription
2.0.0Updated to Angular 8.
1.0.3Removed un-necessary dependency to @angular/http
1.0.2Fixed an ADA issue.
1.0.1Added dateEnabled attribute to keep track of tag dates.
1.0.0Initial Release.

alt text

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free