diff --git a/public/css/app.css b/public/css/app.css
index 522a871..0a56fee 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -38,6 +38,7 @@ input { font-size: 14px; border: 1px solid #777; box-sha
/* configuration */
.configuration { margin-top: 20px; }
.configuration .section { float: left; width: 195px; font-size: 20px }
+.configuration .section.offset,
.configuration .section.positions { width: 140px; margin-left: 14px }
.configuration .section li { margin-bottom: 5px; }
.configuration .section label { display: inline-block; width: 112px; }
diff --git a/public/index.html b/public/index.html
index 6a947b9..8ffef81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
-
+
diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js
index 7488d0b..649ff11 100644
--- a/public/js/lib/models/arrow.js
+++ b/public/js/lib/models/arrow.js
@@ -7,7 +7,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
@class Arrow
@constructor
**/
- var Arrow = function () {
+ var Arrow = function () {
this.init.apply(this, arguments);
};
@@ -22,9 +22,9 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
/**
@method invertedPosition
- @description
+ @description
returns the opposite of the position
- so 'top' becomes 'bottom' and 'left' becomes 'right'
+ so 'top' becomes 'bottom' and 'left' becomes 'right'
@returns {String}
**/
invertedPosition: function () {
@@ -46,6 +46,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
var iPos = this.invertedPosition(),
color = this.get('color'),
borderWidth = this.get('borderWidth'),
+ offset = this.get('offset'),
borderColor = this.get('borderColor'),
hasBorder = borderWidth > 0,
css = '.arrow_box {\n';
@@ -57,7 +58,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
css += '}\n';
css += '.arrow_box:after';
-
+
if (hasBorder) css += ', .arrow_box:before {\n';
else css += ' {\n';
@@ -80,15 +81,18 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
@description generates arrow css
@param {String} color the color of the arrow
@param {Integer} size the size of the arrow
+ @param {Integer} offset from top or left in percentage (defaults to 50)
@param {String} layer :after or :before (defaults to :after)
@returns {String} css
@protected
**/
_arrowCSS: function (color, size, layer) {
var pos = this.get('position'),
+ offset = this.get('offset'),
iPos = this.invertedPosition(),
css = ".arrow_box:";
+ offset = offset || 50;
layer = layer || 'after';
css += layer + ' {\n';
@@ -97,10 +101,10 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
css += '\tborder-width: ' + size + 'px;\n';
if (pos === 'top' || pos === 'bottom') {
- css += '\tleft: 50%;\n\tmargin-left: -' + size + 'px;\n';
+ css += '\tleft: ' + offset + '%;\n\tmargin-left: -' + size + 'px;\n';
}
else {
- css += '\ttop: 50%;\n\tmargin-top: -' + size + 'px;\n';
+ css += '\ttop: ' + offset + '%;\n\tmargin-top: -' + size + 'px;\n';
}
css += '}';
@@ -131,7 +135,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
_arrowBorderCSS: function () {
var css = '',
borderWidth = this.get('borderWidth');
-
+
if (borderWidth > 0) {
css = this._arrowCSS(
this.get('borderColor'),
@@ -219,7 +223,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
var $self = this._$self;
$self.on(
- evType,
+ evType,
$.proxy(callback, context || this)
);
},
@@ -242,6 +246,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
position: 'top',
size: 30,
color: '#88b7d5',
+ offset: 50,
borderWidth: 4,
borderColor: '#c2e1f5'
};
diff --git a/public/js/lib/views/arrow_configuration_view.js b/public/js/lib/views/arrow_configuration_view.js
index f42ca73..2a02013 100644
--- a/public/js/lib/views/arrow_configuration_view.js
+++ b/public/js/lib/views/arrow_configuration_view.js
@@ -7,7 +7,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
@class ArrowConfigurationView
@constructor
**/
- var ArrowConfigurationView = function () {
+ var ArrowConfigurationView = function () {
this.init.apply(this, arguments);
};
@@ -38,6 +38,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
model = this.model;
container.find('.position').val([ model.get('position') ]);
+ container.find('.offset').val( model.get('offset') );
container.find('.size').val( model.get('size') );
container.find('.base_color').val( model.get('color') );
container.find('.border_width').val( model.get('borderWidth') );
@@ -54,6 +55,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
_updateInputProxy = $.proxy( this._updateInput, this),
container = this.container,
selectors = [ { classname: '.position', keyboard_interactive: false },
+ { classname: '.offset', keyboard_interactive: false },
{ classname: '.size', keyboard_interactive: true },
{ classname: '.base_color', keyboard_interactive: false },
{ classname: '.border_width', keyboard_interactive: true },