Skip to content

Commit 30cb62e

Browse files
hojberghojberg
committed
to battlestations
0 parents  commit 30cb62e

File tree

11 files changed

+3569
-0
lines changed

11 files changed

+3569
-0
lines changed

‎css/app.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
3+
/* =BASE
4+
====================================================== */
5+
html, body { background: #ddd; }
6+
body { font-size: 16px; font-family: 'Helvetica Neue', Helvetica, Arial; padding: 0; margin: 0; }
7+
8+
/* =LAYOUT
9+
====================================================== */
10+
#header { background: #000; }
11+
12+
.canvas { background: url(../img/blueprintbg.png); padding: 60px;
13+
box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.2);
14+
}
15+
16+
.configuration { width: 800px; margin: auto; }
17+
18+
#footer { text-align: center; margin-top: 20px; font-size: 11px; color: #888; }

‎css/arrow.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.arrow_box { padding: 40px; width: 320px; border: 1px solid; margin: auto; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold;
2+
border-radius: 6px;
3+
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
4+
}
5+
6+
.arrow_box { color: #fff; background: #ff9600; border-color: #ffd163; position: relative;
7+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
8+
}
9+
10+
.arrow_box.top:after, .arrow_box.top:before {
11+
border: solid transparent;
12+
content: ' ';
13+
height: 0;
14+
bottom: 100%;
15+
position: absolute;
16+
width: 0;
17+
}
18+
19+
.arrow_box.top:after {
20+
border-width: 12px;
21+
border-bottom-color: #ff9600;
22+
left: 50%;
23+
margin-left: -12px;
24+
}
25+
26+
.arrow_box.top:before {
27+
border-width: 14px;
28+
border-bottom-color: #ffd163;
29+
left: 50%;
30+
margin-left: -14px;
31+
}
32+
33+

‎img/blueprintbg.png‎

107 KB
Loading

‎index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang='en'>
3+
<head>
4+
<meta charset='utf-8' />
5+
<title>cssarrowplease</title>
6+
<link rel="stylesheet" type="text/css" href="css/app.css" />
7+
<link rel="stylesheet" type="text/css" href="css/arrow.css" />
8+
</head>
9+
<body>
10+
11+
<header></header>
12+
13+
<div class='canvas'>
14+
15+
<div class='arrow_box top'>
16+
css arrow please!
17+
</div>
18+
19+
</div>
20+
21+
<div class='configuration'>
22+
23+
<form>
24+
<ol>
25+
<li>
26+
<label>arrow position</label>
27+
<select>
28+
<option selected='selected' value='top'>Top</option>
29+
<option value='right'>Right</option>
30+
<option value='bottom'>Bottom</option>
31+
<option value='left'>Left</option>
32+
</select>
33+
</li>
34+
<li>
35+
<label>arrow position</label>
36+
</li>
37+
</ol>
38+
</form>
39+
40+
<code class='result_code'>
41+
.arrow_box { position: relative; }
42+
</code>
43+
44+
</div>
45+
46+
<footer id='footer'>
47+
Build by <a href='http://icreateui.com'>Simon Højberg</a>
48+
&middot;
49+
Follow me on twitter: <a href='https://twitter.com/shojberg'>@shojberg</a>
50+
</footer>
51+
52+
</body>
53+
</html>

‎js/lib/app.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// create global InpaySupport if it doesn't exist
2+
if (!('InpaySupport' in window)) window.InpaySupport = {};
3+
4+
(function (I) {
5+
6+
// ----- Application ----- //
7+
8+
/**
9+
@class App
10+
@constructor
11+
@description
12+
Main application object.
13+
Acts as view dispatcher
14+
**/
15+
var App = function () {
16+
this.init.apply(this, arguments);
17+
};
18+
19+
App.prototype = {
20+
21+
init: function () {
22+
this.currentView = '';
23+
24+
this.dispatch();
25+
},
26+
27+
dispatch: function () {
28+
if ($('.search').length > 0) {
29+
this.currentView = 'SearchView';
30+
}
31+
32+
this.showView();
33+
},
34+
35+
showView: function () {
36+
var view = this.currentView;
37+
38+
if (view === 'SearchView') {
39+
new I.SearchView({
40+
container: $('.search')
41+
});
42+
}
43+
}
44+
45+
};
46+
47+
// Expose
48+
I.App = App;
49+
50+
}(window.InpaySupport));

