first commit

public/designer/js/aligning_guidelines.js

@@ -0,0 +1,88 @@
+/**
+ * Augments canvas by assigning to `onObjectMove` and `onAfterRender`.
+ * This kind of sucks because other code using those methods will stop functioning.
+ * Need to fix it by replacing callbacks with pub/sub kind of subscription model.
+ * (or maybe use existing fabric.util.fire/observe (if it won't be too slow))
+ */
+function initCenteringGuidelines(canvas) {
+
+    var canvasWidth = canvas.getWidth(),
+        canvasHeight = canvas.getHeight(),
+        canvasWidthCenter = canvasWidth / 2,
+        canvasHeightCenter = canvasHeight / 2,
+        canvasWidthCenterMap = { },
+        canvasHeightCenterMap = { },
+        centerLineMargin = 4,
+        centerLineColor = 'rgba(255,0,241,0.5)',
+        centerLineWidth = 1,
+        ctx = canvas.getSelectionContext(),
+        viewportTransform;
+  
+    for (var i = canvasWidthCenter - centerLineMargin, len = canvasWidthCenter + centerLineMargin; i <= len; i++) {
+      canvasWidthCenterMap[Math.round(i)] = true;
+    }
+    for (var i = canvasHeightCenter - centerLineMargin, len = canvasHeightCenter + centerLineMargin; i <= len; i++) {
+      canvasHeightCenterMap[Math.round(i)] = true;
+    }
+  
+    function showVerticalCenterLine() {
+      showCenterLine(canvasWidthCenter + 0.5, 0, canvasWidthCenter + 0.5, canvasHeight);
+    }
+  
+    function showHorizontalCenterLine() {
+      showCenterLine(0, canvasHeightCenter + 0.5, canvasWidth, canvasHeightCenter + 0.5);
+    }
+  
+    function showCenterLine(x1, y1, x2, y2) {
+      ctx.save();
+      ctx.strokeStyle = centerLineColor;
+      ctx.lineWidth = centerLineWidth;
+      ctx.beginPath();
+      ctx.moveTo(x1 * viewportTransform[0], y1 * viewportTransform[3]);
+      ctx.lineTo(x2 * viewportTransform[0], y2 * viewportTransform[3]);
+      ctx.stroke();
+      ctx.restore();
+    }
+  
+    var afterRenderActions = [],
+        isInVerticalCenter,
+        isInHorizontalCenter;
+  
+    canvas.on('mouse:down', function () {
+      viewportTransform = canvas.viewportTransform;
+    });
+  
+    canvas.on('object:moving', function(e) {
+      var object = e.target,
+          objectCenter = object.getCenterPoint(),
+          transform = canvas._currentTransform;
+  
+      if (!transform) return;
+  
+      isInVerticalCenter = Math.round(objectCenter.x) in canvasWidthCenterMap,
+      isInHorizontalCenter = Math.round(objectCenter.y) in canvasHeightCenterMap;
+  
+      if (isInHorizontalCenter || isInVerticalCenter) {
+        object.setPositionByOrigin(new fabric.Point((isInVerticalCenter ? canvasWidthCenter : objectCenter.x), (isInHorizontalCenter ? canvasHeightCenter : objectCenter.y)), 'center', 'center');
+      }
+    });
+  
+    canvas.on('before:render', function() {
+      canvas.clearContext(canvas.contextTop);
+    });
+  
+    canvas.on('after:render', function() {
+      if (isInVerticalCenter) {
+        showVerticalCenterLine();
+      }
+      if (isInHorizontalCenter) {
+        showHorizontalCenterLine();
+      }
+    });
+  
+    canvas.on('mouse:up', function() {
+      // clear these values, to stop drawing guidelines once mouse is up
+      isInVerticalCenter = isInHorizontalCenter = null;
+      canvas.renderAll();
+    });
+  }

public/designer/js/jquery.priceformat.js

