Setting stuff up for backbone
Nick Sergeant
parent
2639718f42
commit
f788e54392
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
|
|
@ -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'));
|
||||
|
|
@ -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'));
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="snipts">
|
||||
<section class="snipts" id="snipts">
|
||||
{% autopaginate snipts 20 %}
|
||||
{% for snipt in snipts %}
|
||||
{% include "snipts/snipt-list.html" %}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="snipts">
|
||||
<section class="snipts" id="snipts">
|
||||
{% autopaginate snipts 20 %}
|
||||
{% for snipt in snipts %}
|
||||
{% include "snipts/snipt-list.html" %}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@
|
|||
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/d_backbone.js"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.infieldlabel.js"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.hotkeys.js"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/application.js"></script>{% block javascript %}{% endblock %}
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/application.js"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/site.js"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/snipt.js"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}css/less.js"></script>
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}cache/snipt.css" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue