From f788e543921ba7e41fa6a153541b25bf937e84d0 Mon Sep 17 00:00:00 2001 From: Nick Sergeant Date: Sun, 6 Nov 2011 11:12:05 -0500 Subject: [PATCH] Setting stuff up for backbone --- snipt/media/js/plugins/jquery.infieldlabel.js | 2 +- snipt/media/js/src/application.js | 8 +-- snipt/media/js/src/modules/apply.js | 59 ------------------- snipt/media/js/src/modules/site.js | 45 ++++++++++++++ snipt/media/js/src/modules/snipt.js | 32 ++++++++++ .../snipts/templates/snipts/list-public.html | 2 +- snipt/snipts/templates/snipts/list-user.html | 2 +- snipt/templates/base.html | 4 +- 8 files changed, 85 insertions(+), 69 deletions(-) delete mode 100644 snipt/media/js/src/modules/apply.js create mode 100644 snipt/media/js/src/modules/site.js create mode 100644 snipt/media/js/src/modules/snipt.js diff --git a/snipt/media/js/plugins/jquery.infieldlabel.js b/snipt/media/js/plugins/jquery.infieldlabel.js index 6c1dee9..9b996a1 100644 --- a/snipt/media/js/plugins/jquery.infieldlabel.js +++ b/snipt/media/js/plugins/jquery.infieldlabel.js @@ -1,5 +1,5 @@ (function($){$.InFieldLabels=function(label,field,options){var base=this;base.$label=$(label);base.label=label;base.$field=$(field);base.field=field;base.$label.data("InFieldLabels",base);base.showing=true;base.init=function(){base.options=$.extend({},$.InFieldLabels.defaultOptions,options);if(base.$field.val()!==""){base.$label.hide();base.showing=false;} -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)){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;} diff --git a/snipt/media/js/src/application.js b/snipt/media/js/src/application.js index 36bf417..7739039 100644 --- a/snipt/media/js/src/application.js +++ b/snipt/media/js/src/application.js @@ -1,4 +1,3 @@ -// Memoizing technique from http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules var snipt = { module: function() { var modules = {}; @@ -13,12 +12,9 @@ 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(); }); diff --git a/snipt/media/js/src/modules/apply.js b/snipt/media/js/src/modules/apply.js deleted file mode 100644 index 5a0637b..0000000 --- a/snipt/media/js/src/modules/apply.js +++ /dev/null @@ -1,59 +0,0 @@ -(function(Apply) { - - 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; - - 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', - - 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); - }, - addField: function() { - model = new FieldView({ el: this }); - } - }); - - Apply.Views = { - 'AppView': AppView, - 'FieldView': FieldView - }; - -})(sidepros.module('apply')); diff --git a/snipt/media/js/src/modules/site.js b/snipt/media/js/src/modules/site.js new file mode 100644 index 0000000..0f7e4a5 --- /dev/null +++ b/snipt/media/js/src/modules/site.js @@ -0,0 +1,45 @@ +(function(Site) { + + var Snipt = snipt.module('snipt'); + + SiteView = Backbone.View.extend({ + el: 'body', + + initialize: function(opts) { + + $search_query = $('input#search-query', this.el); + $snipts = $('section#snipts', this.el); + + this.keyboardShortcuts(); + this.inFieldLabels(); + + if ($snipts.length) { + SniptListView = Snipt.Views.SniptListView; + Snipts = new SniptListView({ 'snipts': $snipts }); + } + + }, + 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(); + } + }); + + Site.Views = { + 'SiteView': SiteView + }; + +})(snipt.module('site')); diff --git a/snipt/media/js/src/modules/snipt.js b/snipt/media/js/src/modules/snipt.js new file mode 100644 index 0000000..f2c804c --- /dev/null +++ b/snipt/media/js/src/modules/snipt.js @@ -0,0 +1,32 @@ +(function(Snipt) { + + SniptListView = Backbone.View.extend({ + el: 'section#snipts', + + initialize: function(opts) { + + $snipts = opts.snipts; + + //$('input, select, textarea', this.el).each(this.addField); + + //$('section.code a.expand').click -> + //el = $(this).parent() + //el.toggleClass('expanded') + + //if el.hasClass('expanded') + //el.css('height', 'auto') + //$(this).text('Collapse') + //else + //el.css('height', '200px') + //$(this).text('Expand') + //false + //false + // + } + }); + + Snipt.Views = { + 'SniptListView': SniptListView + }; + +})(snipt.module('snipt')); diff --git a/snipt/snipts/templates/snipts/list-public.html b/snipt/snipts/templates/snipts/list-public.html index 8845e97..aad4ba2 100644 --- a/snipt/snipts/templates/snipts/list-public.html +++ b/snipt/snipts/templates/snipts/list-public.html @@ -7,7 +7,7 @@ {% endblock %} {% block content %} -
+
{% autopaginate snipts 20 %} {% for snipt in snipts %} {% include "snipts/snipt-list.html" %} diff --git a/snipt/snipts/templates/snipts/list-user.html b/snipt/snipts/templates/snipts/list-user.html index 925fbeb..bcfbbfc 100644 --- a/snipt/snipts/templates/snipts/list-user.html +++ b/snipt/snipts/templates/snipts/list-user.html @@ -7,7 +7,7 @@ {% endblock %} {% block content %} -
+
{% autopaginate snipts 20 %} {% for snipt in snipts %} {% include "snipts/snipt-list.html" %} diff --git a/snipt/templates/base.html b/snipt/templates/base.html index 92efef4..bcb1710 100644 --- a/snipt/templates/base.html +++ b/snipt/templates/base.html @@ -15,7 +15,9 @@ - {% block javascript %}{% endblock %} + + + {% else %}