@@ -0,0 +1,125 @@
+(function ($, undefined) {
+
+    var pluginName = 'priceformat',
+        defaults = {
+            defaultValue: 0,
+            decimalSeparator: '.',
+            thousandsSeparator: null,
+            allowSign: false,
+            displayPlusSign: false
+        },
+        dataAttrPrice = 'plugin_' + pluginName + '_price',
+        dataAttrSign = 'plugin_' + pluginName + '_sign';
+
+    function PriceFormat(element, options) {
+        this.$el = $(element);
+        this.options = $.extend({}, defaults, options);
+
+        var v = this.$el.val(),
+            ds = this.$el.data('decimal-separator'),
+            ts = this.$el.data('thousands-separator'),
+            sign = '+';
+
+        if (v.length === 0) v = this.options.defaultValue;
+
+        if (v.toString().length > 0) {
+            sign = v.toString().charAt(0);
+            if ((sign === '-') || (sign === '+')) {
+                v = v.toString().substr(1); //remove sign
+                if (!options.allowSign) sign = '+';
+            } else {
+                sign = '+';
+            }
+
+            if (!isNaN(v)) {
+                this.options.defaultValue = parseInt(v);
+            }
+        }
+
+        if (ds !== undefined) {
+            this.options.decimalSeparator = ds;
+        }
+
+        if (ts !== undefined) {
+            this.options.thousandsSeparator = ts;
+        }
+
+        this.init(sign);
+    }
+
+    PriceFormat.prototype.init = function (sign) {
+        var self = this;
+        this.$el
+            .data(dataAttrPrice, self.options.defaultValue)
+            .data(dataAttrSign, sign)
+            .attr('unselectable', 'on')
+            .css('user-select', 'none')
+            .on('selectstart', false)
+            .on('keydown', function (e) {
+                var $t = $(this),
+                    p = $t.data(dataAttrPrice),
+                    c = e.keyCode || e.which;
+
+                if ((c === 9) || (c === 13) || e.altKey || e.ctrlKey) { // tab, enter alt, or ctrl
+                    //let them live
+                } else {
+                    e.preventDefault();
+
+                    if ((c === 8) || (c === 46)) { //backspace / delete
+                        p = parseInt(p / 10);
+                    } else if ((c >= 48) && (c <= 57)) { // 0 - 9
+                        p = p * 10 + (c - 48);
+                    } else if ((c >= 96) && (c <= 105)) { //num pad 0 - 9
+                        p = p * 10 + (c - 96);
+                    } else {
+                        if (self.options.allowSign) {
+                            if ((c === 107) || (e.shiftKey && (c === 187))) { //plus sign
+                                $t.data(dataAttrSign, '+');
+                            } else if ((c === 189) || (c === 109)) { //minus sign
+                                $t.data(dataAttrSign, '-');
+                            }
+                        }
+                        return;
+                    }
+
+                    $t.data(dataAttrPrice, p);
+                }
+            })
+            .on('keyup', function (e) {
+                var $t = $(this),
+                    p = ($t.data(dataAttrPrice) / 100).toFixed(2),
+                    s = $t.data(dataAttrSign);
+
+                if (self.options.decimalSeparator !== '.') {
+                    p = p.replace('.', self.options.decimalSeparator);
+                }
+
+                if (self.options.thousandsSeparator !== null) {
+                    var parts = p.toString().split(self.options.decimalSeparator);
+                    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, self.options.thousandsSeparator);
+                    p = parts.join(self.options.decimalSeparator);
+                }
+
+                if (self.options.allowSign) {
+                    if (s === '-') p = '-' + p;
+                    else if (self.options.displayPlusSign) p = '+' + p;
+                }
+
+                $t.val(p);
+            })
+            .keyup();
+    };
+
+    $.fn[pluginName] = function (options) {
+        return this.each(function () {
+            if (!$.data(this, 'plugin_' + pluginName)) {
+                $.data(this, 'plugin_' + pluginName, new PriceFormat(this, options));
+            }
+        });
+    };
+
+    $(document).ready(function () {
+        $('input[data-format="price"]').priceformat();
+    });
+
+})(jQuery);

public/designer/js/jquery.priceformat.min.js