‎js/spec/app_spec.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
describe("InpaySupport.App", function() {
2+
3+
describe("when there is a search input", function() {
4+
beforeEach(function() {
5+
$('body').append('<input type="text" class="search"/>');
6+
});
7+
8+
afterEach(function () {
9+
$('.search').remove();
10+
});
11+
12+
it("should dispatch to the search view", function() {
13+
app = new InpaySupport.App();
14+
expect(app.currentView).toEqual('SearchView');
15+
});
16+
17+
});
18+
19+
});

‎js/spec/search_view_spec.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
describe('InpaySupport.SearchView', function () {
2+
var searchView;
3+
4+
var stubbedMarkup = "<div class='search'>\
5+
<input type='text' class='order_reference' />\
6+
<a href='#search' class='button'>Search</a>\
7+
</div>";
8+
9+
beforeEach(function () {
10+
var $searchViewNode = $(stubbedMarkup);
11+
12+
$searchViewNode.appendTo($('body'));
13+
14+
$searchInput = $('input.order_reference');
15+
16+
searchView = new InpaySupport.SearchView({
17+
container: $searchViewNode
18+
});
19+
});
20+
21+
afterEach(function () {
22+
$('.search').remove();
23+
});
24+
25+
describe('with a blank search field', function () {
26+
beforeEach(function () {
27+
$searchInput.val('');
28+
});
29+
30+
it('shows an error message', function () {
31+
$('.button').trigger('click');
32+
33+
$error = $('.search .error_message');
34+
35+
expect($error.length).toBeGreaterThan(0);
36+
expect($error.text()).toEqual('Please enter your order reference');
37+
});
38+
});
39+
40+
describe('when a reference is entered in the search field', function () {
41+
beforeEach(function () {
42+
$searchInput.val('asd123');
43+
});
44+
45+
afterEach(function () {
46+
$searchInput.val('');
47+
});
48+
49+
it('redirects to the order page when searching', function () {
50+
spyOn(searchView, 'showOrder');
51+
52+
$('.button').trigger('click');
53+
54+
expect(searchView.showOrder).toHaveBeenCalled();
55+
});
56+
});
57+
58+
});

‎js/spec_runner.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>Inpay Support Specs</title>
6+
7+
<link rel="stylesheet" type="text/css" href="vendor/jasmine/jasmine.css">
8+
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
9+
<script type="text/javascript" src="vendor/jasmine/jasmine.js"></script>
10+
<script type="text/javascript" src="vendor/jasmine/jasmine-html.js"></script>
11+
12+
<!-- include spec files here... -->
13+
<script type="text/javascript" src="spec/search_view_spec.js"></script>
14+
<script type="text/javascript" src="spec/app_spec.js"></script>
15+
16+
<!-- include source files here... -->
17+
<script type="text/javascript" src="lib/search_view.js"></script>
18+
<script type="text/javascript" src="lib/app.js"></script>
19+
20+
<script type="text/javascript">
21+
(function() {
22+
var jasmineEnv = jasmine.getEnv();
23+
jasmineEnv.updateInterval = 1000;
24+
25+
var trivialReporter = new jasmine.TrivialReporter();
26+
27+
jasmineEnv.addReporter(trivialReporter);
28+
29+
jasmineEnv.specFilter = function(spec) {
30+
return trivialReporter.specFilter(spec);
31+
};
32+
33+
var currentWindowOnload = window.onload;
34+
35+
window.onload = function() {
36+
if (currentWindowOnload) {
37+
currentWindowOnload();
38+
}
39+
execJasmine();
40+
};
41+
42+
function execJasmine() {
43+
jasmineEnv.execute();
44+
}
45+
46+
})();
47+
</script>
48+
49+
</head>
50+
51+
<body>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)