Skip to content

Commit dfbc389

Browse files
author
Krypto
committed
Merge pull request #1 from hojberg/master
Updates
2 parents 10d9098 + e9d0b48 commit dfbc389

File tree

4 files changed

+39
-30
lines changed

4 files changed

+39
-30
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cssarrowplease",
3-
"version": "0.2.2-16",
3+
"version": "0.2.2-18",
44
"author": {
55
"name": "Simon Højberg",
66
"email": "r.hackr@gmail.com"
@@ -41,4 +41,4 @@
4141
"cssarrowplease.com",
4242
"www.cssarrowplease.com"
4343
]
44-
}
44+
}

‎public/css/app.css‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,7 @@ input[type='radio'] { border: 0; }
3232
/* =MODULES
3333
====================================================== */
3434
/* preview */
35-
.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px;
36-
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
37-
38-
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
39-
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
40-
}
35+
.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; }
4136

4237
/* logo */
4338
.logo { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

‎public/js/lib/models/arrow.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
6161
@protected
6262
**/
6363
_baseCSS: function () {
64-
var iPos = this.invertedPosition(),
64+
var pos = this.get('position'),
65+
iPos = this.invertedPosition(),
6566
color = this.get('color'),
6667
borderWidth = this.get('borderWidth'),
6768
borderColor = this.get('borderColor'),
@@ -81,14 +82,21 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
8182

8283
css += '\t' + iPos +': 100%;\n';
8384

85+
if (pos === 'top' || pos === 'bottom') {
86+
css += '\tleft: 50%;\n';
87+
}
88+
else {
89+
css += '\ttop: 50%;\n';
90+
}
91+
8492
css += '\tborder: solid transparent;\n';
8593
css += '\tcontent: " ";\n';
8694
css += '\theight: 0;\n';
8795
css += '\twidth: 0;\n';
8896
css += '\tposition: absolute;\n';
8997
css += '\tpointer-events: none;\n';
9098

91-
css += '}\n';
99+
if(hasBorder) css += '}\n';
92100

93101
return css;
94102
},
@@ -103,24 +111,25 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
103111
@protected
104112
**/
105113
_arrowCSS: function (color, size, layer) {
106-
var pos = this.get('position'),
107-
iPos = this.invertedPosition(),
108-
rgbColor = this.hexToRGB(color),
109-
css = ".arrow_box:";
114+
var pos = this.get('position'),
115+
iPos = this.invertedPosition(),
116+
rgbColor = this.hexToRGB(color),
117+
borderWidth = this.get('borderWidth'),
118+
css = "";
110119

111120
layer = layer || 'after';
112121

113-
css += layer + ' {\n';
122+
if(borderWidth > 0) css += '.arrow_box:' + layer + ' {\n';
114123

115124
css += '\tborder-color: rgba(' + rgbColor.join(', ') + ', 0);\n';
116125
css += '\tborder-' + iPos + '-color: ' + color + ';\n';
117126
css += '\tborder-width: ' + size + 'px;\n';
118127

119128
if (pos === 'top' || pos === 'bottom') {
120-
css += '\tleft: 50%;\n\tmargin-left: -' + size + 'px;\n';
129+
css += '\tmargin-left: -' + size + 'px;\n';
121130
}
122131
else {
123-
css += '\ttop: 50%;\n\tmargin-top: -' + size + 'px;\n';
132+
css += '\tmargin-top: -' + size + 'px;\n';
124133
}
125134

126135
css += '}';
@@ -176,7 +185,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
176185
this._arrowBorderCSS()
177186
];
178187

179-
return css.join('\n');
188+
return css.join(css[2] ? '\n':'');
180189
},
181190

182191
/**

‎public/js/spec/models/arrow_spec.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ describe("CSSArrowPlease.Arrow", function () {
134134
expected;
135135

136136
expected = '\tbottom: 100%;\n';
137+
expected = '\tleft: 50%;\n';
137138
expected += '\tborder: solid transparent;\n';
138139
expected += '\tcontent: " ";\n';
139140
expected += '\theight: 0;\n';
@@ -210,39 +211,43 @@ describe("CSSArrowPlease.Arrow", function () {
210211
beforeEach(function () { arrow.set('position', 'top'); });
211212

212213
it('is centered', function () {
213-
var css = arrow._arrowCSS('red', 20);
214-
expect( css ).toMatch( 'left: 50%' );
215-
expect( css ).toMatch( 'margin-left: -20px' );
214+
var arrowcss = arrow._arrowCSS('red', 20),
215+
basecss = arrow._baseCSS();
216+
expect( basecss ).toMatch( 'left: 50%' );
217+
expect( arrowcss ).toMatch( 'margin-left: -20px' );
216218
});
217219
});
218220

219221
describe('position bottom', function () {
220222
beforeEach(function () { arrow.set('position', 'bottom'); });
221223

222224
it('is centered', function () {
223-
var css = arrow._arrowCSS('red', 20);
224-
expect( css ).toMatch( 'left: 50%' );
225-
expect( css ).toMatch( 'margin-left: -20px' );
225+
var arrowcss = arrow._arrowCSS('red', 20),
226+
basecss = arrow._baseCSS();
227+
expect( basecss ).toMatch( 'left: 50%' );
228+
expect( arrowcss ).toMatch( 'margin-left: -20px' );
226229
});
227230
});
228231

229232
describe('position right', function () {
230233
beforeEach(function () { arrow.set('position', 'right'); });
231234

232235
it('is centered', function () {
233-
var css = arrow._arrowCSS('red', 20);
234-
expect( css ).toMatch( 'top: 50%' );
235-
expect( css ).toMatch( 'margin-top: -20px' );
236+
var arrowcss = arrow._arrowCSS('red', 20),
237+
basecss = arrow._baseCSS();
238+
expect( basecss ).toMatch( 'top: 50%' );
239+
expect( arrowcss ).toMatch( 'margin-top: -20px' );
236240
});
237241
});
238242

239243
describe('position left', function () {
240244
beforeEach(function () { arrow.set('position', 'left'); });
241245

242246
it('is centered', function () {
243-
var css = arrow._arrowCSS('red', 20);
244-
expect( css ).toMatch( 'top: 50%' );
245-
expect( css ).toMatch( 'margin-top: -20px' );
247+
var arrowcss = arrow._arrowCSS('red', 20),
248+
basecss = arrow._baseCSS();
249+
expect( basecss ).toMatch( 'top: 50%' );
250+
expect( arrowcss ).toMatch( 'margin-top: -20px' );
246251
});
247252
});
248253

0 commit comments

Comments
 (0)