Skip to content

Commit daa6df0

Browse files
hojberghojberg
committed
Added a way to copy the code to clipboard
Use clippy to copy the code to clipboard. This does however add a small delay when the code changes and clippy is recreated. Sadly clippy does not provide a way to dynamically update the clipboard text.
1 parent 543e8ec commit daa6df0

File tree

11 files changed

+48
-21
lines changed

11 files changed

+48
-21
lines changed

‎public/clippy.swf‎

5.25 KB
Binary file not shown.

‎public/css/app.css‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ input { font-size: 14px; border: 1px solid #777; box-sha
3030
/* =MODULES
3131
====================================================== */
3232
/* preview */
33-
.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
33+
.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
3434

3535
/* logo */
36-
.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); }
36+
.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); }
3737

3838
/* configuration */
3939
.configuration { margin-top: 20px; }
@@ -43,11 +43,13 @@ input { font-size: 14px; border: 1px solid #777; box-sha
4343
.configuration .section label { display: inline-block; width: 112px; }
4444

4545
.configuration .size,
46-
.configuration .border_width { width: 28px; text-align: right; }
46+
.configuration .border_width { width: 28px; text-align: right; }
4747

48-
.configuration .color { width: 65px; text-align: center }
48+
.configuration .color { width: 65px; text-align: center }
4949

50-
.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); margin-left: 5px; }
50+
.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); margin-left: 5px; }
5151

52-
/* result_code */
53-
.result_code { position: relative; white-space: pre; padding: 10px; float: right; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
52+
/* css_result */
53+
.css_result { position: relative; float: right; width: 402px; }
54+
.css_result .code { white-space: pre; padding: 10px; display: block; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
55+
.css_result .copy_code { position: absolute; bottom: 5px; right: 10px; width: 14px; height: 22px; background: url(../img/clippy.png) no-repeat 0 4px; }

‎public/img/clippy.png‎

561 Bytes
Loading

‎public/index.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,11 @@ <h2>Arrow configuration</h2>
5252
</div>
5353
</form>
5454
</div>
55-
<code class='result_code' readonly='readonly'></code>
55+
56+
<div class='css_result'>
57+
<code class='code' readonly='readonly'></code>
58+
<div class='copy_code'></div>
59+
</div>
5660

5761
</div>
5862

@@ -67,7 +71,8 @@ <h2>Arrow configuration</h2>
6771
</footer>
6872

6973
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
70-
<script type="text/javascript" src="js/vendor/jscolor/jscolor.js"></script>
74+
<script src="js/vendor/jquery.clippy/jquery.clippy.min.js"></script>
75+
<script src="js/vendor/jscolor/jscolor.js"></script>
7176
<link rel="stylesheet" type="text/css" href="js/vendor/jscolor/jscolor.css">
7277

7378
<script src='js/lib/models/arrow.js'></script>

‎public/js/lib/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
3434
this.views = [
3535
new G.ArrowConfigurationView({ model: model, container: $('.configuration') }),
3636
new G.ArrowPreviewView({ model: model, container: $('<style type="text/css"></style>').appendTo('body') }),
37-
new G.ArrowCSSView({ model: model, container: $('.result_code') }),
37+
new G.ArrowCSSView({ model: model, container: $('.css_result') }),
3838
];
3939
},
4040

‎public/js/lib/views/arrow_css_view.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
1515

1616
init: function (options) {
1717
this.container = options.container;
18-
this.model = options.model;
18+
this._codeNode = this.container.find('.code');
19+
this._copyNode = this.container.find('.copy_code');
1920

21+
this.model = options.model;
2022
this.model.on('change', this._handleChange, this);
2123
},
2224

@@ -35,7 +37,12 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
3537
@chainable
3638
**/
3739
render: function () {
38-
this.container.text( this.model.toCSS() );
40+
var css = this.model.toCSS();
41+
42+
this._codeNode.text( css );
43+
this._copyNode.text( css )
44+
.clippy({ transparent: true });
45+
3946
return this;
4047
}
4148

‎public/js/lib/views/arrow_preview_view.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
3131

3232
/**
3333
@method render
34-
@description borrows the render function from ArrowCSSView
34+
@description renders the css to style the preview
3535
@chainable
3636
**/
3737
render: function () {
38-
G.ArrowCSSView.prototype.render.call(this);
38+
this.container.text( this.model.toCSS() );
3939
return this;
4040
}
4141

‎public/js/spec/views/arrow_css_view_spec.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,38 @@ describe("CSSArrowPlease.ArrowCSSView", function () {
33
var arrow, arrowCSSView, $container;
44

55
beforeEach(function () {
6-
$container = $('<div/>');
6+
$container = $('<div><div class="code"></div><div class="copy_code"></div></div>');
7+
$code = $container.find('.code');
8+
$copy = $container.find('.copy_code');
9+
710
arrow = new CSSArrowPlease.Arrow();
811

912
arrowCSSView = new CSSArrowPlease.ArrowCSSView({
1013
model: arrow,
1114
container: $container
1215
});
16+
17+
spyOn( $copy, 'clippy' );
18+
19+
arrowCSSView._codeNode = $code;
20+
arrowCSSView._copyNode = $copy;
1321
});
1422

1523
describe('render', function () {
24+
1625
it('returns itself for chainability', function () {
1726
expect( arrowCSSView.render() ).toBe( arrowCSSView );
1827
});
1928

2029
it('renders the css when render is called', function () {
21-
expect( $container.text() ).toBe( '' );
30+
expect( $code.text() ).toBe( '' );
31+
arrowCSSView.render();
32+
expect( $code.text() ).toBe( arrow.toCSS() );
33+
});
34+
35+
it('calls clippy() on the copy_code node', function () {
2236
arrowCSSView.render();
23-
expect( $container.text() ).toBe( arrow.toCSS() );
37+
expect( $copy.clippy ).toHaveBeenCalled();
2438
});
2539
});
2640

‎public/js/spec/views/arrow_preview_view_spec.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,8 @@ describe("CSSArrowPlease.ArrowPreviewView", function() {
1717
});
1818

1919
it('render delegates to ArrowCSSView.render', function () {
20-
spyOn(CSSArrowPlease.ArrowCSSView.prototype, 'render');
21-
2220
arrowPreviewView.render();
23-
24-
expect(CSSArrowPlease.ArrowCSSView.prototype.render).toHaveBeenCalled();
21+
expect( $container.text() ).toBe( arrow.toCSS() );
2522
});
2623
});
2724

‎public/js/spec_runner.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
99
<script type="text/javascript" src="vendor/jasmine/jasmine.js"></script>
1010
<script type="text/javascript" src="vendor/jasmine/jasmine-html.js"></script>
11+
<script type="text/javascript" src="vendor/jquery.clippy/jquery.clippy.min.js"></script>
1112

1213
<!-- include spec files here... -->
1314
<script type="text/javascript" src="spec/models/arrow_spec.js"></script>

0 commit comments

Comments
 (0)