0.0.8

Add additional attributes to bottom of sticker. Add max-height for barcode (80px). Add two rows for top text.
shoom3301 · May 26, 2016 · ff05dd5 · ff05dd5
1 parent 0e75815
commit ff05dd5
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "barcodeEditor",
   "description": "Editor for print barcode",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": [
     "dist/barcode_editor.js",
     "dist/css/style.scss"

diff --git a/dist/barcode_editor.js b/dist/barcode_editor.js
@@ -222,6 +222,7 @@
             if(imgsrc){
                 params.src = options.src || imgsrc;
             }
+            params.attrs = options.attrs || [];
             var item = new BarcodeItem(params);
             item.render();
             item.setStyle(_.extend(this.getItemStyle(), options));
@@ -258,7 +259,14 @@
             '<div class="wrap">\
                 <div class="cell">\
                     <p></p>\
-                    <img>\
+                    <div class="img"><img src="<%= src %>"></div>\
+                    <% if(attrs && attrs.length){ %>\
+                    <div class="attrs">\
+                    <% _.each(attrs, function(attr){ %>\
+                    <div><label><%- attr.title %>: </label><span><%- attr.val %></span></div>\
+                    <% }) %>\
+                    </div>\
+                    <% } %>\
                 </div>\
             </div>',
         initialize: function(options){
@@ -268,9 +276,9 @@
          * Rendering barcode item
          */
         render: function(){
-            this.$el.html(_.template(this.template)());
+            this.$el.html(_.template(this.template)(this.options));
             var self = this;
-            this.$el.find('img').attr('src', (this.options.src || 'dist/barcode.png')).on('load', function(){
+            this.$el.find('img').on('load', function(){
                 self.trigger('imageLoaded');
             });
         },
@@ -280,6 +288,7 @@
          * @see BarcodeEditor.getItemStyle
          */
         setStyle: function(style){
+            var textRowsCount = 2;
             var width = mm(style.width);
             this.$el.css({
                 width: width,
@@ -288,7 +297,7 @@
             this.$el.find('p').css({
                 fontSize: style.fontSize,
                 fontFamily: 'Courier, monospace'
-            }).text(this.strMax(style.text, width/(style.charWidth||10)));
+            }).text(this.strMax(style.text, width*textRowsCount/(style.charWidth||10)));
             this.$el.find('img').css('width', mm(style.imageWidth));
         },
         strMax: function(str, len){

diff --git a/dist/css/style.css b/dist/css/style.css
diff --git a/dist/css/style.scss b/dist/css/style.scss
@@ -85,6 +85,25 @@ body, html{
               vertical-align: middle;
               p{
                 margin: 5px 0;
+                max-height: 28px;
+              }
+            }
+            .img{
+              img{
+                max-height: 80px;
+              }
+            }
+            .attrs{
+              padding: 0 8px;
+              div{
+                font-size: 12px;
+                font-family: Courier, monospace;
+                font-weight: bold;
+                display: inline-block;
+                margin-right: 10px;
+                &:last-child{
+                  margin-right: 0;
+                }
               }
             }
           }