diff --git a/public/clippy.swf b/public/clippy.swf new file mode 100755 index 0000000..e46886c Binary files /dev/null and b/public/clippy.swf differ diff --git a/public/css/app.css b/public/css/app.css index 522a871..16e95de 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -30,10 +30,10 @@ input { font-size: 14px; border: 1px solid #777; box-sha /* =MODULES ====================================================== */ /* preview */ -.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } +.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* logo */ -.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); } +.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); } /* configuration */ .configuration { margin-top: 20px; } @@ -43,11 +43,13 @@ input { font-size: 14px; border: 1px solid #777; box-sha .configuration .section label { display: inline-block; width: 112px; } .configuration .size, -.configuration .border_width { width: 28px; text-align: right; } +.configuration .border_width { width: 28px; text-align: right; } -.configuration .color { width: 65px; text-align: center } +.configuration .color { width: 65px; text-align: center } -.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; } +.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; } -/* result_code */ -.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); } +/* css_result */ +.css_result { position: relative; float: right; width: 402px; } +.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); } +.css_result .copy_code { position: absolute; bottom: 5px; right: 10px; width: 14px; height: 22px; background: url(../img/clippy.png) no-repeat 0 4px; } diff --git a/public/img/clippy.png b/public/img/clippy.png new file mode 100644 index 0000000..7a462e1 Binary files /dev/null and b/public/img/clippy.png differ diff --git a/public/index.html b/public/index.html index 6a947b9..07eeb16 100644 --- a/public/index.html +++ b/public/index.html @@ -52,7 +52,11 @@

Arrow configuration

- + +
+ +
+
@@ -67,7 +71,8 @@

Arrow configuration

- + + diff --git a/public/js/lib/app.js b/public/js/lib/app.js index 7af2769..2d590e9 100644 --- a/public/js/lib/app.js +++ b/public/js/lib/app.js @@ -34,7 +34,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; this.views = [ new G.ArrowConfigurationView({ model: model, container: $('.configuration') }), new G.ArrowPreviewView({ model: model, container: $('').appendTo('body') }), - new G.ArrowCSSView({ model: model, container: $('.result_code') }), + new G.ArrowCSSView({ model: model, container: $('.css_result') }), ]; }, diff --git a/public/js/lib/views/arrow_css_view.js b/public/js/lib/views/arrow_css_view.js index 2cf8f63..fdcb688 100644 --- a/public/js/lib/views/arrow_css_view.js +++ b/public/js/lib/views/arrow_css_view.js @@ -15,8 +15,10 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; init: function (options) { this.container = options.container; - this.model = options.model; + this._codeNode = this.container.find('.code'); + this._copyNode = this.container.find('.copy_code'); + this.model = options.model; this.model.on('change', this._handleChange, this); }, @@ -35,7 +37,12 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; @chainable **/ render: function () { - this.container.text( this.model.toCSS() ); + var css = this.model.toCSS(); + + this._codeNode.text( css ); + this._copyNode.text( css ) + .clippy({ transparent: true }); + return this; } diff --git a/public/js/lib/views/arrow_preview_view.js b/public/js/lib/views/arrow_preview_view.js index e42b267..6b31f55 100644 --- a/public/js/lib/views/arrow_preview_view.js +++ b/public/js/lib/views/arrow_preview_view.js @@ -31,11 +31,11 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; /** @method render - @description borrows the render function from ArrowCSSView + @description renders the css to style the preview @chainable **/ render: function () { - G.ArrowCSSView.prototype.render.call(this); + this.container.text( this.model.toCSS() ); return this; } diff --git a/public/js/spec/views/arrow_css_view_spec.js b/public/js/spec/views/arrow_css_view_spec.js index 8f591a4..74f6bcf 100644 --- a/public/js/spec/views/arrow_css_view_spec.js +++ b/public/js/spec/views/arrow_css_view_spec.js @@ -3,24 +3,38 @@ describe("CSSArrowPlease.ArrowCSSView", function () { var arrow, arrowCSSView, $container; beforeEach(function () { - $container = $('
'); + $container = $('
'); + $code = $container.find('.code'); + $copy = $container.find('.copy_code'); + arrow = new CSSArrowPlease.Arrow(); arrowCSSView = new CSSArrowPlease.ArrowCSSView({ model: arrow, container: $container }); + + spyOn( $copy, 'clippy' ); + + arrowCSSView._codeNode = $code; + arrowCSSView._copyNode = $copy; }); describe('render', function () { + it('returns itself for chainability', function () { expect( arrowCSSView.render() ).toBe( arrowCSSView ); }); it('renders the css when render is called', function () { - expect( $container.text() ).toBe( '' ); + expect( $code.text() ).toBe( '' ); + arrowCSSView.render(); + expect( $code.text() ).toBe( arrow.toCSS() ); + }); + + it('calls clippy() on the copy_code node', function () { arrowCSSView.render(); - expect( $container.text() ).toBe( arrow.toCSS() ); + expect( $copy.clippy ).toHaveBeenCalled(); }); }); diff --git a/public/js/spec/views/arrow_preview_view_spec.js b/public/js/spec/views/arrow_preview_view_spec.js index 6f08d02..0356c46 100644 --- a/public/js/spec/views/arrow_preview_view_spec.js +++ b/public/js/spec/views/arrow_preview_view_spec.js @@ -17,11 +17,8 @@ describe("CSSArrowPlease.ArrowPreviewView", function() { }); it('render delegates to ArrowCSSView.render', function () { - spyOn(CSSArrowPlease.ArrowCSSView.prototype, 'render'); - arrowPreviewView.render(); - - expect(CSSArrowPlease.ArrowCSSView.prototype.render).toHaveBeenCalled(); + expect( $container.text() ).toBe( arrow.toCSS() ); }); }); diff --git a/public/js/spec_runner.html b/public/js/spec_runner.html index c6eb8f2..98163a7 100644 --- a/public/js/spec_runner.html +++ b/public/js/spec_runner.html @@ -8,6 +8,7 @@ + diff --git a/public/js/vendor/jquery.clippy/jquery.clippy.min.js b/public/js/vendor/jquery.clippy/jquery.clippy.min.js new file mode 100755 index 0000000..ed73017 --- /dev/null +++ b/public/js/vendor/jquery.clippy/jquery.clippy.min.js @@ -0,0 +1 @@ +(function(a){a.fn.clippy=function(b){_opts={width:"14",height:"14",color:"#ffffff",clippy_path:"clippy.swf",keep_text:false,transparent:false};b=a.extend(_opts,b);params={movie:b.clippy_path,allowScriptAccess:"always",quality:"high",scale:"noscale"};if(b.transparent&&typeof b.transparent==="string"){params.wmode=b.transparent}else{if(b.transparent&&typeof b.transparent==="boolean"){params.wmode="transparent"}else{params.bgcolor=b.color}}embed_params=a.extend({},params,{width:b.width,height:b.height});embed_params.src=embed_params.movie;delete embed_params.movie;this.each(function(c,f){if(b.text&&b.text!=""){text=b.text}else{if(a(f).data("text")&&a(f).data("text")!=""){text=a(f).data("text")}else{text=a(f).text()}}text=encodeURIComponent(text);params.FlashVars="text="+text;embed_params.FlashVars="text="+text;dom=a("").attr({classid:"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000",width:b.width,height:b.height});embed=a("").attr(embed_params);try{dom.append(embed);a.each(params,function(e,g){dom.prepend(a("").attr({name:e,value:g}))})}catch(d){dom=embed}if(b.keep_text){a(f).html(dom).append(decodeURIComponent(text))}else{a(f).html(dom)}})}})(jQuery); \ No newline at end of file