From 571056a8c4bca822a5e58f5b9d3aca7277e657db Mon Sep 17 00:00:00 2001 From: Nick Sergeant Date: Sun, 15 Jan 2012 14:51:33 -0500 Subject: [PATCH] Getting keyboard navigation to work properly. --- .hgignore | 1 + snipt/media/css/style.less | 9 +++ snipt/media/js/plugins/jquery.zclip.js | 12 ---- snipt/media/js/src/modules/site.js | 12 ++-- snipt/media/js/src/modules/snipt.js | 82 +++++++++++++++++++++++-- snipt/media/swfs/zero-clipboard.swf | Bin 1071 -> 0 bytes snipt/templates/base.html | 1 - 7 files changed, 93 insertions(+), 24 deletions(-) delete mode 100755 snipt/media/js/plugins/jquery.zclip.js delete mode 100755 snipt/media/swfs/zero-clipboard.swf diff --git a/.hgignore b/.hgignore index 4872b47..67313ab 100644 --- a/.hgignore +++ b/.hgignore @@ -2,3 +2,4 @@ media/cache media/css/style.css media/js/script.js +tags diff --git a/snipt/media/css/style.less b/snipt/media/css/style.less index 1c44673..fd101bc 100644 --- a/snipt/media/css/style.less +++ b/snipt/media/css/style.less @@ -658,6 +658,15 @@ article.snipt { } } } + &.selected { + div.container { + -webkit-box-shadow: 0 0 20px #85D2DD; + + &:after { + display: none; + } + } + } } article.private-snipt { div.container { diff --git a/snipt/media/js/plugins/jquery.zclip.js b/snipt/media/js/plugins/jquery.zclip.js deleted file mode 100755 index 4f8120a..0000000 --- a/snipt/media/js/plugins/jquery.zclip.js +++ /dev/null @@ -1,12 +0,0 @@ -/* - * zClip :: jQuery ZeroClipboard v1.1.1 - * http://steamdev.com/zclip - * - * Copyright 2011, SteamDev - * Released under the MIT license. - * http://www.opensource.org/licenses/mit-license.php - * - * Date: Wed Jun 01, 2011 - */ - -(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"/media/swfs/zero-clipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+=''}else{c+=''}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b', this.$raw.text()); return false; + }, + select: function() { + + $('article.selected', SniptList.$el).removeClass('selected'); + this.$el.addClass('selected'); + + if (SniptList.$snipts.index(this.$el) === 0) { + $('html, body').animate({ + scrollTop: 0 + }, 0); + } else { + $('html, body').animate({ + scrollTop: this.$el.offset().top - 50 + }, 0); + } + + window.$selected = this.$el; + }, + detail: function() { + console.log('Going to detail view for ' + this.$el.find('h1').text()); + }, + next: function() { + nextSnipt = this.$el.next('article.snipt'); + if (nextSnipt.length) { + return nextSnipt.trigger('select'); + } + }, + prev: function() { + prevSnipt = this.$el.prev('article.snipt'); + if (prevSnipt.length) { + return prevSnipt.trigger('select'); + } } }); - SniptListView = Backbone.View.extend({ el: 'section#snipts', initialize: function(opts) { - opts.snipts.each(this.addSnipt); + + this.$snipts = opts.snipts; + this.$snipts.each(this.addSnipt); + this.$el = $(this.el); + + this.keyboardShortcuts(); }, addSnipt: function() { model = new SniptView({ el: this }); + }, + keyboardShortcuts: function() { + + $selected = window.selected; + $snipts = this.$snipts; + $el = this.$el; + + $(document).bind('keydown', 'j', function(e) { + if (!$selected) { + $snipts.eq(0).trigger('select'); + } else { + $selected.trigger('next'); + } + }); + $(document).bind('keydown', 'k', function(e) { + if (!$selected) { + $snipts.eq(0).trigger('select'); + } else { + $selected.trigger('prev'); + } + }); + $(document).bind('keydown', 'return', function(e) { + if (!$selected) { + return false; + } + $selected.trigger('detail'); + return false; + }); + $(document).bind('keydown', 'esc', function(e) { + if ($selected) { + $selected.removeClass('selected'); + $selected = false; + } + }); } }); - Snipt.Views = { 'SniptListView': SniptListView }; diff --git a/snipt/media/swfs/zero-clipboard.swf b/snipt/media/swfs/zero-clipboard.swf deleted file mode 100755 index 13bf8e396202964e0048333d878f4b949a2f5e6a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1071 zcmV+~1kn3KS5pay1^@tfoPAa6Qrkup-d$aeB-A-xFjKf1te)pFM-&Q&_dOT zp~-XxqP4X~YJ}vGWC;KAD1C=MKwiO_PG6^Vbs@z~r#qgr-}!Xr?4IxJ9P1kT4dpSa zmlT9hja*+}e;Cbih*6`(JT|+I(1(#NIVSiTL~Dq=|Lb=d5tOYL`L;_#dyQQ%FAAmI zcth~a_gzLk@xphk!Y?fFYp&C2`ZTZ#X}INt9hY9ojZWZ1Om23g$oC2%i(XLAs&#|V z5ArS7X}yhomj%SJGT~|rnZj|zM|I&j59e1QKqGxQN5!(ijWrx1S)ZN!RwWBwC`$uYc z!)028S7F4?l?H2dd39HKImh$+mv#S~I-YjmQ;P-rUfUM~-;Xr+ldpAXK+hS!b|@Ro zUs)@fv!kf9RjpFXZ?d(Pe_q{bY*sgP{Ykaib==7Da_N!X$Z^AwK5e&BZ5R56j>T=;_5DD$nR8}GiWShym;5A&x*eM;)Us-}<67Eb+@9n>sdlhm z`(coON!$a6H-ML=9U8}t-8aV1yD!xY9v@|7-FWq*lEUMka&b=Hq$X{>72}4eNl_P+ zccPJWGtXb!r#GbVPIO$}sN%oME%Yf<`b@|2f6G5y#$}-l zAR|D=L6`ti0Wt|N4P*v{Ss-&j?gE(yvY_TMkQE@SK-Pd%f#~WwXExMLZXW@84CD#m zFMxar!IU~i}ZGSTvX;GX_!`A@yKkIbSu*e=l_b9m*BF@hOB8SS;p?XkU4 z+#Y{FagI+_hF#pQ*y^c#B7H9*TQ=n-IvJZOQ*KYMV&e{u!2((~XOiIAy*Zr0yBr$x zqA6D~T{u}ZWn+;Cn@jC`refSD34E}PZ{YGaxq%P2g&VlCEyl30qM2Z<#-M2CQxMno zG_4J8H7mc8(VenQzJ;=@j=BiTh*RubMeS$61ORcM^S6!u6l;=?s|@ py1A~K8@jovn~!u;;=k8uI$3rc`gC{*rT-s&a~N%N=5J58nk1s|4c7nw diff --git a/snipt/templates/base.html b/snipt/templates/base.html index 35dd890..aa9a423 100644 --- a/snipt/templates/base.html +++ b/snipt/templates/base.html @@ -18,7 +18,6 @@ -