Skip to content

Commit

Permalink
Product detail hashtag manager / view
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronjudd committed Apr 12, 2014
1 parent e0027b1 commit 444eac8
Show file tree
Hide file tree
Showing 13 changed files with 207 additions and 163 deletions.
10 changes: 5 additions & 5 deletions packages/reaction-commerce/client/helpers/helpers.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
@getProductsByTag = (tag) ->
selector = {}
if tag
tagIds = []
hashtags = []
relatedTags = [tag]
while relatedTags.length
newRelatedTags = []
for relatedTag in relatedTags
if tagIds.indexOf(relatedTag._id) == -1
tagIds.push(relatedTag._id)
if hashtags.indexOf(relatedTag._id) == -1
hashtags.push(relatedTag._id)
if relatedTag.relatedTagIds?.length
newRelatedTags = _.union(newRelatedTags, Tags.find({_id: {$in: relatedTag.relatedTagIds}}).fetch())
relatedTags = newRelatedTags
selector.tagIds = {$in: tagIds}
cursor = Products.find(selector)
selector.hashtags = {$in: hashtags}
cursor = Products.find(selector)
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,19 @@ Template.productDetail.helpers

tags: ->
product = (currentProduct.get "product")
if product?.tagIds
Tags.find({_id: {$in: product.tagIds}}).fetch()
tagCollection = []
if product?.hashtags
for tagId in product.hashtags
tagCollection.push Tags.findOne(tagId)
return tagCollection
else
[]

tagsComponent: ->
if Meteor.app.hasOwnerAccess()
return Template.productTagInputForm
else
return null
return Template.productDetailTags

actualPrice: () ->
(currentProduct.get "variant")?.price
Expand Down Expand Up @@ -119,65 +122,6 @@ Template.productDetail.events
Session.set "editing-"+this.field, false
$('.social-media-inputs > *').hide()

Template.productDetail.rendered = ->
if Meteor.app.hasOwnerAccess()
# *****************************************************
# Editable tag field
# *****************************************************
data = []
Tags.find().forEach (tag) ->
data.push(
id: tag.name
text: tag.name
)
$("#tags").editable
inputclass: "tags"
title: "Add tags to categorize"
emptytext: "add tags to categorize"
select2:
tags: data
tokenSeparators: [
","
" "
]

success: (response, names) ->
tagIds = []
for name in names
slug = _.slugify(name)
existingTag = Tags.findOne({slug: slug})
if existingTag
tagIds.push(existingTag._id)
else
_id = Tags.insert(
name: name
slug: slug
shopId: Meteor.app.shopId
isTopLevel: false
updatedAt: new Date()
createdAt: new Date()
)
tagIds.push(_id)
updateProduct(
tagIds: tagIds
)

# *****************************************************
# Function to update product
# param: property:value
# returns true or err
# *****************************************************
updateProduct = (productsProperties) ->
Products.update (currentProduct.get "product")._id,
$set: productsProperties
, (error) ->
if error
Alerts.add error.message
false
else
true


Template.productDetailEdit.events
"change input,textarea": (event,template) ->
Meteor.call "updateProductField", (currentProduct.get "product")._id, this.field, $(event.currentTarget).val(), (error,results) ->
Expand All @@ -198,60 +142,3 @@ Template.productDetailField.events

Template.productDetailEdit.rendered = () ->
$('textarea').autosize()

Template.productTagInputForm.events
'click #btn-tags-cancel, click body': (event,template) ->
currentTag = Session.get "currentTag"
Session.set "isEditing-"+currentTag, false

'click .tag-input-group-remove': (event,template) ->
currentTag = Session.get "currentTag"
Meteor.call "removeProductTag", @._id, currentTag

'click .tags-input-select': (event,template) ->
$(event.currentTarget).autocomplete(
delay: 0
autoFocus: true
source: (request, response) ->
datums = []
slug = _.slugify(request.term)
Tags.find({slug: new RegExp(slug, "i")}).forEach (tag) ->
datums.push(
label: tag.name
)
response(datums)
)
Deps.flush()

'change .tags-input-select': (event,template) ->
currentTag = Session.get "currentTag"
Meteor.call "updateProductTags", $(event.currentTarget).val(), @._id, currentTag
$('#tags-submit-new').val('')
$('#tags-submit-new').focus()
# Deps.flush()

'blur.autocomplete': (event,template) ->
if $(event.currentTarget).val()
currentTag = Session.get "currentTag"
Meteor.call "updateProductTags", $(event.currentTarget).val(), @._id, currentTag
Deps.flush()
$('#tags-submit-new').val('')
$('#tags-submit-new').focus()

'mousedown .tag-input-group-handle': (event,template) ->
Deps.flush()
$(".tag-edit-list").sortable("refresh")

Template.productTagInputForm.rendered = ->
# *****************************************************
# Inline field editing, handling
# http://vitalets.github.io/x-editable/docs.html
# *****************************************************
$(".tag-edit-list").sortable
items: "> li"
axis: "x"
handle: '.tag-input-group-handle'
update: (event, ui) ->
uiPositions = $(@).sortable("toArray", attribute:"data-tag-id")
for tag,index in uiPositions
Tags.update(tag, {$set: {position: index}})
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2 id="pageTitle">{{>fieldComponent field="pageTitle" value=pageTitle}}</h2>
<!-- BEGIN Left Side -->
<div class="col-sm-5 pdp-left-column">
{{> productImageGallery}}
{{> attributes}}
<!-- {{> attributes}} -->
</div>
<!-- END Left Side -->
<!-- BEGIN Right Side -->
Expand Down Expand Up @@ -133,29 +133,4 @@ <h2 id="pageTitle">{{>fieldComponent field="pageTitle" value=pageTitle}}</h2>
{{/if}}
</template>

