From 9535a62d704cb449cdbafed8b3e0b9a04ae93e6a Mon Sep 17 00:00:00 2001
From: David Hong
Date: Thu, 10 May 2012 10:38:44 +1000
Subject: [PATCH 1/3] Adding "offset" value to adjust position of the arrow
head
---
public/index.html | 7 +++++-
public/js/lib/models/arrow.js | 22 +++++++++++--------
.../js/lib/views/arrow_configuration_view.js | 4 +++-
3 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6a947b9..be1c0e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
-
+
@@ -29,6 +29,11 @@
Arrow configuration
+
+ -
+
-
diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js
index 7488d0b..6dbc3e2 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 () {
@@ -57,7 +57,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 +80,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) {
+ _arrowCSS: function (color, size, offset, 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 +100,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 +134,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 +222,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
var $self = this._$self;
$self.on(
- evType,
+ evType,
$.proxy(callback, context || this)
);
},
@@ -242,6 +245,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 },
From 262fce8f6bc07616e331d78cf66cec9df7d1fc50 Mon Sep 17 00:00:00 2001
From: David Hong
Date: Thu, 10 May 2012 13:36:30 +1000
Subject: [PATCH 2/3] Offset element rearranged to suit styling
---
public/css/app.css | 1 +
public/index.html | 11 ++++++-----
2 files changed, 7 insertions(+), 5 deletions(-)
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 be1c0e4..8ffef81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,11 +29,6 @@
Arrow configuration
-
- -
-
-
@@ -54,6 +49,12 @@
Arrow configuration
+
+ -
+
+