gistfile1.txt

/*jshint camelcase: false */
define(['jquery', 'text!templates/spacingbox.html', 'underscore', 'backbone', 'moment', 'text!templates/spinbox.html', 'views/margin-view.js', 'views/padding-view.js', 'models/spacingbox-model', 'fusion-fuel'],
function ($, template, _, backbone, moment, spinboxTemplate, MarginView, PaddingView, SpacingBoxModel) {

	void(backbone); // REMOVE - helps prevent "object not used" jslint errors until the object is used in code
	void(moment); // REMOVE - helps prevent "object not used" jslint errors until the object is used in code
	
	/**
	@element Spacingbox
	@description The margin and padding styling control.
	*/

	/**
	@event enabled.fu.spacingbox
	@description The spacingbox control has been enabled

	@event disabled.fu.spacingbox
	@description The spacingbox control has been disabled

	@event destroyed.fu.spacingbox
	@description The spacingbox control has been destroyed
	*/
 
	// SPACINGBOX CONSTRUCTOR AND PROTOTYPE

	var Spacingbox = function (element, options) {

		this.$element = $(element);
		this.options = options;

		var data = {};

		data.getResource = $.fn.spacingbox.Globalization.getResource;

		this.model = new SpacingBoxModel({
			margin: {
				visible: this.options.enableMargin
			},
			padding: {
				visible: this.options.enablePadding
			}
		});

		var html = _.template(template, data);
		this.$element.html(html);

		this.render();

		this.setupModelListeners();
	};

	Spacingbox.prototype = {

		constructor: Spacingbox,

		render: function () {
			var self = this;

			self.$spacingBox = self.$element.find('#spacingbox');
			self.$marginContainer = self.$element.find('.spacingbox-ring.margin');
			self.$paddingContainer = self.$element.find('.spacingbox-ring.padding');
			self.$hole = self.$element.find('.spacingbox-hole');

			var margin = self.model.get('margin');
			var padding = self.model.get('padding');

			if (margin.visible) {
				new MarginView({
					el: self.$marginContainer[0],
					model: self.model
				});
				self.$marginContainer.css('display', 'flex');
			}

			if (padding.visible) {
				new PaddingView({
					el: self.$paddingContainer[0],
					model: self.model
				});
				self.$paddingContainer.css('display', 'flex');
			}

			if (margin.visible && padding.visible) {
				self.$spacingBox.addClass('dual');
			} else {
				self.$spacingBox.addClass('single');
			}
		},

		setupModelListeners: function () {
			var self = this;
			self.model.on('change:margin change:padding', function (model) {
				var padding = model.get('padding');
				var margin = model.get('margin');
				self.$spacingBox.removeClass('margin-active padding-active');
				if (margin.active) {
					self.$spacingBox.addClass('margin-active');
					self.attachDeactivationClick();
				} else if (padding.active) {
					self.$spacingBox.addClass('padding-active');
					self.attachDeactivationClick();
				}
				
			});
			self.model.on('change:styles', function (model, styles, options) {
				if (!options.suppressEvent) {
					self.$element.trigger('changed.spacingbox', styles);
				}
			});
			self.model.on('change:enabled', function (model, enabled) {
				if (enabled) {
					self.$spacingBox.removeClass('disabled');
				} else {
					self.$spacingBox.addClass('disabled');
				}
			});
		},

		attachDeactivationClick: function () {
			var self = this;
			var documentClickHandler = function (e) {
				if (!$(e.target).closest('#spacingbox').length) {
					self.model.setActive(null);
					document.removeEventListener('click', documentClickHandler);
				}
			};
			document.addEventListener('click', documentClickHandler);
		},

		getValue: function () {
			return this.model.get('styles');
		},

		setValue: function (styles) {
			this.model.importStyles(styles, { suppressEvent: true });
		},

		/**
		@method enable
		@description Set the spacingbox to an enabled ui state
		@fires enabled.fu.spacingbox
		@example
		$('#div').spacingbox('enable');
		*/
		enable: function () {
			this.model.set({ enabled: true });
		},

		/**
		@method disable
		@description Set the spacingbox to a disabled ui state
		@fires disabled.fu.spacingbox
		@example
		$('#div').spacingbox('disable');
		*/
		disable: function () {
			this.model.set({ enabled: false });
		}

	};

	return Spacingbox;
});