<template name="productTagInputForm">
<ul class="list-inline tag-edit-list" id="tag-edit-list">
{{#each ./tags}}
<li data-tag-id="{{_id}}">
<div class="tag-input-group">
<span class="tag-input-group-handle">
<i class="fa fa-bars"></i>
</span>
<span class="tag-input">
<input type="text" class="tags-input-select" value="{{name}}" placeholder="Edit tags"/>
</span>
<span class="tag-input-group-remove">
<i class="fa fa-times-circle"></i>
</span>
</div>
</li>
{{/each}}
<li data-tag-id="{{_id}}">
<div class="tag-input-group">
<span class="tag-input">
<input type="text" class="tags-input-select" value="{{name}}" placeholder="Add tags" id="tags-submit-new" autofocus/>
</span>
</div>
</li>
</ul>
</template>

Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,6 @@
.vendor {
margin-top: -5px;
}
.tags {
ul,li {
position: relative;
input {min-width: 50px;}
float:none !important;

}
}

//== description and textarea
.description {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
Template.productDetailTags.helpers
currentHashTag: () ->
if currentProduct.get("product").handle is @.name
return true
Template.productTagInputForm.helpers
hashtagMark: () ->
if currentProduct.get("product").handle is @.name
return "fa-bookmark"
else
return "fa-bookmark-o"

Template.productTagInputForm.events
'click .tag-input-hashtag': (event,template) ->
Products.update(currentProduct.get("product")._id, {$set:{"handle":@.name}})
Router.go "product", "_id": @.name

'click .tag-input-group-remove': (event,template) ->
Meteor.call "removeProductTag",currentProduct.get("product")._id, @._id

'click .tags-input-select': (event,template) ->
$(event.currentTarget).autocomplete(
delay: 0
autoFocus: true
source: (request, response) ->
datums = []
slug = _.slugify(request.term)
Tags.find({slug: new RegExp(slug, "i")}).forEach (tag) ->
datums.push(
label: tag.name
)
response(datums)
)
Deps.flush()

'change .tags-input-select': (event,template) ->
currentTag = Session.get "currentTag"
Meteor.call "updateProductTags", currentProduct.get("product")._id, $(event.currentTarget).val(), @._id, currentTag
$('#tags-submit-new').val('')
$('#tags-submit-new').focus()
# Deps.flush()

'blur.autocomplete': (event,template) ->
if $(event.currentTarget).val()
currentTag = Session.get "currentTag"
Meteor.call "updateProductTags", currentProduct.get("product")._id, $(event.currentTarget).val(), @._id, currentTag
Deps.flush()
$('#tags-submit-new').val('')
$('#tags-submit-new').focus()

'mousedown .tag-input-group-handle': (event,template) ->
Deps.flush()
$(".tag-edit-list").sortable("refresh")

Template.productTagInputForm.rendered = ->
# *****************************************************
# Inline field editing, handling
# http://vitalets.github.io/x-editable/docs.html
# *****************************************************
$(".tag-edit-list").sortable
items: "> li"
handle: '.tag-input-group-handle'
update: (event, ui) ->
hashtagsList = []
uiPositions = $(@).sortable("toArray", attribute:"data-tag-id")
for tag,index in uiPositions
if tag then hashtagsList.push tag

Products.update(currentProduct.get("product")._id, {$set: {hashtags: hashtagsList}})
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template name="productTagInputForm">
<ul class="list-inline tag-edit-list" id="tag-edit-list">
{{#each ./tags}}
<li data-tag-id="{{_id}}">
<div class="tag-input-group">
<span class="tag-input-group-handle">
<i class="fa fa-bars"></i>
</span>
<span class="tag-input">
<input type="text" class="tags-input-select" value="{{name}}" placeholder="Edit tags"/>
</span>
<span class="tag-input-hashtag">
<i class="fa {{hashtagMark}}"></i>
</span>
<span class="tag-input-group-remove">
<i class="fa fa-times-circle"></i>
</span>
</div>
</li>
{{/each}}
<li data-tag-id="{{_id}}">
<div class="tag-input-group">
<span class="tag-input">
<input type="text" class="tags-input-select" value="{{name}}" placeholder="Add tags" id="tags-submit-new" autofocus/>
</span>
</div>
</li>
</ul>
</template>

<template name="productDetailTags">
<ul class="list-inline">
{{#each ./tags}}
{{#unless currentHashTag}}
<li class="list-group-item product-detail-tags-list">
<a href="{{pathForSEO "product/tag" "name"}}">{{name}}</a>
</li>
{{/unless}}
{{/each}}
</ul>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.pdp-container {
.product-detail-tags-list {
padding-top: 3px;
padding-bottom: 3px;
}
.tags {
ul,li {
position: relative;
input {
padding-left: 30px;
padding-right: 40px;
min-width: 175px;
}
float:none !important;

}
.tag-input-hashtag {
position: absolute;
right: 16px;
top: 5px;
color: @brand-success;
padding-right: 14px;
}
}
}
1 change: 1 addition & 0 deletions packages/reaction-commerce/client/themes/imports.less
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
@import "@{reaction-less-root}/client/templates/products/productDetail/social/social.import.less";
@import "@{reaction-less-root}/client/templates/products/productDetail/variants/variant.import.less";
@import "@{reaction-less-root}/client/templates/products/productDetail/variants/variantForm/variantForm.import.less";
@import "@{reaction-less-root}/client/templates/products/productDetail/tags/tags.import.less";
@import "@{reaction-less-root}/client/templates/products/productGrid/productGrid.import.less";
@import "@{reaction-less-root}/client/templates/products/productList/productList.import.less";
@import "@{reaction-less-root}/client/templates/products/products.import.less";
Expand Down
Loading

0 comments on commit 444eac8

Please sign in to comment.