<%!
-
+ require_jquery = False
+ javascript = None
+ js_callback = ''
%><!DOCTYPE html>
<html>
<head>
<meta name="description" content="i3 is a dynamic tiling window manager with clean, readable and documented code, featuring extended Xinerama support, usage of libxcb instead of xlib and several improvements over wmii">
<meta name="keywords" content="i3, window, manager, tiling, keyboard, wmii, x11, xcb, xinerama, utf8">
<meta name="author" content="i3 developers">
+% if self.attr.javascript:
+ <script type="text/javascript">
+function loadjs() {
+% if not self.attr.require_jquery:
+ var element = document.createElement("script");
+ element.src = "/js/${self.attr.javascript}";
+ document.body.appendChild(element);
+% else:
+ var jquery_done = false,
+ script_done = false;
+ var head = document.getElementsByTagName('head')[0];
+
+ var element = document.createElement("script");
+ element.src = "/js/jquery.1.6.2.min.js";
+ element.onload = element.onreadystatechange = function() {
+ if (!jquery_done && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
+ jquery_done = true;
+ if (script_done) {
+ ${self.attr.js_callback}
+ }
+ element.onload = element.onreadystatechange = null;
+ }
+ };
+ document.body.appendChild(element);
+
+ var script = document.createElement("script");
+ script.src = "/js/${self.attr.javascript}";
+ script.onload = script.onreadystatechange = function() {
+ if (!script_done && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
+ script_done = true;
+ if (jquery_done) {
+ ${self.attr.js_callback}
+ }
+ script.onload = script.onreadystatechange = null;
+ }
+ };
+ document.body.appendChild(script);
+
+% endif
+}
+
+if (window.addEventListener)
+ window.addEventListener("load", loadjs, false);
+else if (window.attachEvent)
+ window.attachEvent("onload", loadjs);
+else window.onload = loadjs;
+ </script>
+%endif
</head>
<body>
<div id="main">
--- /dev/null
+// vim:ts=4:sw=4:expandtab
+// © 2011 Michael Stapelberg
+
+function initGallery() {
+ $(document).ready(function() {
+ $('.shot span').css('color', '#888');
+
+ $('.shot').mouseover(function() {
+ $(this).children('span').css('color', 'white');
+ });
+
+ $('.shot').mouseout(function() {
+ $(this).children('span').css('color', '#888');
+ });
+
+ // build an array of all images (full URLs)
+ var images = [];
+ var cnt = 0;
+ $('.shot a').each(function(idx, element) {
+ images[cnt++] = $(element).attr('href');
+ });
+
+ // handlers for mousewheel scrolling
+ // defined here because we need to enable it after the animation finished
+ $(window).mousewheel(function(event, delta) {
+ // if we are not in the slideshow mode, process the event as normal
+ return (!$('#mask').is(':visible'));
+ });
+
+ var wheelhandler = function(event, delta) {
+ //console.log('event = ' + event + ', delta = ' + delta);
+
+ // if we are not in the slideshow mode, process the event as normal
+ if (!$('#mask').is(':visible')) {
+ return true;
+ }
+
+ if (delta < 0) {
+ // scroll down
+ imgright();
+ return false;
+ } else if (delta > 0) {
+ // scroll up
+ imgleft();
+ return false;
+ }
+ };
+
+ $(window).mousewheel(wheelhandler);
+
+ var loadimage = function(url, direction, fromhash) {
+ // now load the image
+ var img = new Image();
+ img.src = url;
+
+ var loadcomplete = function() {
+ var winW = $(window).width();
+ var winH = $(window).height();
+ var max_w = winW - (2 * 64);
+ var max_h = winH - 64;
+ var dims = {
+ 'top': 0,
+ 'left': 0,
+ 'width': (img.width > max_w ? max_w : img.width),
+ 'height': img.height
+ };
+ dims.height = (dims.width / img.width) * img.height;
+ if (dims.height > max_h) {
+ dims.height = max_h;
+ dims.width = (dims.height / img.height) * img.width;
+ }
+ dims.top = (winH - dims.height) / 2;
+ dims.left = ((max_w - dims.width) / 2) + 64;
+ $('#loading').hide();
+ var element = $('<img>');
+ element.attr({ 'src': url, 'width':dims.width });
+ element.css({ 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
+ if (direction !== undefined) {
+ // slide from right to left
+ if (direction === 'left') {
+ element.css({ 'left':winW + 'px' });
+ element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
+ $(window).mousewheel(wheelhandler);
+ });
+ } else {
+ element.css({ 'left':'-' + winW + 'px' });
+ element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
+ $(window).mousewheel(wheelhandler);
+ });
+ }
+ }
+ $('#maskinner').append(element);
+ $('#maskinner').show();
+
+ $('#bigimg').show();
+
+ if (!fromhash && window.history.pushState) {
+ window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
+ }
+ };
+
+ if (img.complete) {
+ //console.log('image already in cache');
+ loadcomplete();
+ } else {
+ //console.log('loading image');
+ img.onload = loadcomplete;
+ }
+ };
+
+ // clicking anywhere outside the image will bring you back to the page
+ var masks = $('#mask, #bigimg');
+
+ var endshow = function(fromhash) {
+ masks.hide();
+ $('#maskinner img').remove();
+
+ if (!fromhash && window.history.pushState) {
+ window.history.pushState(undefined, 'i3 screenshots', '#');
+ }
+ };
+
+ masks.click(function() {
+ endshow(false);
+ });
+ var showmask = function() {
+ var winH = $(window).height();
+ var maskHeight = $(document).height();
+ var maskWidth = $(window).width();
+
+ var mask = $('#mask');
+ mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
+ };
+
+ $('.shot img').click(function() {
+ showmask();
+
+ var full = $(this).parent().attr('href');
+ var loading = $('#loading');
+ loading.show();
+
+ loadimage(full, undefined, false);
+
+ // TODO: also preload the next image?
+
+ // don't follow the link
+ return false;
+ });
+
+ var imgright = function() {
+ var idx = $.inArray($('#maskinner img').attr('src'), images);
+ var next = images[idx+1];
+
+ if (next === undefined) {
+ //console.log('there is no next image');
+ return false;
+ }
+
+ //console.log('loading next one: ' + next);
+ // slide out the current image
+ var winW = $(window).width();
+ $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
+ $(this).remove();
+ });
+ loadimage(next, 'left', false);
+
+ // disable mousewheel handler during load (will be re-enabled after the animation)
+ $(window).unmousewheel(wheelhandler);
+
+ return false;
+ };
+ $('#imgright').click(imgright);
+
+ var imgleft = function() {
+ var idx = $.inArray($('#maskinner img').attr('src'), images);
+ var prev = images[idx-1];
+
+ if (prev === undefined) {
+ //console.log('there is no next image');
+ return false;
+ }
+
+ //console.log('loading prev one: ' + prev);
+ // slide out the current image
+ var winW = $(window).width();
+ $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
+ $(this).remove();
+ });
+ loadimage(prev, 'right', false);
+
+ // disable mousewheel handler during load (will be re-enabled after the animation)
+ $(window).unmousewheel(wheelhandler);
+
+ return false;
+ };
+ $('#imgleft').click(imgleft);
+
+ // setup key press handlers for the left/right arrow keys
+ var keydown = function(e) {
+ switch (e.keyCode) {
+ // left arrow
+ case 37:
+ imgleft();
+ break;
+ // right arrow
+ case 39:
+ imgright();
+ break;
+ // escape
+ case 27:
+ endshow(false);
+ break;
+ }
+ };
+
+ if ($.browser.mozilla) {
+ $(document).keypress(keydown);
+ } else {
+ $(document).keydown(keydown);
+ }
+
+ if (location.hash.length > 0) {
+ var url = location.hash.substring(1);
+ showmask();
+ loadimage(url, undefined, true);
+ }
+
+ $(window).hashchange(function() {
+ if (location.hash.length === 0) {
+ endshow(true);
+ return;
+ }
+ var url = location.hash.substring(1);
+ if (url.length === 0) {
+ endshow(true);
+ } else {
+ showmask();
+ loadimage(url, undefined, true);
+ }
+ });
+
+ });
+}
--- /dev/null
+/*
+ * jQuery hashchange event - v1.3 - 7/21/2010
+ * http://benalman.com/projects/jquery-hashchange-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+function initGallery(){
+(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
+(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
+
+ $(document).ready(function(){$(".shot span").css("color","#888");$(".shot").mouseover(function(){$(this).children("span").css("color","white")});$(".shot").mouseout(function(){$(this).children("span").css("color","#888")});var h=[];var b=0;$(".shot a").each(function(l,m){h[b++]=$(m).attr("href")});$(window).mousewheel(function(l,m){return(!$("#mask").is(":visible"))});var i=function(l,m){if(!$("#mask").is(":visible")){return true}if(m<0){g();return false}else{if(m>0){f();return false}}};$(window).mousewheel(i);var d=function(o,p,l){var n=new Image();n.src=o;var m=function(){var s=$(window).width();var u=$(window).height();var t=s-(2*64);var q=u-64;var v={top:0,left:0,width:(n.width>t?t:n.width),height:n.height};v.height=(v.width/n.width)*n.height;if(v.height>q){v.height=q;v.width=(v.height/n.height)*n.width}v.top=(u-v.height)/2;v.left=((t-v.width)/2)+64;$("#loading").hide();var r=$("<img>");r.attr({src:o,width:v.width});r.css({position:"absolute",top:v.top+"px",left:v.left+"px"});if(p!==undefined){if(p==="left"){r.css({left:s+"px"});r.animate({left:"-="+(s-v.left)},"fast",function(){$(window).mousewheel(i)})}else{r.css({left:"-"+s+"px"});r.animate({left:"+="+(s+v.left)},"fast",function(){$(window).mousewheel(i)})}}$("#maskinner").append(r);$("#maskinner").show();$("#bigimg").show();if(!l&&window.history.pushState){window.history.pushState(undefined,"i3 screenshot: "+o,"#"+o)}};if(n.complete){m()}else{n.onload=m}};var k=$("#mask, #bigimg");var j=function(l){k.hide();$("#maskinner img").remove();if(!l&&window.history.pushState){window.history.pushState(undefined,"i3 screenshots","#")}};k.click(function(){j(false)});var e=function(){var n=$(window).height();var m=$(document).height();var o=$(window).width();var l=$("#mask");l.css({width:o,height:m}).show()};$(".shot img").click(function(){e();var l=$(this).parent().attr("href");var m=$("#loading");m.show();d(l,undefined,false);return false});var g=function(){var l=$.inArray($("#maskinner img").attr("src"),h);var n=h[l+1];if(n===undefined){return false}var m=$(window).width();$("#maskinner img").animate({left:"-="+(m-64)},"fast",function(){$(this).remove()});d(n,"left",false);$(window).unmousewheel(i);return false};$("#imgright").click(g);var f=function(){var l=$.inArray($("#maskinner img").attr("src"),h);var n=h[l-1];if(n===undefined){return false}var m=$(window).width();$("#maskinner img").animate({left:"+="+m},"fast",function(){$(this).remove()});d(n,"right",false);$(window).unmousewheel(i);return false};$("#imgleft").click(f);var c=function(l){switch(l.keyCode){case 37:f();break;case 39:g();break;case 27:j(false);break}};if($.browser.mozilla){$(document).keypress(c)}else{$(document).keydown(c)}if(location.hash.length>0){var a=location.hash.substring(1);e();d(a,undefined,true)}$(window).hashchange(function(){if(location.hash.length===0){j(true);return}var l=location.hash.substring(1);if(l.length===0){j(true)}else{e();d(l,undefined,true)}})})
+ };
<%!
section = "screens"
+ javascript = 'gallery.min.js'
+ require_jquery = True
+ js_callback = 'initGallery();'
%>
<%inherit file="_templates/i3.mako" />
</div>
</div>
-
-<script type="text/javascript" src="/js/jquery.1.6.2.min.js">
-</script>
-<script type="text/javascript" src="/js/jquery.mousewheel.min.js">
-</script>
-<script type="text/javascript" src="/js/jquery.ba-hashchange.min.js">
-</script>
-<script type="text/javascript">
-$(document).ready(function() {
- $('.shot span').css('color', '#888');
-
- $('.shot').mouseover(function() {
- $(this).children('span').css('color', 'white');
- });
-
- $('.shot').mouseout(function() {
- $(this).children('span').css('color', '#888');
- });
-
- // build an array of all images (full URLs)
- var images = [];
- var cnt = 0;
- $('.shot a').each(function(idx, element) {
- images[cnt++] = $(element).attr('href');
- });
-
- // handlers for mousewheel scrolling
- // defined here because we need to enable it after the animation finished
- $(window).mousewheel(function(event, delta) {
- // if we are not in the slideshow mode, process the event as normal
- return (!$('#mask').is(':visible'));
- });
-
- var wheelhandler = function(event, delta) {
- //console.log('event = ' + event + ', delta = ' + delta);
-
- // if we are not in the slideshow mode, process the event as normal
- if (!$('#mask').is(':visible')) {
- return true;
- }
-
- if (delta < 0) {
- // scroll down
- imgright();
- return false;
- } else if (delta > 0) {
- // scroll up
- imgleft();
- return false;
- }
- };
-
- $(window).mousewheel(wheelhandler);
-
- var loadimage = function(url, direction, fromhash) {
- // now load the image
- var img = new Image();
- img.src = url;
-
- var loadcomplete = function() {
- var winW = $(window).width();
- var winH = $(window).height();
- var max_w = winW - (2 * 64);
- var max_h = winH - 64;
- var dims = {
- 'top': 0,
- 'left': 0,
- 'width': (img.width > max_w ? max_w : img.width),
- 'height': img.height
- };
- dims.height = (dims.width / img.width) * img.height;
- if (dims.height > max_h) {
- dims.height = max_h;
- dims.width = (dims.height / img.height) * img.width;
- }
- dims.top = (winH - dims.height) / 2;
- dims.left = ((max_w - dims.width) / 2) + 64;
- $('#loading').hide();
- var element = $('<img>');
- element.attr({ 'src': url, 'width':dims.width });
- element.css({ 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
- if (direction !== undefined) {
- // slide from right to left
- if (direction === 'left') {
- element.css({ 'left':winW + 'px' });
- element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
- $(window).mousewheel(wheelhandler);
- });
- } else {
- element.css({ 'left':'-' + winW + 'px' });
- element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
- $(window).mousewheel(wheelhandler);
- });
- }
- }
- $('#maskinner').append(element);
- $('#maskinner').show();
-
- $('#bigimg').show();
-
- if (!fromhash && window.history.pushState) {
- window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
- }
- };
-
- if (img.complete) {
- //console.log('image already in cache');
- loadcomplete();
- } else {
- //console.log('loading image');
- img.onload = loadcomplete;
- }
- };
-
- // clicking anywhere outside the image will bring you back to the page
- var masks = $('#mask, #bigimg');
-
- var endshow = function(fromhash) {
- masks.hide();
- $('#maskinner img').remove();
-
- if (!fromhash && window.history.pushState) {
- window.history.pushState(undefined, 'i3 screenshots', '#');
- }
- };
-
- masks.click(function() {
- endshow(false);
- });
- var showmask = function() {
- var winH = $(window).height();
- var maskHeight = $(document).height();
- var maskWidth = $(window).width();
-
- var mask = $('#mask');
- mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
- };
-
- $('.shot img').click(function() {
- showmask();
-
- var full = $(this).parent().attr('href');
- var loading = $('#loading');
- loading.show();
-
- loadimage(full, undefined, false);
-
-// TODO: also preload the next image?
-
- // don't follow the link
- return false;
- });
-
- var imgright = function() {
- var idx = $.inArray($('#maskinner img').attr('src'), images);
- var next = images[idx+1];
-
- if (next === undefined) {
- //console.log('there is no next image');
- return false;
- }
-
- //console.log('loading next one: ' + next);
- // slide out the current image
- var winW = $(window).width();
- $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
- $(this).remove();
- });
- loadimage(next, 'left', false);
-
- // disable mousewheel handler during load (will be re-enabled after the animation)
- $(window).unmousewheel(wheelhandler);
-
- return false;
- };
- $('#imgright').click(imgright);
-
- var imgleft = function() {
- var idx = $.inArray($('#maskinner img').attr('src'), images);
- var prev = images[idx-1];
-
- if (prev === undefined) {
- //console.log('there is no next image');
- return false;
- }
-
- //console.log('loading prev one: ' + prev);
- // slide out the current image
- var winW = $(window).width();
- $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
- $(this).remove();
- });
- loadimage(prev, 'right', false);
-
- // disable mousewheel handler during load (will be re-enabled after the animation)
- $(window).unmousewheel(wheelhandler);
-
- return false;
- };
- $('#imgleft').click(imgleft);
-
- // setup key press handlers for the left/right arrow keys
- var keydown = function(e) {
- switch (e.keyCode) {
- // left arrow
- case 37:
- imgleft();
- break;
- // right arrow
- case 39:
- imgright();
- break;
- // escape
- case 27:
- endshow(false);
- break;
- }
- };
-
- if ($.browser.mozilla) {
- $(document).keypress(keydown);
- } else {
- $(document).keydown(keydown);
- }
-
- if (location.hash.length > 0) {
- var url = location.hash.substring(1);
- showmask();
- loadimage(url, undefined, true);
- }
-
- $(window).hashchange(function() {
- if (location.hash.length === 0) {
- endshow(true);
- return;
- }
- var url = location.hash.substring(1);
- if (url.length === 0) {
- endshow(true);
- } else {
- showmask();
- loadimage(url, undefined, true);
- }
- });
-
-});
-</script>
projects / i3 / i3.github.io / commitdiff