diff --git a/snipt/media/cache/snipt.css b/snipt/media/cache/snipt.css index 0f39b67..d0ce35a 100644 --- a/snipt/media/cache/snipt.css +++ b/snipt/media/cache/snipt.css @@ -364,7 +364,7 @@ article.snipt div.container section.code { height: 200px; overflow: hidden; position: relative; - z-index: 49; + z-index: 51; } article.snipt div.container section.code div.highlight pre { font: normal 14px/18px 'InconsolataMedium', Consolas, Menlo, "Courier New", monospace; @@ -389,6 +389,9 @@ article.snipt div.container section.code a.expand { -moz-box-shadow: 0 -25px 25px #ffffff; box-shadow: 0 -25px 25px #ffffff; } +article.snipt div.container section.code a.expand span.collapse { + display: none; +} article.snipt div.container section.code a.expand:hover { color: #3BAAF3; font-weight: bold; @@ -433,15 +436,6 @@ article.snipt div.container section.tango a.expand { -moz-box-shadow: 0 -25px 25px #f8f8f8; box-shadow: 0 -25px 25px #f8f8f8; } -article.snipt div.container section.expanded div.highlight pre { - padding-bottom: 60px; -} -article.snipt div.container section.expanded a.expand { - background-image: url('https://snipt.s3.amazonaws.com/images/collapse.png'); - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} article.snipt div.container:after { bottom: 8px; content: ""; @@ -485,6 +479,24 @@ article.snipt footer ul.attrs li a:hover { article.snipt footer ul.attrs li.comments { background: transparent url('https://snipt.s3.amazonaws.com/images/comments-icon.png') 0 2px no-repeat; } +article.snipt.expanded div.container section.code { + height: auto; +} +article.snipt.expanded div.container section.code div.highlight pre { + padding-bottom: 60px; +} +article.snipt.expanded div.container section.code a.expand { + background-image: url('https://snipt.s3.amazonaws.com/images/collapse.png'); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +article.snipt.expanded div.container section.code a.expand span.expand { + display: none; +} +article.snipt.expanded div.container section.code a.expand span.collapse { + display: inline; +} .group:after { content: "."; display: block; diff --git a/snipt/media/cache/snipt.js b/snipt/media/cache/snipt.js index 1de36f9..7f03689 100644 --- a/snipt/media/cache/snipt.js +++ b/snipt/media/cache/snipt.js @@ -97,12 +97,11 @@ if(special){possible[modif+special]=true;}else{possible[modif+character]=true;po for(var i=0,l=keys.length;i0.0);};base.checkForEmpty=function(blur){if(base.$field.val()===""){base.prepForShow();base.setOpacity(blur?1.0:base.options.fadeOpacity);}else{base.setOpacity(0.0);}};base.prepForShow=function(e){if(!base.showing){base.$label.css({opacity:0.0}).show();base.$field.bind('keydown.infieldlabel',function(e){base.hideOnChange(e);});}};base.hideOnChange=function(e){if((e.keyCode===16)||(e.keyCode===9)){return;} +base.$field.focus(function(){base.fadeOnFocus();}).blur(function(){base.checkForEmpty(true);}).bind('keydown.infieldlabel',function(e){base.hideOnChange(e);}).bind('paste',function(e){base.setOpacity(0.0);}).change(function(e){base.checkForEmpty();}).bind('onPropertyChange',function(){base.checkForEmpty();});};base.fadeOnFocus=function(){if(base.showing){base.setOpacity(base.options.fadeOpacity);}};base.setOpacity=function(opacity){base.$label.stop().animate({opacity:opacity},base.options.fadeDuration);base.showing=(opacity>0.0);};base.checkForEmpty=function(blur){if(base.$field.val()===""){base.prepForShow();base.setOpacity(blur?1.0:base.options.fadeOpacity);}else{base.setOpacity(0.0);}};base.prepForShow=function(e){if(!base.showing){base.$label.css({opacity:0.0}).show();base.$field.bind('keydown.infieldlabel',function(e){base.hideOnChange(e);});}};base.hideOnChange=function(e){if((e.keyCode===16)||(e.keyCode===9)||(e.keyCode===27)){return;} if(base.showing){base.$label.hide();base.showing=false;} base.$field.unbind('keydown.infieldlabel');};base.init();};$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300};$.fn.inFieldLabels=function(options){return this.each(function(){var for_attr=$(this).attr('for'),$field;if(!for_attr){return;} $field=$("input#"+for_attr+"[type='text'],"+"input#"+for_attr+"[type='search'],"+"input#"+for_attr+"[type='tel'],"+"input#"+for_attr+"[type='url'],"+"input#"+for_attr+"[type='email'],"+"input#"+for_attr+"[type='password'],"+"textarea#"+for_attr);if($field.length===0){return;} (new $.InFieldLabels(this,$field[0],options));});};}(jQuery)); -// Memoizing technique from http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules var snipt = { module: function() { var modules = {}; @@ -117,71 +116,91 @@ var snipt = { }() }; -// Init application jQuery(function($) { - //if ($('body').hasClass('apply')) { - //AppView = sidepros.module('apply').Views.AppView; - //App = new AppView(); - //} + var SiteView = snipt.module('site').Views.SiteView; + var Site = new SiteView(); }); -(function(Apply) { +(function(Site) { - Apply.FieldModel = Backbone.Model.extend({ - group: null - }); - FieldView = Backbone.View.extend({ - initialize: function() { - this.model = new Apply.FieldModel({ - group: $(this.el).parents('div.group').attr('id') - }); - this.model.view = this; + var Snipt = snipt.module('snipt'); - this.$tooltip = $('div.tooltip', $('#' + this.model.get('group'))); - }, - events: { - 'focus': 'focused', - 'blur' : 'blurred', - 'keyup': 'updateTooltip' - }, - focused: function() { - App.$tooltips.hide(); - this.$tooltip.show(); - }, - blurred: function() { - App.$tooltips.hide(); - }, - updateTooltip: function() { - if (this.model.get('group') == 'name') { - short_name = $.trim(App.$first_name.val() + ' ' + App.$last_name.val().charAt(0)); - if (short_name !== '') { - short_name = ': ' + short_name; - } - App.$name_preview.text($.trim(short_name)); - } - } - }); - - AppView = Backbone.View.extend({ - el: '#app', + SiteView = Backbone.View.extend({ + el: 'body', initialize: function(opts) { - $('input, select, textarea', this.el).each(this.addField); - this.$first_name = $('input#id_first_name', this.el); - this.$last_name = $('input#id_last_name', this.el); - this.$name_preview = $('strong#name-preview', this.el); - this.$tooltips = $('div.tooltip', this.el); + $search_query = $('input#search-query', this.el); + $snipts = $('section#snipts article.snipt', this.el); + + this.keyboardShortcuts(); + this.inFieldLabels(); + + if ($snipts.length) { + SniptListView = Snipt.Views.SniptListView; + Snipts = new SniptListView({ 'snipts': $snipts }); + } + }, - addField: function() { - model = new FieldView({ el: this }); + keyboardShortcuts: function() { + + // Search + $(document).bind('keydown', '/', function(e) { + e.preventDefault(); + $search_query.focus(); + }); + + // Escape + $('input').bind('keydown', 'esc', function(e) { + e.preventDefault(); + this.blur(); + }); + }, + inFieldLabels: function () { + $('div.infield label', this.el).inFieldLabels(); } }); - Apply.Views = { - 'AppView': AppView, - 'FieldView': FieldView + Site.Views = { + 'SiteView': SiteView }; -})(sidepros.module('apply')); +})(snipt.module('site')); +(function(Snipt) { + + Snipt.SniptModel = Backbone.Model.extend({ + }); + + SniptView = Backbone.View.extend({ + initialize: function() { + this.model = new Snipt.SniptModel(); + this.model.view = this; + this.$el = $(this.el); + this.$expand_button = $('a.expand', this.$el); + }, + events: { + 'click a.expand': 'expand' + }, + expand: function() { + this.$el.toggleClass('expanded'); + return false; + } + }); + + SniptListView = Backbone.View.extend({ + el: 'section#snipts', + + initialize: function(opts) { + opts.snipts.each(this.addSnipt); + }, + addSnipt: function() { + model = new SniptView({ el: this }); + } + }); + + Snipt.Views = { + 'SniptListView': SniptListView + }; + +})(snipt.module('snipt')); diff --git a/snipt/media/css/style.css b/snipt/media/css/style.css index 12d3f06..d5e25b4 100644 --- a/snipt/media/css/style.css +++ b/snipt/media/css/style.css @@ -316,7 +316,7 @@ article.snipt div.container section.code { height: 200px; overflow: hidden; position: relative; - z-index: 49; + z-index: 51; } article.snipt div.container section.code div.highlight pre { font: normal 14px/18px 'InconsolataMedium', Consolas, Menlo, "Courier New", monospace; @@ -341,6 +341,9 @@ article.snipt div.container section.code a.expand { -moz-box-shadow: 0 -25px 25px #ffffff; box-shadow: 0 -25px 25px #ffffff; } +article.snipt div.container section.code a.expand span.collapse { + display: none; +} article.snipt div.container section.code a.expand:hover { color: #3BAAF3; font-weight: bold; @@ -385,15 +388,6 @@ article.snipt div.container section.tango a.expand { -moz-box-shadow: 0 -25px 25px #f8f8f8; box-shadow: 0 -25px 25px #f8f8f8; } -article.snipt div.container section.expanded div.highlight pre { - padding-bottom: 60px; -} -article.snipt div.container section.expanded a.expand { - background-image: url('https://snipt.s3.amazonaws.com/images/collapse.png'); - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} article.snipt div.container:after { bottom: 8px; content: ""; @@ -437,6 +431,24 @@ article.snipt footer ul.attrs li a:hover { article.snipt footer ul.attrs li.comments { background: transparent url('https://snipt.s3.amazonaws.com/images/comments-icon.png') 0 2px no-repeat; } +article.snipt.expanded div.container section.code { + height: auto; +} +article.snipt.expanded div.container section.code div.highlight pre { + padding-bottom: 60px; +} +article.snipt.expanded div.container section.code a.expand { + background-image: url('https://snipt.s3.amazonaws.com/images/collapse.png'); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +article.snipt.expanded div.container section.code a.expand span.expand { + display: none; +} +article.snipt.expanded div.container section.code a.expand span.collapse { + display: inline; +} .group:after { content: "."; display: block;