@@ -0,0 +1 @@
+!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"undefined"!=typeof exports?module.exports=n(require("jquery")):n(jQuery)}(function(n){"use strict";n.fn.priceFormat=function(t){var t=n.extend(!0,{},n.fn.priceFormat.defaults,t);window.ctrl_down=!1;var i=!1;return n(window).bind("keyup keydown",function(n){return window.ctrl_down=n.ctrlKey,!0}),n(this).bind("keyup keydown",function(n){return i=n.metaKey,!0}),this.each(function(){function r(n){h.is("input")?h.val(n):h.html(n),h.trigger("pricechange")}function e(){return m=h.is("input")?h.val():h.html()}function o(n){for(var t="",i=0;i<n.length;i++){var r=n.charAt(i);0==t.length&&0==r&&(r=!1),r&&r.match(v)&&(x?t.length<x&&(t+=r):t+=r)}return t}function u(n){for(;n.length<_+1;)n="0"+n;return n}function f(t,i){if(!i&&(""===t||t==f("0",!0))&&P)return"";var r=u(o(t)),e="",a=0;0==_&&(y="",c="");var c=r.substr(r.length-_,_),s=r.substr(0,r.length-_);if(r=C?s+y+c:"0"!==s?s+y+c:y+c,b||""!=n.trim(b)){for(var l=s.length;l>0;l--){var p=s.substr(l-1,1);a++,a%3==0&&(p=b+p),e=p+e}e.substr(0,1)==b&&(e=e.substring(1,e.length)),r=0==_?e:e+y+c}return!F||0==s&&0==c||(r=-1!=t.indexOf("-")&&t.indexOf("+")<t.indexOf("-")?"-"+r:O?"+"+r:""+r),g&&(r=g+r),w&&(r+=w),r}function a(n){var t=n.keyCode?n.keyCode:n.which,e=String.fromCharCode(t),o=!1,u=m,a=f(u+e);(t>=48&&t<=57||t>=96&&t<=105)&&(o=!0),192==t&&(o=!0),8==t&&(o=!0),9==t&&(o=!0),13==t&&(o=!0),46==t&&(o=!0),37==t&&(o=!0),39==t&&(o=!0),!F||189!=t&&109!=t&&173!=t||(o=!0),!O||187!=t&&107!=t&&61!=t||(o=!0),t>=16&&t<=20&&(o=!0),27==t&&(o=!0),t>=33&&t<=40&&(o=!0),t>=44&&t<=46&&(o=!0),(window.ctrl_down||i)&&(86==t&&(o=!0),67==t&&(o=!0),88==t&&(o=!0),82==t&&(o=!0),84==t&&(o=!0),76==t&&(o=!0),87==t&&(o=!0),81==t&&(o=!0),78==t&&(o=!0),65==t&&(o=!0)),o||(n.preventDefault(),n.stopPropagation(),u!=a&&r(a))}function c(){var n=e(),t=f(n);n!=t&&r(t),t==f("0",!0)&&"0"!=n&&P&&r("")}function s(){h.val(g+e())}function l(){h.val(e()+w)}function p(){if(""!=n.trim(g)&&S){r(e().split(g)[1])}}function d(){if(""!=n.trim(w)&&k){r(e().split(w)[0])}}var h=n(this),m="",v=/[0-9]/;m=h.is("input")?h.val():h.html();var g=t.prefix,w=t.suffix,y=t.centsSeparator,b=t.thousandsSeparator,x=t.limit,_=t.centsLimit,S=t.clearPrefix,k=t.clearSuffix,F=t.allowNegative,O=t.insertPlusSign,P=t.clearOnEmpty,C=t.leadingZero;O&&(F=!0),h.bind("keydown.price_format",a),h.bind("keyup.price_format",c),h.bind("focusout.price_format",c),S&&(h.bind("focusout.price_format",function(){p()}),h.bind("focusin.price_format",function(){s()})),k&&(h.bind("focusout.price_format",function(){d()}),h.bind("focusin.price_format",function(){l()})),e().length>0&&(c(),p(),d())})},n.fn.unpriceFormat=function(){return n(this).unbind(".price_format")},n.fn.unmask=function(){var t,i="";t=n(this).is("input")?n(this).val()||[]:n(this).html();for(var r=0;r<t.length;r++)isNaN(t[r])&&"-"!=t[r]||(i+=t[r]);return i},n.fn.priceToFloat=function(){var t;return t=n(this).is("input")?n(this).val()||[]:n(this).html(),parseFloat(t.replace(/[^0-9\-\.]/g,""))},n.fn.priceFormat.defaults={prefix:"US$ ",suffix:"",centsSeparator:".",thousandsSeparator:",",limit:!1,centsLimit:2,clearPrefix:!1,clearSufix:!1,allowNegative:!1,insertPlusSign:!1,clearOnEmpty:!1,leadingZero:!0}});