Closes #1732

Author: jjeffryes

js/languages/en-US.json

@@ -189,7 +189,7 @@
   "Listing": "Listing",
   "Listings": "Listings",
   "ViewPage": "View page",
-  "ClearConvo": "Clear conversation",  
+  "ClearConvo": "Clear conversation",
   "Pages": "Pages",
   "Page": "Page",
   "Language": "Language",
@@ -526,7 +526,9 @@
     "smtpServerSuccess": "SMTP Connection Success",
     "noSMTPConnection": "The connection to the SMTP server failed.",
     "badSMTPAuthentication": "The username/password combination used failed.",
-    "goodSMTPAuthentication": "You have successfully connected to the SMTP server."
+    "goodSMTPAuthentication": "You have successfully connected to the SMTP server.",
+    "tagIsTooLongHeadline": "The tag is too long",
+    "tagIsTooLongBody": "Tags cannot be more than 40 characters long."
   },
   "pageConnectingMessages": {
     "listingConnect": "Connecting to listing ${listing}",
@@ -985,7 +987,7 @@
     "WESTERN_SAHARA": "Western Sahara",
     "YEMEN": "Yemen",
     "ZAMBIA": "Zambia",
-    "ZIMBABWE": "Zimbabwe"    
+    "ZIMBABWE": "Zimbabwe"
   },
   "chosenJS": {
     "noResultsText": "No results match",

js/templates/item.html

@@ -112,7 +112,7 @@ <h4><%= polyglot.t('Tags') %></h4>
             if(data.length < 100 && i < 11) {
           %>
             <a href="#home/products/<%= data.replace(/\s+/g, '')  %>">
-              <div class="btn-pill custCol-secondary floatLeft">
+              <div class="btn-pill custCol-secondary floatLeft taggle">
                 #<%= data.replace(/\s+/g, '') %>
               </div>
             </a>
@@ -178,7 +178,7 @@ <h4><%= polyglot.t('CanBeShippedTo') %></h4>
         <div class="padding20 marginBottom12 width100 alignCenter">
           <div class="spinnerWrapper">
             <i class="ion-android-sync spinner textSize24px"></i>
-          </div>         
+          </div>
         </div>
         <% } %>
         <div class="js-reviewsContainer <% (ob.fetchingRatings) && print ('hide') %>"></div>

js/views/itemEditVw.js

@@ -19,7 +19,7 @@ module.exports = baseVw.extend({
     'click #shippingFreeFalse': 'enableShippingPrice',
     'change .js-itemImageUpload': 'onImageFileChange',
     'dragover .js-photosModule': 'onPhotoDragOver',
-    'dragleave .js-photosModule': 'onPhotoDragLeave',    
+    'dragleave .js-photosModule': 'onPhotoDragLeave',
     'drop .js-photosModule': 'onPhotoDrop',
     'change #inputType': 'changeType',
     'click .js-editItemDeleteImage': 'deleteImage',
@@ -48,15 +48,15 @@ module.exports = baseVw.extend({
     countryList.forEach(function(country) {
       allRegions.push(country.dataName);
     });
-    
+
     var europeanUnion = [
       'AUSTRIA', 'BELGIUM', 'BULGARIA', 'CROATIA', 'CYPRUS', 'CZECH_REPUBLIC', 'DENMARK', 'ESTONIA',
       'FINLAND', 'FRANCE', 'GERMANY', 'GREECE', 'HUNGARY', 'IRELAND', 'ITALY', 'LATVIA', 'LITHUANIA', 'LUXEMBOURG',
-      'MALTA', 'NETHERLANDS', 'POLAND', 'PORTUGAL', 'ROMANIA', 'SLOVAKIA', 'SLOVENIA', 'SPAIN', 'SWEDEN', 'UNITED_KINGDOM' 
+      'MALTA', 'NETHERLANDS', 'POLAND', 'PORTUGAL', 'ROMANIA', 'SLOVAKIA', 'SLOVENIA', 'SPAIN', 'SWEDEN', 'UNITED_KINGDOM'
     ];
-    
+
     var europeanEconomicArea = europeanUnion.concat(['ICELAND', 'LIECHTENSTEIN', 'NORWAY']);
-    
+
     this.regions = {
       'ALL': allRegions,
       'EUROPEAN_UNION': europeanUnion,
@@ -67,15 +67,15 @@ module.exports = baseVw.extend({
     this.defaultDate = nowDate.getFullYear() + "-" + padTime(nowMonth) + "-" + padTime(nowDate.getDate()) + "T" + padTime(nowDate.getHours()) + ":" + padTime(nowDate.getMinutes());
     this.imgHashes = this.model.get('vendor_offer').listing.item.image_hashes;
     __.bindAll(this, 'validateDescription');
-   
+
     self.model.set('expTime', self.model.get('vendor_offer').listing.metadata.expiry.replace(" UTC", ""));
 
     this.listenTo(this.model, 'change:priceSet', this.render());
   },
 
   render: function(){
     var self = this;
-    
+
     loadTemplate('./js/templates/itemEdit.html', function(loadedTemplate) {
       var context = __.extend({}, self.model.toJSON(), {
         MAX_PHOTOS: self.MAX_PHOTOS,
@@ -120,7 +120,7 @@ module.exports = baseVw.extend({
         }).change(function(e){
           self.shipsToChange(e);
         });
-        
+
         self.$('.chosenRegions').chosen({
           width: '100%',
           disable_search: true,
@@ -209,6 +209,17 @@ module.exports = baseVw.extend({
         preserveCase: true,
         saveOnBlur: true,
         placeholder: window.polyglot.t('KeywordsPlaceholder'),
+        onBeforeTagAdd: (event, tag) => {
+          console.log(tag);
+          console.log(tag.length);
+          if(tag.length > 40) {
+            app.simpleMessageModal.open({
+              title: window.polyglot.t('errorMessages.tagIsTooLongHeadline'),
+              message: window.polyglot.t('errorMessages.tagIsTooLongBody')
+            });
+            return false;
+          }
+        },
         onTagAdd: () => {
           this.$('#inputKeyword').removeClass('invalid');
         },
@@ -340,7 +351,7 @@ module.exports = baseVw.extend({
   onPhotoDragLeave: function(e) {
     this.$photosModule.removeClass('dragOver');
     e.preventDefault();
-  },  
+  },
 
   onPhotoDrop: function(e) {
     this.$photosModule.removeClass('dragOver');
@@ -373,11 +384,11 @@ module.exports = baseVw.extend({
 
     if (this.imgHashes.length + imageFiles.length > this.MAX_PHOTOS) {
       imageFiles = imageFiles.slice(0, this.MAX_PHOTOS - this.imgHashes.length);
-      
+
       app.simpleMessageModal.open({
         title: window.polyglot.t('errorMessages.tooManyPhotosTitle'),
         message: window.polyglot.t('errorMessages.tooManyPhotosBody')
-      });     
+      });
     }
 
     if (!imageFiles.length) return;
@@ -434,15 +445,15 @@ module.exports = baseVw.extend({
           });
         } else if (loaded === imageCount) {
           self.uploadImage(imageList);
-        }        
+        }
       };
     });
   },
 
   uploadImage: function(imageList){
     var self = this,
         formData = new FormData();
-    
+
     __.each(imageList, function(dataURL){
       formData.append('image', dataURL);
     });
@@ -665,7 +676,7 @@ module.exports = baseVw.extend({
       message: window.polyglot.t('errorMessages.missingError') + '<br><i><br />' +
         invalidInputList.join('<br />') + '</i>'
     });
-    
+
     return $.Deferred().reject('failed form validation').promise();
   },
 
@@ -674,4 +685,4 @@ module.exports = baseVw.extend({
 
     return this.$('#contractForm')[0].checkValidity();
   }
-});
+});