diff --git a/dist/jquery.gridster.css b/dist/jquery.gridster.css index 5edc7e0dbd..295b7b5191 100644 --- a/dist/jquery.gridster.css +++ b/dist/jquery.gridster.css @@ -1,4 +1,4 @@ -/*! gridster.js - v0.1.0 - 2013-02-28 +/*! gridster.js - v0.1.0 - 2013-04-02 * http://gridster.net/ * Copyright (c) 2013 ducksboard; Licensed MIT */ diff --git a/dist/jquery.gridster.js b/dist/jquery.gridster.js index b9de6356be..97f3685f53 100644 --- a/dist/jquery.gridster.js +++ b/dist/jquery.gridster.js @@ -1,4 +1,4 @@ -/*! gridster.js - v0.1.0 - 2013-02-28 +/*! gridster.js - v0.1.0 - 2013-04-02 * http://gridster.net/ * Copyright (c) 2013 ducksboard; Licensed MIT */ diff --git a/dist/jquery.gridster.min.css b/dist/jquery.gridster.min.css index d62c337762..8b8aae1b7f 100644 --- a/dist/jquery.gridster.min.css +++ b/dist/jquery.gridster.min.css @@ -1,3 +1,3 @@ -/*! gridster.js - v0.1.0 - 2013-02-28 +/*! gridster.js - v0.1.0 - 2013-04-02 * http://gridster.net/ * Copyright (c) 2013 ducksboard; Licensed MIT */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute}.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important} \ No newline at end of file diff --git a/dist/jquery.gridster.min.js b/dist/jquery.gridster.min.js index 0936d907ee..4d933dab17 100644 --- a/dist/jquery.gridster.min.js +++ b/dist/jquery.gridster.min.js @@ -1,4 +1,4 @@ -/*! gridster.js - v0.1.0 - 2013-02-28 +/*! gridster.js - v0.1.0 - 2013-04-02 * http://gridster.net/ * Copyright (c) 2013 ducksboard; Licensed MIT */ (function(e,t,n,r){function i(t){return t[0]&&e.isPlainObject(t[0])?this.data=t[0]:this.el=t,this.isCoords=!0,this.coords={},this.init(),this}var s=i.prototype;s.init=function(){this.set(),this.original_coords=this.get()},s.set=function(e,t){var n=this.el;n&&!e&&(this.data=n.offset(),this.data.width=n.width(),this.data.height=n.height());if(n&&e&&!t){var r=n.offset();this.data.top=r.top,this.data.left=r.left}var i=this.data;return this.coords.x1=i.left,this.coords.y1=i.top,this.coords.x2=i.left+i.width,this.coords.y2=i.top+i.height,this.coords.cx=i.left+i.width/2,this.coords.cy=i.top+i.height/2,this.coords.width=i.width,this.coords.height=i.height,this.coords.el=n||!1,this},s.update=function(t){if(!t&&!this.el)return this;if(t){var n=e.extend({},this.data,t);return this.data=n,this.set(!0,!0)}return this.set(!0),this},s.get=function(){return this.coords},e.fn.coords=function(){if(this.data("coords"))return this.data("coords");var e=new i(this,arguments[0]);return this.data("coords",e),e}})(jQuery,window,document),function(e,t,n,r){function s(t,n,r){this.options=e.extend(i,r),this.$element=t,this.last_colliders=[],this.last_colliders_coords=[],typeof n=="string"||n instanceof jQuery?this.$colliders=e(n,this.options.colliders_context).not(this.$element):this.colliders=e(n),this.init()}var i={colliders_context:n.body},o=s.prototype;o.init=function(){this.find_collisions()},o.overlaps=function(e,t){var n=!1,r=!1;if(t.x1>=e.x1&&t.x1<=e.x2||t.x2>=e.x1&&t.x2<=e.x2||e.x1>=t.x1&&e.x2<=t.x2)n=!0;if(t.y1>=e.y1&&t.y1<=e.y2||t.y2>=e.y1&&t.y2<=e.y2||e.y1>=t.y1&&e.y2<=t.y2)r=!0;return n&&r},o.detect_overlapping_region=function(e,t){var n="",r="";return e.y1>t.cy&&e.y1t.y1&&e.y2t.cx&&e.x1t.x1&&e.x2this.player_max_left?i=this.player_max_left:i=o&&(t=n+30,t0&&(s.scrollTop(t),this.scrollOffset=this.scrollOffset-30))},f.calculate_positions=function(e){this.window_height=s.height()},f.drag_handler=function(t){var n=t.target.nodeName;if(this.disabled||t.which!==1&&!o)return;if(this.ignore_drag(t))return;var r=this,i=!0;return this.$player=e(t.currentTarget),this.el_init_pos=this.get_actual_pos(this.$player),this.mouse_init_pos=this.get_mouse_pos(t),this.offsetY=this.mouse_init_pos.top-this.el_init_pos.top,this.$body.on(u.move,function(e){var t=r.get_mouse_pos(e),n=Math.abs(t.left-r.mouse_init_pos.left),s=Math.abs(t.top-r.mouse_init_pos.top);return n>r.options.distance||s>r.options.distance?i?(i=!1,r.on_dragstart.call(r,e),!1):(r.is_dragging===!0&&r.on_dragmove.call(r,e),!1):!1}),!1},f.on_dragstart=function(t){t.preventDefault(),this.drag_start=!0,this.is_dragging=!0;var r=this.$container.offset();return this.baseX=Math.round(r.left),this.baseY=Math.round(r.top),this.doc_height=e(n).height(),this.options.helper==="clone"?(this.$helper=this.$player.clone().appendTo(this.$container).addClass("helper"),this.helper=!0):this.helper=!1,this.scrollOffset=0,this.el_init_offset=this.$player.offset(),this.player_width=this.$player.width(),this.player_height=this.$player.height(),this.player_max_left=this.$container.width()-this.player_width+this.options.offset_left,this.options.start&&this.options.start.call(this.$player,t,{helper:this.helper?this.$helper:this.$player}),!1},f.on_dragmove=function(e){var t=this.get_offset(e);this.options.autoscroll&&this.manage_scroll(t),(this.helper?this.$helper:this.$player).css({position:"absolute",left:t.left,top:t.top});var n={position:{left:t.left,top:t.top}};return this.options.drag&&this.options.drag.call(this.$player,e,n),!1},f.on_dragstop=function(e){var t=this.get_offset(e);this.drag_start=!1;var n={position:{left:t.left,top:t.top}};return this.options.stop&&this.options.stop.call(this.$player,e,n),this.helper&&this.$helper.remove(),!1},f.on_select_start=function(e){if(this.disabled)return;if(this.ignore_drag(e))return;return!1},f.enable=function(){this.disabled=!1},f.disable=function(){this.disabled=!0},f.destroy=function(){this.disable(),e.removeData(this.$container,"drag")},f.ignore_drag=function(t){return this.options.handle?!e(t.target).is(this.options.handle):e.inArray(t.target.nodeName,this.options.ignore_dragging)>=0},e.fn.dragg=function(t){return this.each(function(){e.data(this,"drag")||e.data(this,"drag",new a(this,t))})}}(jQuery,window,document),function(e,t,n,r){function s(t,n){this.options=e.extend(!0,i,n),this.$el=e(t),this.$wrapper=this.$el.parent(),this.$widgets=this.$el.children(this.options.widget_selector).addClass("gs_w"),this.widgets=[],this.$changed=e([]),this.w_queue={},this.wrapper_width=this.$wrapper.width(),this.min_widget_width=this.options.widget_margins[0]*2+this.options.widget_base_dimensions[0],this.min_widget_height=this.options.widget_margins[1]*2+this.options.widget_base_dimensions[1],this.init()}var i={namespace:"",widget_selector:"li",static_class:"static",widget_margins:[10,10],widget_base_dimensions:[400,225],extra_rows:0,extra_cols:0,min_cols:1,max_cols:60,min_rows:15,max_rows:15,max_size_x:6,autogenerate_stylesheet:!0,avoid_overlapped_widgets:!0,shift_larger_widgets_down:!0,serialize_params:function(e,t){return{col:t.col,row:t.row,size_x:t.size_x,size_y:t.size_y}},collision:{},draggable:{distance:4,items:".gs_w:not(.static)"}};s.generated_stylesheets=[];var o=s.prototype;o.init=function(){this.generate_grid_and_stylesheet(),this.get_widgets_from_DOM(),this.set_dom_grid_height(),this.$wrapper.addClass("ready"),this.draggable(),e(t).bind("resize",throttle(e.proxy(this.recalculate_faux_grid,this),200))},o.disable=function(){return this.$wrapper.find(".player-revert").removeClass("player-revert"),this.drag_api.disable(),this},o.enable=function(){return this.drag_api.enable(),this},o.add_widget=function(t,n,r,i,s){var o;n||(n=1),r||(r=1),!i&!s?o=this.next_position(n,r):(o={col:i,row:s},this.empty_cells(i,s,n,r));var u=e(t).attr({"data-col":o.col,"data-row":o.row,"data-sizex":n,"data-sizey":r}).addClass("gs_w").appendTo(this.$el).hide();return this.$widgets=this.$widgets.add(u),this.$changed=this.$changed.add(u),this.register_widget(u),this.add_faux_rows(o.size_y),this.set_dom_grid_height(),u.fadeIn()},o.resize_widget=function(t,n,r){var i=t.coords().grid;n||(n=i.size_x),r||(r=i.size_y),n>this.cols&&(n=this.cols);var s=this.get_cells_occupied(i),o=i.size_x,u=i.size_y,a=i.col,f=a,l=n>o,c=r>u;if(a+n-1>this.cols){var h=a+(n-1)-this.cols,p=a-h;f=Math.max(1,p)}var d={col:f,row:i.row,size_x:n,size_y:r},v=this.get_cells_occupied(d),m=[];e.each(s.cols,function(t,n){e.inArray(n,v.cols)===-1&&m.push(n)});var g=[];e.each(v.cols,function(t,n){e.inArray(n,s.cols)===-1&&g.push(n)});var y=[];e.each(s.rows,function(t,n){e.inArray(n,v.rows)===-1&&y.push(n)});var b=[];e.each(v.rows,function(t,n){e.inArray(n,s.rows)===-1&&b.push(n)}),this.remove_from_gridmap(i);if(g.length){var w=[f,i.row,n,Math.min(u,r),t];this.empty_cells.apply(this,w)}if(b.length){var E=[f,i.row,n,r,t];this.empty_cells.apply(this,E)}i.col=f,i.size_x=n,i.size_y=r,this.add_to_gridmap(d,t),t.data("coords").update({width:n*this.options.widget_base_dimensions[0]+(n-1)*this.options.widget_margins[0]*2,height:r*this.options.widget_base_dimensions[1]+(r-1)*this.options.widget_margins[1]*2}),r>u&&this.add_faux_rows(r-u),n>o&&this.add_faux_cols(n-o),t.attr({"data-col":f,"data-sizex":n,"data-sizey":r});if(m.length){var S=[m[0],i.row,m.length,Math.min(u,r),t];this.remove_empty_cells.apply(this,S)}if(y.length){var x=[f,i.row,n,r,t];this.remove_empty_cells.apply(this,x)}return t},o.empty_cells=function(t,n,r,i,s){var o=this.widgets_below({col:t,row:n-i,size_x:r,size_y:i});return o.not(s).each(e.proxy(function(t,r){var s=e(r).coords().grid;if(!(s.row<=n+i-1))return;var o=n+i-s.row;this.move_widget_down(e(r),o)},this)),this.set_dom_grid_height(),this},o.remove_empty_cells=function(e,t,n,r,i){var s=this.widgets_below({col:e,row:t,size_x:n,size_y:r});return this.set_dom_grid_height(),this},o.next_position=function(e,t){e||(e=1),t||(t=1);var n=this.gridmap,r=n.length,i=[],s;for(var o=1;o",{"class":"preview-holder","data-row":this.$player.attr("data-row"),"data-col":this.$player.attr("data-col"),css:{width:i.width,height:i.height}}).appendTo(this.$el),this.options.draggable.start&&this.options.draggable.start.call(this,t,n)},o.on_drag=function(e,t){if(this.$player===null)return!1;var n={left:t.position.left+this.baseX,top:t.position.top+this.baseY};this.colliders_data=this.collision_api.get_closest_colliders(n),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.helper&&this.$player&&this.$player.css({left:t.position.left,top:t.position.top}),this.options.draggable.drag&&this.options.draggable.drag.call(this,e,t)},o.on_stop_drag=function(e,t){this.$helper.add(this.$player).add(this.$wrapper).removeClass("dragging"),t.position.left=t.position.left+this.baseX,t.position.top=t.position.top+this.baseY,this.colliders_data=this.collision_api.get_closest_colliders(t.position),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.$player.addClass("player-revert").removeClass("player").attr({"data-col":this.placeholder_grid_data.col,"data-row":this.placeholder_grid_data.row}).css({left:"",top:""}),this.$changed=this.$changed.add(this.$player),this.cells_occupied_by_player=this.get_cells_occupied(this.placeholder_grid_data),this.set_cells_player_occupies(this.placeholder_grid_data.col,this.placeholder_grid_data.row),this.$player.coords().grid.row=this.placeholder_grid_data.row,this.$player.coords().grid.col=this.placeholder_grid_data.col,this.options.draggable.stop&&this.options.draggable.stop.call(this,e,t),this.$preview_holder.remove(),this.$player=null,this.$helper=null,this.placeholder_grid_data={},this.player_grid_data={},this.cells_occupied_by_placeholder={},this.cells_occupied_by_player={},this.w_queue={},this.set_dom_grid_height()},o.on_overlapped_column_change=function(t,n){if(!this.colliders_data.length)return;var r=this.get_targeted_columns(this.colliders_data[0].el.data.col),i=this.last_cols.length,s=r.length,o;for(o=0;oparseInt(this.options.max_rows)&&(i=!0),u>parseInt(this.options.max_cols)&&(i=!0),this.is_player_in(u,a)&&(i=!0)}return i},o.can_placeholder_be_set=function(e,t,n,r){var i=!0;for(var s=0;sparseInt(this.options.max_rows)&&(i=!1),u>parseInt(this.options.max_cols)&&(i=!1),this.is_occupied(u,a)&&!this.is_widget_queued_and_can_move(l)&&(i=!1)}return i},o.queue_widget=function(e,t,n){var r=n,i=r.coords().grid,s=e+"_"+t;if(s in this.w_queue)return!1;this.w_queue[s]=r;for(var o=0;on.row?1:-1}),t},o.sort_by_row_and_col_asc=function(e){return e=e.sort(function(e,t){return e.row>t.row||e.row===t.row&&e.col>t.col?1:-1}),e},o.sort_by_col_asc=function(e){return e=e.sort(function(e,t){return e.col>t.col?1:-1}),e},o.sort_by_row_desc=function(e){return e=e.sort(function(e,t){return e.row+e.size_y=0&&e.inArray(n,r.rows)>=0},o.is_placeholder_in=function(t,n){var r=this.cells_occupied_by_placeholder||{};return this.is_placeholder_in_col(t)&&e.inArray(n,r.rows)>=0},o.is_placeholder_in_col=function(t){var n=this.cells_occupied_by_placeholder||[];return e.inArray(t,n.cols)>=0},o.is_empty=function(e,t){return typeof this.gridmap[e]!="undefined"&&typeof this.gridmap[e][t]!="undefined"&&this.gridmap[e][t]===!1?!0:!1},o.is_occupied=function(e,t){return this.gridmap[e]?this.gridmap[e][t]?!0:!1:!1},o.is_widget=function(e,t){var n=this.gridmap[e];return n?(n=n[t],n?n:!1):!1},o.is_static=function(e,t){var n=this.gridmap[e];return n?(n=n[t],n&&n.hasClass(this.options.static_class)?!0:!1):!1},o.is_widget_under_player=function(e,t){return this.is_widget(e,t)?this.is_player_in(e,t):!1},o.get_widgets_under_player=function(t){t||(t=this.cells_occupied_by_player||{cols:[],rows:[]});var n=e([]);return e.each(t.cols,e.proxy(function(r,i){e.each(t.rows,e.proxy(function(e,t){this.is_widget(i,t)&&(n=n.add(this.gridmap[i][t]))},this))},this)),n},o.set_placeholder=function(t,n){var r=e.extend({},this.placeholder_grid_data),i=this.widgets_below({col:r.col,row:r.row,size_y:r.size_y,size_x:r.size_x}),s=t+r.size_x-1;s>this.cols&&(t-=s-t);var o=this.placeholder_grid_data.row0){if(!(this.is_empty(e,u)||this.is_player(e,u)||this.is_widget(e,u)&&o[u].is(s)))break;r[e].push(u),i=u0){if(this.is_widget(s,u)&&!this.is_player_in(s,u)&&!o[u].is(e.el))break;!this.is_player(s,u)&&!this.is_placeholder_in(s,u)&&!this.is_player_in(s,u)&&r[s].push(u),u=t?e[r[0]]:!1},o.get_widgets_overlapped=function(){var t,n=e([]),r=[],i=this.cells_occupied_by_player.rows.slice(0);return i.reverse(),e.each(this.cells_occupied_by_player.cols,e.proxy(function(t,s){e.each(i,e.proxy(function(t,i){if(!this.gridmap[s])return!0;var o=this.gridmap[s][i];this.is_occupied(s,i)&&!this.is_player(o)&&e.inArray(o,r)===-1&&(n=n.add(o),r.push(o))},this))},this)),n},o.on_start_overlapping_column=function(e){this.set_player(e,!1)},o.on_start_overlapping_row=function(e){this.set_player(!1,e)},o.on_stop_overlapping_column=function(e){var t=this},o.on_stop_overlapping_row=function(e){var t=this,n=this.cells_occupied_by_player.cols},o.new_move_widget_to=function(e,t,n){var r=this,i=e.coords().grid;return this.remove_from_gridmap(i),i.row=n,i.col=t,this.add_to_gridmap(i),e.attr("data-row",n),e.attr("data-col",t),this.update_widget_position(i,e),this.$changed=this.$changed.add(e),this},o.move_widget_to=function(t,n){var r=this,i=t.coords().grid,s=n-i.row,o=this.widgets_below(t),u=this.can_move_to(i,i.col,n,t);return u===!1?!1:(this.remove_from_gridmap(i),i.row=n,this.add_to_gridmap(i),t.attr("data-row",n),this.$changed=this.$changed.add(t),o.each(function(t,n){var i=e(n),s=i.coords().grid,o=r.can_go_widget_up(s);o&&o!==s.row&&r.move_widget_to(i,o)}),this)},o.move_widget_up=function(t,n){var r=t.coords().grid,i=r.row,s=[],o=!0;n||(n=1);if(!this.can_go_up(t))return!1;this.for_each_column_occupied(r,function(r){if(e.inArray(t,s)===-1){var o=t.coords().grid,u=i-n;u=this.can_go_up_to_row(o,r,u);if(!u)return!0;var a=this.widgets_below(t);this.remove_from_gridmap(o),o.row=u,this.add_to_gridmap(o),t.attr("data-row",o.row),this.$changed=this.$changed.add(t),s.push(t)}})},o.move_widget_down=function(t,n){var r=t.coords().grid,i=r.row,s=[],o=n;if(!t)return!1;if(e.inArray(t,s)===-1){var u=t.coords().grid,a=i+n,f=this.widgets_below(t);this.remove_from_gridmap(u),f.each(e.proxy(function(t,n){var r=e(n),i=r.coords().grid,s=this.displacement_diff(i,u,o);s>0&&this.move_widget_down(r,s)},this)),u.row=a,this.update_widget_position(u,t),t.attr("data-row",u.row),this.$changed=this.$changed.add(t),s.push(t)}},o.can_go_up_to_row=function(t,n,r){var i=this.gridmap,s=!0,o=[],u=t.row,a;this.for_each_column_occupied(t,function(e){var t=i[e];o[e]=[],a=u;while(a--){if(!this.is_empty(e,a)||!!this.is_placeholder_in(e,a))break;o[e].push(a)}if(!o[e].length)return s=!1,!0});if(!s)return!1;a=r;for(a=1;a0?n:0},o.widgets_below=function(t){var n=e.isPlainObject(t)?t:t.coords().grid,r=this,i=this.gridmap,s=n.row+n.size_y-1,o=e([]);return this.for_each_column_occupied(n,function(t){r.for_each_widget_below(t,s,function(t,n){if(!r.is_player(this)&&e.inArray(this,o)===-1)return o=o.add(this),!0})}),this.sort_by_row_asc(o)},o.set_cells_player_occupies=function(e,t){return this.remove_from_gridmap(this.placeholder_grid_data),this.placeholder_grid_data.col=e,this.placeholder_grid_data.row=t,this.add_to_gridmap(this.placeholder_grid_data,this.$player),this},o.empty_cells_player_occupies=function(){return this.remove_from_gridmap(this.placeholder_grid_data),this},o.can_go_down=function(t){var n=!0,r=this;return t.hasClass(this.options.static_class)&&(n=!1),this.widgets_below(t).each(function(){e(this).hasClass(r.options.static_class)&&(n=!1)}),n},o.can_go_up=function(e){var t=e.coords().grid,n=t.row,r=n-1,i=this.gridmap,s=[],o=!0;return n===1?!1:(this.for_each_column_occupied(t,function(e){var t=this.is_widget(e,r);if(this.is_occupied(e,r)||this.is_player(e,r)||this.is_placeholder_in(e,r)||this.is_player_in(e,r))return o=!1,!0}),o)},o.can_move_to=function(e,t,n,r){var i=this.gridmap,s=e.el,o={size_y:e.size_y,size_x:e.size_x,col:t,row:n},u=!0,a=t+e.size_x-1;return a>this.cols?!1:r&&r0&&this.is_widget(r,h)&&e.inArray(o[r][h],c)===-1){u=s.call(o[r][h],r,h),c.push(o[r][h]);if(u)break}},"for_each/below":function(){for(h=i+1,a=o[r].length;h=1;i--)for(e=t[i].length-1;e>=1;e--)if(this.is_widget(i,e)){n.push(e),r[e]=i;break}var s=Math.max.apply(Math,n);return this.highest_occupied_cell={col:r[s],row:s},this.highest_occupied_cell},o.get_widgets_from=function(t,n){var r=this.gridmap,i=e();return t&&(i=i.add(this.$widgets.filter(function(){var n=e(this).attr("data-col");return n===t||n>t}))),n&&(i=i.add(this.$widgets.filter(function(){var t=e(this).attr("data-row");return t===n||t>n}))),i},o.set_dom_grid_height=function(){var e=this.get_highest_occupied_cell().row;return this.$el.css("height",e*this.min_widget_height),this},o.generate_stylesheet=function(t){var n="",r=this.options.max_size_x,i=0,o=0,u,a;t||(t={}),t.cols||(t.cols=this.cols),t.rows||(t.rows=this.rows),t.namespace||(t.namespace=this.options.namespace),t.widget_base_dimensions||(t.widget_base_dimensions=this.options.widget_base_dimensions),t.widget_margins||(t.widget_margins=this.options.widget_margins),t.min_widget_width=t.widget_margins[0]*2+t.widget_base_dimensions[0],t.min_widget_height=t.widget_margins[1]*2+t.widget_base_dimensions[1];var f=e.param(t);if(e.inArray(f,s.generated_stylesheets)>=0)return!1;s.generated_stylesheets.push(f);for(u=t.cols;u>=0;u--)n+=t.namespace+' [data-col="'+(u+1)+'"] { left:'+(u*t.widget_base_dimensions[0]+u*t.widget_margins[0]+(u+1)*t.widget_margins[0])+"px;} ";for(u=t.rows;u>=0;u--)n+=t.namespace+' [data-row="'+(u+1)+'"] { top:'+(u*t.widget_base_dimensions[1]+u*t.widget_margins[1]+(u+1)*t.widget_margins[1])+"px;} ";for(var l=1;l<=t.rows;l++)n+=t.namespace+' [data-sizey="'+l+'"] { height:'+(l*t.widget_base_dimensions[1]+(l-1)*t.widget_margins[1]*2)+"px;}";for(var c=1;c<=r;c++)n+=t.namespace+' [data-sizex="'+c+'"] { width:'+(c*t.widget_base_dimensions[0]+(c-1)*t.widget_margins[0]*2)+"px;}";return this.add_style_tag(n)},o.add_style_tag=function(e){var t=n,r=t.createElement("style");return t.getElementsByTagName("head")[0].appendChild(r),r.setAttribute("type","text/css"),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(n.createTextNode(e)),this},o.generate_faux_grid=function(e,t){this.faux_grid=[],this.gridmap=[];var n,r;for(n=t;n>0;n--){this.gridmap[n]=[];for(r=e;r>0;r--)this.add_faux_cell(r,n)}return this},o.add_faux_cell=function(t,n){var r=e({left:this.baseX+(n-1)*this.min_widget_width,top:this.baseY+(t-1)*this.min_widget_height,width:this.min_widget_width,height:this.min_widget_height,col:n,row:t,original_col:n,original_row:t}).coords();return e.isArray(this.gridmap[n])||(this.gridmap[n]=[]),this.gridmap[n][t]=!1,this.faux_grid.push(r),this},o.add_faux_rows=function(e){var t=this.rows,n=t+(e||1);for(var r=n;r>t;r--)for(var i=this.cols;i>=1;i--)this.add_faux_cell(r,i);return this.rows=n,this.options.autogenerate_stylesheet&&this.generate_stylesheet(),this},o.add_faux_cols=function(e){var t=this.cols,n=t+(e||1);for(var r=t;r=1;i--)this.add_faux_cell(i,r);return this.cols=n,this.options.autogenerate_stylesheet&&this.generate_stylesheet(),this},o.recalculate_faux_grid=function(){var n=this.$wrapper.width();return this.baseX=(e(t).width()-n)/2,this.baseY=this.$wrapper.offset().top,e.each(this.faux_grid,e.proxy(function(e,t){this.faux_grid[e]=t.update({left:this.baseX+(t.data.col-1)*this.min_widget_width,top:this.baseY+(t.data.row-1)*this.min_widget_height})},this)),this},o.get_widgets_from_DOM=function(){return this.$widgets.each(e.proxy(function(t,n){this.register_widget(e(n))},this)),this},o.generate_grid_and_stylesheet=function(){var n=this.$wrapper.width(),r=this.$wrapper.height(),i=Math.floor(n/this.min_widget_width)+this.options.extra_cols,s=this.$widgets.map(function(){return e(this).attr("data-col")});s=Array.prototype.slice.call(s,0),s.length||(s=[0]);var o=Math.max.apply(Math,s),u=this.options.extra_rows;return this.$widgets.each(function(t,n){u+=+e(n).attr("data-sizey")}),this.cols=Math.max(o,i,this.options.min_cols),this.rows=this.options.max_rows,this.baseX=(e(t).width()-n)/2,this.baseY=this.$wrapper.offset().top,this.options.autogenerate_stylesheet&&this.generate_stylesheet(),this.generate_faux_grid(this.rows,this.cols)},e.fn.gridster=function(t){return this.each(function(){e(this).data("gridster")||e(this).data("gridster",new s(this,t))})},e.Gridster=o}(jQuery,window,document); \ No newline at end of file diff --git a/dist/jquery.gridster.with-extras.js b/dist/jquery.gridster.with-extras.js index dd0d39a887..44e4889290 100644 --- a/dist/jquery.gridster.with-extras.js +++ b/dist/jquery.gridster.with-extras.js @@ -1,4 +1,4 @@ -/*! gridster.js - v0.1.0 - 2013-02-28 +/*! gridster.js - v0.1.0 - 2013-04-02 * http://gridster.net/ * Copyright (c) 2013 ducksboard; Licensed MIT */ diff --git a/dist/jquery.gridster.with-extras.min.js b/dist/jquery.gridster.with-extras.min.js index ae502c04fa..19bf503475 100644 --- a/dist/jquery.gridster.with-extras.min.js +++ b/dist/jquery.gridster.with-extras.min.js @@ -1,4 +1,4 @@ -/*! gridster.js - v0.1.0 - 2013-02-28 +/*! gridster.js - v0.1.0 - 2013-04-02 * http://gridster.net/ * Copyright (c) 2013 ducksboard; Licensed MIT */ (function(e,t,n,r){function i(t){return t[0]&&e.isPlainObject(t[0])?this.data=t[0]:this.el=t,this.isCoords=!0,this.coords={},this.init(),this}var s=i.prototype;s.init=function(){this.set(),this.original_coords=this.get()},s.set=function(e,t){var n=this.el;n&&!e&&(this.data=n.offset(),this.data.width=n.width(),this.data.height=n.height());if(n&&e&&!t){var r=n.offset();this.data.top=r.top,this.data.left=r.left}var i=this.data;return this.coords.x1=i.left,this.coords.y1=i.top,this.coords.x2=i.left+i.width,this.coords.y2=i.top+i.height,this.coords.cx=i.left+i.width/2,this.coords.cy=i.top+i.height/2,this.coords.width=i.width,this.coords.height=i.height,this.coords.el=n||!1,this},s.update=function(t){if(!t&&!this.el)return this;if(t){var n=e.extend({},this.data,t);return this.data=n,this.set(!0,!0)}return this.set(!0),this},s.get=function(){return this.coords},e.fn.coords=function(){if(this.data("coords"))return this.data("coords");var e=new i(this,arguments[0]);return this.data("coords",e),e}})(jQuery,window,document),function(e,t,n,r){function s(t,n,r){this.options=e.extend(i,r),this.$element=t,this.last_colliders=[],this.last_colliders_coords=[],typeof n=="string"||n instanceof jQuery?this.$colliders=e(n,this.options.colliders_context).not(this.$element):this.colliders=e(n),this.init()}var i={colliders_context:n.body},o=s.prototype;o.init=function(){this.find_collisions()},o.overlaps=function(e,t){var n=!1,r=!1;if(t.x1>=e.x1&&t.x1<=e.x2||t.x2>=e.x1&&t.x2<=e.x2||e.x1>=t.x1&&e.x2<=t.x2)n=!0;if(t.y1>=e.y1&&t.y1<=e.y2||t.y2>=e.y1&&t.y2<=e.y2||e.y1>=t.y1&&e.y2<=t.y2)r=!0;return n&&r},o.detect_overlapping_region=function(e,t){var n="",r="";return e.y1>t.cy&&e.y1t.y1&&e.y2t.cx&&e.x1t.x1&&e.x2this.player_max_left?i=this.player_max_left:i=o&&(t=n+30,t0&&(s.scrollTop(t),this.scrollOffset=this.scrollOffset-30))},f.calculate_positions=function(e){this.window_height=s.height()},f.drag_handler=function(t){var n=t.target.nodeName;if(this.disabled||t.which!==1&&!o)return;if(this.ignore_drag(t))return;var r=this,i=!0;return this.$player=e(t.currentTarget),this.el_init_pos=this.get_actual_pos(this.$player),this.mouse_init_pos=this.get_mouse_pos(t),this.offsetY=this.mouse_init_pos.top-this.el_init_pos.top,this.$body.on(u.move,function(e){var t=r.get_mouse_pos(e),n=Math.abs(t.left-r.mouse_init_pos.left),s=Math.abs(t.top-r.mouse_init_pos.top);return n>r.options.distance||s>r.options.distance?i?(i=!1,r.on_dragstart.call(r,e),!1):(r.is_dragging===!0&&r.on_dragmove.call(r,e),!1):!1}),!1},f.on_dragstart=function(t){t.preventDefault(),this.drag_start=!0,this.is_dragging=!0;var r=this.$container.offset();return this.baseX=Math.round(r.left),this.baseY=Math.round(r.top),this.doc_height=e(n).height(),this.options.helper==="clone"?(this.$helper=this.$player.clone().appendTo(this.$container).addClass("helper"),this.helper=!0):this.helper=!1,this.scrollOffset=0,this.el_init_offset=this.$player.offset(),this.player_width=this.$player.width(),this.player_height=this.$player.height(),this.player_max_left=this.$container.width()-this.player_width+this.options.offset_left,this.options.start&&this.options.start.call(this.$player,t,{helper:this.helper?this.$helper:this.$player}),!1},f.on_dragmove=function(e){var t=this.get_offset(e);this.options.autoscroll&&this.manage_scroll(t),(this.helper?this.$helper:this.$player).css({position:"absolute",left:t.left,top:t.top});var n={position:{left:t.left,top:t.top}};return this.options.drag&&this.options.drag.call(this.$player,e,n),!1},f.on_dragstop=function(e){var t=this.get_offset(e);this.drag_start=!1;var n={position:{left:t.left,top:t.top}};return this.options.stop&&this.options.stop.call(this.$player,e,n),this.helper&&this.$helper.remove(),!1},f.on_select_start=function(e){if(this.disabled)return;if(this.ignore_drag(e))return;return!1},f.enable=function(){this.disabled=!1},f.disable=function(){this.disabled=!0},f.destroy=function(){this.disable(),e.removeData(this.$container,"drag")},f.ignore_drag=function(t){return this.options.handle?!e(t.target).is(this.options.handle):e.inArray(t.target.nodeName,this.options.ignore_dragging)>=0},e.fn.dragg=function(t){return this.each(function(){e.data(this,"drag")||e.data(this,"drag",new a(this,t))})}}(jQuery,window,document),function(e,t,n,r){function s(t,n){this.options=e.extend(!0,i,n),this.$el=e(t),this.$wrapper=this.$el.parent(),this.$widgets=this.$el.children(this.options.widget_selector).addClass("gs_w"),this.widgets=[],this.$changed=e([]),this.w_queue={},this.wrapper_width=this.$wrapper.width(),this.min_widget_width=this.options.widget_margins[0]*2+this.options.widget_base_dimensions[0],this.min_widget_height=this.options.widget_margins[1]*2+this.options.widget_base_dimensions[1],this.init()}var i={namespace:"",widget_selector:"li",static_class:"static",widget_margins:[10,10],widget_base_dimensions:[400,225],extra_rows:0,extra_cols:0,min_cols:1,max_cols:60,min_rows:15,max_rows:15,max_size_x:6,autogenerate_stylesheet:!0,avoid_overlapped_widgets:!0,shift_larger_widgets_down:!0,serialize_params:function(e,t){return{col:t.col,row:t.row,size_x:t.size_x,size_y:t.size_y}},collision:{},draggable:{distance:4,items:".gs_w:not(.static)"}};s.generated_stylesheets=[];var o=s.prototype;o.init=function(){this.generate_grid_and_stylesheet(),this.get_widgets_from_DOM(),this.set_dom_grid_height(),this.$wrapper.addClass("ready"),this.draggable(),e(t).bind("resize",throttle(e.proxy(this.recalculate_faux_grid,this),200))},o.disable=function(){return this.$wrapper.find(".player-revert").removeClass("player-revert"),this.drag_api.disable(),this},o.enable=function(){return this.drag_api.enable(),this},o.add_widget=function(t,n,r,i,s){var o;n||(n=1),r||(r=1),!i&!s?o=this.next_position(n,r):(o={col:i,row:s},this.empty_cells(i,s,n,r));var u=e(t).attr({"data-col":o.col,"data-row":o.row,"data-sizex":n,"data-sizey":r}).addClass("gs_w").appendTo(this.$el).hide();return this.$widgets=this.$widgets.add(u),this.$changed=this.$changed.add(u),this.register_widget(u),this.add_faux_rows(o.size_y),this.set_dom_grid_height(),u.fadeIn()},o.resize_widget=function(t,n,r){var i=t.coords().grid;n||(n=i.size_x),r||(r=i.size_y),n>this.cols&&(n=this.cols);var s=this.get_cells_occupied(i),o=i.size_x,u=i.size_y,a=i.col,f=a,l=n>o,c=r>u;if(a+n-1>this.cols){var h=a+(n-1)-this.cols,p=a-h;f=Math.max(1,p)}var d={col:f,row:i.row,size_x:n,size_y:r},v=this.get_cells_occupied(d),m=[];e.each(s.cols,function(t,n){e.inArray(n,v.cols)===-1&&m.push(n)});var g=[];e.each(v.cols,function(t,n){e.inArray(n,s.cols)===-1&&g.push(n)});var y=[];e.each(s.rows,function(t,n){e.inArray(n,v.rows)===-1&&y.push(n)});var b=[];e.each(v.rows,function(t,n){e.inArray(n,s.rows)===-1&&b.push(n)}),this.remove_from_gridmap(i);if(g.length){var w=[f,i.row,n,Math.min(u,r),t];this.empty_cells.apply(this,w)}if(b.length){var E=[f,i.row,n,r,t];this.empty_cells.apply(this,E)}i.col=f,i.size_x=n,i.size_y=r,this.add_to_gridmap(d,t),t.data("coords").update({width:n*this.options.widget_base_dimensions[0]+(n-1)*this.options.widget_margins[0]*2,height:r*this.options.widget_base_dimensions[1]+(r-1)*this.options.widget_margins[1]*2}),r>u&&this.add_faux_rows(r-u),n>o&&this.add_faux_cols(n-o),t.attr({"data-col":f,"data-sizex":n,"data-sizey":r});if(m.length){var S=[m[0],i.row,m.length,Math.min(u,r),t];this.remove_empty_cells.apply(this,S)}if(y.length){var x=[f,i.row,n,r,t];this.remove_empty_cells.apply(this,x)}return t},o.empty_cells=function(t,n,r,i,s){var o=this.widgets_below({col:t,row:n-i,size_x:r,size_y:i});return o.not(s).each(e.proxy(function(t,r){var s=e(r).coords().grid;if(!(s.row<=n+i-1))return;var o=n+i-s.row;this.move_widget_down(e(r),o)},this)),this.set_dom_grid_height(),this},o.remove_empty_cells=function(e,t,n,r,i){var s=this.widgets_below({col:e,row:t,size_x:n,size_y:r});return this.set_dom_grid_height(),this},o.next_position=function(e,t){e||(e=1),t||(t=1);var n=this.gridmap,r=n.length,i=[],s;for(var o=1;o",{"class":"preview-holder","data-row":this.$player.attr("data-row"),"data-col":this.$player.attr("data-col"),css:{width:i.width,height:i.height}}).appendTo(this.$el),this.options.draggable.start&&this.options.draggable.start.call(this,t,n)},o.on_drag=function(e,t){if(this.$player===null)return!1;var n={left:t.position.left+this.baseX,top:t.position.top+this.baseY};this.colliders_data=this.collision_api.get_closest_colliders(n),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.helper&&this.$player&&this.$player.css({left:t.position.left,top:t.position.top}),this.options.draggable.drag&&this.options.draggable.drag.call(this,e,t)},o.on_stop_drag=function(e,t){this.$helper.add(this.$player).add(this.$wrapper).removeClass("dragging"),t.position.left=t.position.left+this.baseX,t.position.top=t.position.top+this.baseY,this.colliders_data=this.collision_api.get_closest_colliders(t.position),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.$player.addClass("player-revert").removeClass("player").attr({"data-col":this.placeholder_grid_data.col,"data-row":this.placeholder_grid_data.row}).css({left:"",top:""}),this.$changed=this.$changed.add(this.$player),this.cells_occupied_by_player=this.get_cells_occupied(this.placeholder_grid_data),this.set_cells_player_occupies(this.placeholder_grid_data.col,this.placeholder_grid_data.row),this.$player.coords().grid.row=this.placeholder_grid_data.row,this.$player.coords().grid.col=this.placeholder_grid_data.col,this.options.draggable.stop&&this.options.draggable.stop.call(this,e,t),this.$preview_holder.remove(),this.$player=null,this.$helper=null,this.placeholder_grid_data={},this.player_grid_data={},this.cells_occupied_by_placeholder={},this.cells_occupied_by_player={},this.w_queue={},this.set_dom_grid_height()},o.on_overlapped_column_change=function(t,n){if(!this.colliders_data.length)return;var r=this.get_targeted_columns(this.colliders_data[0].el.data.col),i=this.last_cols.length,s=r.length,o;for(o=0;oparseInt(this.options.max_rows)&&(i=!0),u>parseInt(this.options.max_cols)&&(i=!0),this.is_player_in(u,a)&&(i=!0)}return i},o.can_placeholder_be_set=function(e,t,n,r){var i=!0;for(var s=0;sparseInt(this.options.max_rows)&&(i=!1),u>parseInt(this.options.max_cols)&&(i=!1),this.is_occupied(u,a)&&!this.is_widget_queued_and_can_move(l)&&(i=!1)}return i},o.queue_widget=function(e,t,n){var r=n,i=r.coords().grid,s=e+"_"+t;if(s in this.w_queue)return!1;this.w_queue[s]=r;for(var o=0;on.row?1:-1}),t},o.sort_by_row_and_col_asc=function(e){return e=e.sort(function(e,t){return e.row>t.row||e.row===t.row&&e.col>t.col?1:-1}),e},o.sort_by_col_asc=function(e){return e=e.sort(function(e,t){return e.col>t.col?1:-1}),e},o.sort_by_row_desc=function(e){return e=e.sort(function(e,t){return e.row+e.size_y=0&&e.inArray(n,r.rows)>=0},o.is_placeholder_in=function(t,n){var r=this.cells_occupied_by_placeholder||{};return this.is_placeholder_in_col(t)&&e.inArray(n,r.rows)>=0},o.is_placeholder_in_col=function(t){var n=this.cells_occupied_by_placeholder||[];return e.inArray(t,n.cols)>=0},o.is_empty=function(e,t){return typeof this.gridmap[e]!="undefined"&&typeof this.gridmap[e][t]!="undefined"&&this.gridmap[e][t]===!1?!0:!1},o.is_occupied=function(e,t){return this.gridmap[e]?this.gridmap[e][t]?!0:!1:!1},o.is_widget=function(e,t){var n=this.gridmap[e];return n?(n=n[t],n?n:!1):!1},o.is_static=function(e,t){var n=this.gridmap[e];return n?(n=n[t],n&&n.hasClass(this.options.static_class)?!0:!1):!1},o.is_widget_under_player=function(e,t){return this.is_widget(e,t)?this.is_player_in(e,t):!1},o.get_widgets_under_player=function(t){t||(t=this.cells_occupied_by_player||{cols:[],rows:[]});var n=e([]);return e.each(t.cols,e.proxy(function(r,i){e.each(t.rows,e.proxy(function(e,t){this.is_widget(i,t)&&(n=n.add(this.gridmap[i][t]))},this))},this)),n},o.set_placeholder=function(t,n){var r=e.extend({},this.placeholder_grid_data),i=this.widgets_below({col:r.col,row:r.row,size_y:r.size_y,size_x:r.size_x}),s=t+r.size_x-1;s>this.cols&&(t-=s-t);var o=this.placeholder_grid_data.row0){if(!(this.is_empty(e,u)||this.is_player(e,u)||this.is_widget(e,u)&&o[u].is(s)))break;r[e].push(u),i=u0){if(this.is_widget(s,u)&&!this.is_player_in(s,u)&&!o[u].is(e.el))break;!this.is_player(s,u)&&!this.is_placeholder_in(s,u)&&!this.is_player_in(s,u)&&r[s].push(u),u=t?e[r[0]]:!1},o.get_widgets_overlapped=function(){var t,n=e([]),r=[],i=this.cells_occupied_by_player.rows.slice(0);return i.reverse(),e.each(this.cells_occupied_by_player.cols,e.proxy(function(t,s){e.each(i,e.proxy(function(t,i){if(!this.gridmap[s])return!0;var o=this.gridmap[s][i];this.is_occupied(s,i)&&!this.is_player(o)&&e.inArray(o,r)===-1&&(n=n.add(o),r.push(o))},this))},this)),n},o.on_start_overlapping_column=function(e){this.set_player(e,!1)},o.on_start_overlapping_row=function(e){this.set_player(!1,e)},o.on_stop_overlapping_column=function(e){var t=this},o.on_stop_overlapping_row=function(e){var t=this,n=this.cells_occupied_by_player.cols},o.new_move_widget_to=function(e,t,n){var r=this,i=e.coords().grid;return this.remove_from_gridmap(i),i.row=n,i.col=t,this.add_to_gridmap(i),e.attr("data-row",n),e.attr("data-col",t),this.update_widget_position(i,e),this.$changed=this.$changed.add(e),this},o.move_widget_to=function(t,n){var r=this,i=t.coords().grid,s=n-i.row,o=this.widgets_below(t),u=this.can_move_to(i,i.col,n,t);return u===!1?!1:(this.remove_from_gridmap(i),i.row=n,this.add_to_gridmap(i),t.attr("data-row",n),this.$changed=this.$changed.add(t),o.each(function(t,n){var i=e(n),s=i.coords().grid,o=r.can_go_widget_up(s);o&&o!==s.row&&r.move_widget_to(i,o)}),this)},o.move_widget_up=function(t,n){var r=t.coords().grid,i=r.row,s=[],o=!0;n||(n=1);if(!this.can_go_up(t))return!1;this.for_each_column_occupied(r,function(r){if(e.inArray(t,s)===-1){var o=t.coords().grid,u=i-n;u=this.can_go_up_to_row(o,r,u);if(!u)return!0;var a=this.widgets_below(t);this.remove_from_gridmap(o),o.row=u,this.add_to_gridmap(o),t.attr("data-row",o.row),this.$changed=this.$changed.add(t),s.push(t)}})},o.move_widget_down=function(t,n){var r=t.coords().grid,i=r.row,s=[],o=n;if(!t)return!1;if(e.inArray(t,s)===-1){var u=t.coords().grid,a=i+n,f=this.widgets_below(t);this.remove_from_gridmap(u),f.each(e.proxy(function(t,n){var r=e(n),i=r.coords().grid,s=this.displacement_diff(i,u,o);s>0&&this.move_widget_down(r,s)},this)),u.row=a,this.update_widget_position(u,t),t.attr("data-row",u.row),this.$changed=this.$changed.add(t),s.push(t)}},o.can_go_up_to_row=function(t,n,r){var i=this.gridmap,s=!0,o=[],u=t.row,a;this.for_each_column_occupied(t,function(e){var t=i[e];o[e]=[],a=u;while(a--){if(!this.is_empty(e,a)||!!this.is_placeholder_in(e,a))break;o[e].push(a)}if(!o[e].length)return s=!1,!0});if(!s)return!1;a=r;for(a=1;a0?n:0},o.widgets_below=function(t){var n=e.isPlainObject(t)?t:t.coords().grid,r=this,i=this.gridmap,s=n.row+n.size_y-1,o=e([]);return this.for_each_column_occupied(n,function(t){r.for_each_widget_below(t,s,function(t,n){if(!r.is_player(this)&&e.inArray(this,o)===-1)return o=o.add(this),!0})}),this.sort_by_row_asc(o)},o.set_cells_player_occupies=function(e,t){return this.remove_from_gridmap(this.placeholder_grid_data),this.placeholder_grid_data.col=e,this.placeholder_grid_data.row=t,this.add_to_gridmap(this.placeholder_grid_data,this.$player),this},o.empty_cells_player_occupies=function(){return this.remove_from_gridmap(this.placeholder_grid_data),this},o.can_go_down=function(t){var n=!0,r=this;return t.hasClass(this.options.static_class)&&(n=!1),this.widgets_below(t).each(function(){e(this).hasClass(r.options.static_class)&&(n=!1)}),n},o.can_go_up=function(e){var t=e.coords().grid,n=t.row,r=n-1,i=this.gridmap,s=[],o=!0;return n===1?!1:(this.for_each_column_occupied(t,function(e){var t=this.is_widget(e,r);if(this.is_occupied(e,r)||this.is_player(e,r)||this.is_placeholder_in(e,r)||this.is_player_in(e,r))return o=!1,!0}),o)},o.can_move_to=function(e,t,n,r){var i=this.gridmap,s=e.el,o={size_y:e.size_y,size_x:e.size_x,col:t,row:n},u=!0,a=t+e.size_x-1;return a>this.cols?!1:r&&r0&&this.is_widget(r,h)&&e.inArray(o[r][h],c)===-1){u=s.call(o[r][h],r,h),c.push(o[r][h]);if(u)break}},"for_each/below":function(){for(h=i+1,a=o[r].length;h=1;i--)for(e=t[i].length-1;e>=1;e--)if(this.is_widget(i,e)){n.push(e),r[e]=i;break}var s=Math.max.apply(Math,n);return this.highest_occupied_cell={col:r[s],row:s},this.highest_occupied_cell},o.get_widgets_from=function(t,n){var r=this.gridmap,i=e();return t&&(i=i.add(this.$widgets.filter(function(){var n=e(this).attr("data-col");return n===t||n>t}))),n&&(i=i.add(this.$widgets.filter(function(){var t=e(this).attr("data-row");return t===n||t>n}))),i},o.set_dom_grid_height=function(){var e=this.get_highest_occupied_cell().row;return this.$el.css("height",e*this.min_widget_height),this},o.generate_stylesheet=function(t){var n="",r=this.options.max_size_x,i=0,o=0,u,a;t||(t={}),t.cols||(t.cols=this.cols),t.rows||(t.rows=this.rows),t.namespace||(t.namespace=this.options.namespace),t.widget_base_dimensions||(t.widget_base_dimensions=this.options.widget_base_dimensions),t.widget_margins||(t.widget_margins=this.options.widget_margins),t.min_widget_width=t.widget_margins[0]*2+t.widget_base_dimensions[0],t.min_widget_height=t.widget_margins[1]*2+t.widget_base_dimensions[1];var f=e.param(t);if(e.inArray(f,s.generated_stylesheets)>=0)return!1;s.generated_stylesheets.push(f);for(u=t.cols;u>=0;u--)n+=t.namespace+' [data-col="'+(u+1)+'"] { left:'+(u*t.widget_base_dimensions[0]+u*t.widget_margins[0]+(u+1)*t.widget_margins[0])+"px;} ";for(u=t.rows;u>=0;u--)n+=t.namespace+' [data-row="'+(u+1)+'"] { top:'+(u*t.widget_base_dimensions[1]+u*t.widget_margins[1]+(u+1)*t.widget_margins[1])+"px;} ";for(var l=1;l<=t.rows;l++)n+=t.namespace+' [data-sizey="'+l+'"] { height:'+(l*t.widget_base_dimensions[1]+(l-1)*t.widget_margins[1]*2)+"px;}";for(var c=1;c<=r;c++)n+=t.namespace+' [data-sizex="'+c+'"] { width:'+(c*t.widget_base_dimensions[0]+(c-1)*t.widget_margins[0]*2)+"px;}";return this.add_style_tag(n)},o.add_style_tag=function(e){var t=n,r=t.createElement("style");return t.getElementsByTagName("head")[0].appendChild(r),r.setAttribute("type","text/css"),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(n.createTextNode(e)),this},o.generate_faux_grid=function(e,t){this.faux_grid=[],this.gridmap=[];var n,r;for(n=t;n>0;n--){this.gridmap[n]=[];for(r=e;r>0;r--)this.add_faux_cell(r,n)}return this},o.add_faux_cell=function(t,n){var r=e({left:this.baseX+(n-1)*this.min_widget_width,top:this.baseY+(t-1)*this.min_widget_height,width:this.min_widget_width,height:this.min_widget_height,col:n,row:t,original_col:n,original_row:t}).coords();return e.isArray(this.gridmap[n])||(this.gridmap[n]=[]),this.gridmap[n][t]=!1,this.faux_grid.push(r),this},o.add_faux_rows=function(e){var t=this.rows,n=t+(e||1);for(var r=n;r>t;r--)for(var i=this.cols;i>=1;i--)this.add_faux_cell(r,i);return this.rows=n,this.options.autogenerate_stylesheet&&this.generate_stylesheet(),this},o.add_faux_cols=function(e){var t=this.cols,n=t+(e||1);for(var r=t;r=1;i--)this.add_faux_cell(i,r);return this.cols=n,this.options.autogenerate_stylesheet&&this.generate_stylesheet(),this},o.recalculate_faux_grid=function(){var n=this.$wrapper.width();return this.baseX=(e(t).width()-n)/2,this.baseY=this.$wrapper.offset().top,e.each(this.faux_grid,e.proxy(function(e,t){this.faux_grid[e]=t.update({left:this.baseX+(t.data.col-1)*this.min_widget_width,top:this.baseY+(t.data.row-1)*this.min_widget_height})},this)),this},o.get_widgets_from_DOM=function(){return this.$widgets.each(e.proxy(function(t,n){this.register_widget(e(n))},this)),this},o.generate_grid_and_stylesheet=function(){var n=this.$wrapper.width(),r=this.$wrapper.height(),i=Math.floor(n/this.min_widget_width)+this.options.extra_cols,s=this.$widgets.map(function(){return e(this).attr("data-col")});s=Array.prototype.slice.call(s,0),s.length||(s=[0]);var o=Math.max.apply(Math,s),u=this.options.extra_rows;return this.$widgets.each(function(t,n){u+=+e(n).attr("data-sizey")}),this.cols=Math.max(o,i,this.options.min_cols),this.rows=this.options.max_rows,this.baseX=(e(t).width()-n)/2,this.baseY=this.$wrapper.offset().top,this.options.autogenerate_stylesheet&&this.generate_stylesheet(),this.generate_faux_grid(this.rows,this.cols)},e.fn.gridster=function(t){return this.each(function(){e(this).data("gridster")||e(this).data("gridster",new s(this,t))})},e.Gridster=o}(jQuery,window,document),function(e,t,n,r){var i=e.Gridster;i.widgets_in_col=function(e){if(!this.gridmap[e])return!1;for(var t=this.gridmap[e].length-1;t>=0;t--)if(this.is_widget(e,t)!==!1)return!0;return!1},i.widgets_in_row=function(e){for(var t=this.gridmap.length;t>=1;t--)if(this.is_widget(t,e)!==!1)return!0;return!1},i.widgets_in_range=function(t,n,r,i){var s=[],o=[],u=e([]),a,f,l,c;for(a=r;a>=t;a--)for(f=i;f>=n;f--)l=this.is_widget(a,f),l!==!1&&(c=l.data("coords").grid,c.col>=t&&c.col<=r&&c.row>=n&&c.row<=i&&(u=u.add(l)));return u},i.get_bottom_most_occupied_cell=function(){var e=0,t=0;return this.for_each_cell(function(n,r,i){n&&i>e&&(e=i,t=r)}),{col:t,row:e}},i.get_right_most_occupied_cell=function(){var e=0,t=0;return this.for_each_cell(function(n,r,i){if(n)return e=i,t=r,!1}),{col:t,row:e}},i.for_each_cell=function(e,t){t||(t=this.gridmap);var n=t.length,r=t[1].length;e:for(var i=n-1;i>=1;i--)for(var s=r-1;s>=1;s--){var o=t[i]&&t[i][s];if(e){if(e.call(this,o,i,s)===!1)break e;continue}}},i.next_position_in_range=function(e,t,n){e||(e=1),t||(t=1);var r=this.gridmap,i=r.length,s=[],o;for(var u=1;u=1?this.sort_by_col_asc(s)[0]:!1},i.closest_to_right=function(e,t){if(!this.gridmap[e])return!1;var n=this.gridmap.length-1;for(var r=e;r<=n;r++)if(this.gridmap[r][t])return{col:r,row:t};return!1},i.closest_to_left=function(e,t){var n=this.gridmap.length-1;if(!this.gridmap[e])return!1;for(var r=e;r>=1;r--)if(this.gridmap[r][t])return{col:r,row:t};return!1}}(jQuery,window,document); \ No newline at end of file diff --git a/sample/css/main.css b/sample/css/main.css new file mode 100755 index 0000000000..139fa92197 --- /dev/null +++ b/sample/css/main.css @@ -0,0 +1,364 @@ +/* + * HTML5 Boilerplate + * + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html, +button, +input, +select, +textarea { + color: #222; +} + +body { + font-size: 1em; + line-height: 1.4; + background: #004756; +} + +/* Gridster styles */ +.demo { + margin: 3em 0; + padding: 7.5em 0 5.5em; + background: #004756; +} + +.demo:hover .gridster { + opacity: 1; +} + +.gridster, .content { + width: 940px; + margin: 0 auto; + + opacity: .8; + + -webkit-transition: opacity .6s; + -moz-transition: opacity .6s; + -o-transition: opacity .6s; + -ms-transition: opacity .6s; + transition: opacity .6s; +} + +.content { + color: white; +} + +.content p { + margin: 25px; +} + +.gridster .gs_w { + background: #FFF; + cursor: pointer; + -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); + box-shadow: 0 0 5px rgba(0,0,0,0.3); +} + +.gridster .player { + -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3); + box-shadow: 3px 3px 5px rgba(0,0,0,0.3); +} + + +.gridster .gs_w.try { + background-image: url(../img/sprite.png); + background-repeat: no-repeat; + background-position: 37px -169px; + +} + +.gridster .preview-holder { + border: none!important; + border-radius: 0!important; + background: rgba(255,255,255,.2)!important; +} + +li { + list-style: none; +} + +/* + * Remove text-shadow in selection highlight: h5bp.com/i + * These selection declarations have to be separate. + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 + */ + +img { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Chrome Frame prompt + ========================================================================== */ + +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + + + + + + + + + + + + + + + + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Image replacement + */ + +.ir { + background-color: transparent; + border: 0; + overflow: hidden; + /* IE 6/7 fallback */ + *text-indent: -9999px; +} + +.ir:before { + content: ""; + display: block; + width: 0; + height: 150%; +} + +/* + * Hide from both screenreaders and browsers: h5bp.com/u + */ + +.hidden { + display: none !important; + visibility: hidden; +} + +/* + * Hide only visually, but have it available for screenreaders: h5bp.com/v + */ + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* + * Extends the .visuallyhidden class to allow the element to be focusable + * when navigated to via the keyboard: h5bp.com/p + */ + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +/* + * Hide visually and from screenreaders, but maintain layout + */ + +.invisible { + visibility: hidden; +} + +/* + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ + +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/* + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ + +.clearfix { + *zoom: 1; +} + + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + Theses examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, + (-o-min-device-pixel-ratio: 5/4), + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid required HTTP connection: h5bp.com/r + ========================================================================== */ + +@media print { + * { + background: transparent !important; + color: #000 !important; /* Black prints faster: h5bp.com/s */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links for images, or javascript/internal links + */ + + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; /* h5bp.com/t */ + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/sample/css/normalize.css b/sample/css/normalize.css new file mode 100755 index 0000000000..4d4d01d158 --- /dev/null +++ b/sample/css/normalize.css @@ -0,0 +1,527 @@ +/*! normalize.css v1.1.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/** + * Address `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/** + * Address margins handled incorrectly in IE 6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/** + * Address CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/** + * Address `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/** + * Address margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/** + * Address paddings set differently in IE 6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/** + * Correct list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Correct margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/sample/doc/TOC.md b/sample/doc/TOC.md new file mode 100755 index 0000000000..da08ad0b9a --- /dev/null +++ b/sample/doc/TOC.md @@ -0,0 +1,36 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) + +# HTML5 Boilerplate documentation: + +## Getting started + +* [Usage](usage.md) — Overview of the project contents. +* [FAQ](faq.md) — Frequently asked questions, along with their answers. + +## The core of HTML5 Boilerplate + +* [HTML](html.md) — A guide to the default HTML. +* [CSS](css.md) — A guide to the default CSS. +* [JavaScript](js.md) — A guide to the default JavaScript. +* [.htaccess](htaccess.md) — All about the Apache web server config (also see + our [alternative server configs](https://github.com/h5bp/server-configs)). +* [crossdomain.xml](crossdomain.md) — An introduction to making use of + crossdomain requests. +* [Everything else](misc.md). + +## Development + +* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further with + the boilerplate. + +## Related projects + +HTML5 Boilerplate has several related projects to help improve the performance +of your site/app in various production environments. + +* [Server configs](https://github.com/h5bp/server-configs) — Configs for + non-Apache servers. +* [Node build script](https://github.com/h5bp/node-build-script) — A + feature-rich [grunt](https://github.com/cowboy/grunt) plugin. +* [Ant build script](https://github.com/h5bp/ant-build-script) — The original + HTML5 Boilerplate build script. diff --git a/sample/doc/crossdomain.md b/sample/doc/crossdomain.md new file mode 100755 index 0000000000..860629e207 --- /dev/null +++ b/sample/doc/crossdomain.md @@ -0,0 +1,17 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# crossdomain.xml + +A cross-domain policy file is an XML document that grants a web client—such as +Adobe Flash Player, Adobe Reader, etc., permission to handle data across +multiple domains. When a client hosts content from a particular source domain +and that content makes requests directed towards a domain other than its own, +the remote domain would need to host a cross-domain policy file that grants +access to the source domain, allowing the client to continue with the +transaction. Policy files grant read access to data, permit a client to include +custom headers in cross-domain requests, and are also used with sockets to +grant permissions for socket-based connections. + +For full details, check out Adobe's article about the [cross-domain policy file +specification](http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html). diff --git a/sample/doc/css.md b/sample/doc/css.md new file mode 100755 index 0000000000..2d04f912ad --- /dev/null +++ b/sample/doc/css.md @@ -0,0 +1,135 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# The CSS + +The HTML5 Boilerplate starting CSS includes: + +* [Normalize.css](https://github.com/necolas/normalize.css). +* Useful HTML5 Boilerplate defaults. +* Common helpers. +* Placeholder media queries. +* Print styles. + +This starting CSS does not rely on the presence of conditional classnames, +conditional style sheets, or Modernizr. It is ready to use whatever your +development preferences happen to be. + + +## Normalize.css + +Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains +extensive inline documentation. Please refer to the [Normalize.css +project](http://necolas.github.com/normalize.css/) for more information. + + +## HTML5 Boilerplate defaults + +This project includes a handful of base styles that build upon Normalize.css. +These include: + +* Basic typography settings to provide improved text readability by default. +* Protection against unwanted `text-shadow` during text highlighting. +* Tweaks to default image alignment, fieldsets, and textareas. +* A pretty Chrome Frame prompt. + +You are free to modify or add to these base styles as your project requires. + + +## Common helpers + +#### `.ir` + +Add the `.ir` class to any element you are applying image-replacement to. When +replacing an element's content with an image, make sure to also set a specific +`background-image: url(pathtoimage.png);`, `width`, and `height` so that your +replacement image appears. + +#### `.hidden` + +Add the `.hidden` class to any elements that you want to hide from all +presentations, including screen readers. It could be an element that will be +populated later with JavaScript or an element you will hide with JavaScript. Do +not use this for SEO keyword stuffing. That is just not cool. + +#### `.visuallyhidden` + +Add the `.visuallyhidden` class to hide text from browsers but make it +available for screen readers. You can use this to hide text that is specific to +screen readers but that other users should not see. [About invisible +content](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding +content for +accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility), +[HTML5 Boilerplate +issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/). + +#### `.invisible` + +Add the `.invisible` class to any element you want to hide without affecting +layout. When you use `display: none` an element is effectively removed from the +layout. But in some cases you want the element to simply be invisible while +remaining in the flow and not affecting the positioning of surrounding +content. + +#### `.clearfix` + +Adding `.clearfix` to an element will ensure that it always fully contains its +floated children. There have been many variants of the clearfix hack over the +years, and there are other hacks that can also help you to contain floated +children, but the HTML5 Boilerplate currently uses the [micro +clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). + + +## Media Queries + +The boilerplate makes it easy to get started with a "Mobile First" and +[Responsive Web +Design](http://www.alistapart.com/articles/responsive-web-design/) approach to +development. But it's worth remembering that there are [no silver +bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). + +We include a placeholder Media Queries to build up your mobile styles for wider +viewports and high-resolution displays. It's recommended that you adapt these +Media Queries based on the content of your site rather than mirroring the fixed +dimensions of specific devices. + +If you do not want to take a "Mobile First" approach, you can simply edit or +remove these placeholder Media Queries. One possibility would be to work from +wide viewports down and use `max-width` MQs instead, e.g., `@media only screen +and (max-width: 480px)`. + +Take a look into the [Mobile +Boilerplate](https://github.com/h5bp/mobile-boilerplate) for features that are +useful when developing mobile wep apps. + + +## Print styles + +* Print styles are inlined to [reduce the number of page + requests](http://www.phpied.com/delay-loading-your-print-css/). +* We strip all background colors and change the font color to dark gray and + remove text-shadow. This is meant to help save printer ink. +* Anchors do not need colors to indicate they are linked. They are underlined + to indicate so. +* Anchors and Abbreviations are expanded to indicate where users reading the + printed page can refer to. +* But we do not want to show link text for image replaced elements (given that + they are primarily images). + +### Paged media styles + +* Paged media is supported only in a [few + browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules). +* Paged media support means browsers would know how to interpret instructions + on breaking content into pages and on orphans/widows. +* We use `page-break-inside: avoid;` to prevent an image and table row from + being split into two different pages, so use the same `page-break-inside: + avoid;` for that as well. +* Headings should always appear with the text they are titles for. So, we + ensure headings never appear in a different page than the text they describe + by using `page-break-after: avoid;`. +* We also apply a default margin for the page specified in `cm`. +* We do not want [orphans and + widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages + you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal + number of words that every line should contain. diff --git a/sample/doc/extend.md b/sample/doc/extend.md new file mode 100755 index 0000000000..447459c61c --- /dev/null +++ b/sample/doc/extend.md @@ -0,0 +1,507 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Extend and customise HTML5 Boilerplate + +Here is some useful advice for how you can make your project with HTML5 +Boilerplate even better. We don't want to include it all by default, as not +everything fits with everyone's needs. + + +## DNS prefetching + +In short, DNS Prefetching is a method of informing the browser of domain names +referenced on a site so that the client can resolve the DNS for those hosts, +cache them, and when it comes time to use them, have a faster turn around on +the request. + +### Implicit prefetches + +There is a lot of prefetching done for you automatically by the browser. When +the browser encounters an anchor in your html that does not share the same +domain name as the current location the browser requests, from the client OS, +the IP address for this new domain. The client first checks its cache and +then, lacking a cached copy, makes a request from a DNS server. These requests +happen in the background and are not meant to block the rendering of the +page. + +The goal of this is that when the foreign IP address is finally needed it will +already be in the client cache and will not block the loading of the foreign +content. Less requests result in faster page load times. The perception of this +is increased on a mobile platform where DNS latency can be greater. + +#### Disable implicit prefetching + +```html + +``` + +Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still +prefetch any explicit dns-prefetch links. + +**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM +FOREIGN DOMAINS. + +### Explicit prefetches + +Typically the browser only scans the HTML for foreign domains. If you have +resources that are outside of your HTML (a javascript request to a remote +server or a CDN that hosts content that may not be present on every page of +your site, for example) then you can queue up a domain name to be prefetched. + +```html + + +``` + +You can use as many of these as you need, but it's best if they are all +immediately after the [Meta +Charset](https://developer.mozilla.org/en/HTML/Element/meta#attr-charset) +element (which should go right at the top of the `head`), so the browser can +act on them ASAP. + +#### Common Prefetch Links + +Amazon S3: + +```html + +``` + +Google APIs: + +```html + +``` + +Microsoft Ajax Content Delivery Network: + +```html + + +``` + +### Browser support for DNS prefetching + +Chrome, Firefox 3.5+, Safari 5+, Opera (Unknown), IE 9 (called "Pre-resolution" +on blogs.msdn.com) + +### Further reading about DNS prefetching + +* https://developer.mozilla.org/En/Controlling_DNS_prefetching +* http://dev.chromium.org/developers/design-documents/dns-prefetching +* http://www.apple.com/safari/whats-new.html +* http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx +* http://dayofjs.com/videos/22158462/web-browsers_alex-russel + + +## Search + +### Direct search spiders to your sitemap + +[Learn how to make a sitemap](http://www.sitemaps.org/protocol.php) + +```html + +``` + +### Hide pages from search engines + +According to Heather Champ, former community manager at Flickr, you should not +allow search engines to index your "Contact Us" or "Complaints" page if you +value your sanity. This is an HTML-centric way of achieving that. + +```html + +``` + +**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES. + +### Firefox and IE Search Plugins + +Sites with in-site search functionality should be strongly considered for a +browser search plugin. A "search plugin" is an XML file which defines how your +plugin behaves in the browser. [How to make a browser search +plugin](http://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin). + +```html + +``` + + +## Internet Explorer + +### Prompt users to switch to "Desktop Mode" in IE10 Metro + +IE10 does not support plugins, such as Flash, in Metro mode. If your site +requires plugins, you can let users know that via the X-UA-Compatible meta +element, which will prompt them to switch to Desktop Mode. + +```html + +``` + +Here's what it looks like alongside H5BP's default X-UA-Compatible values: + +```html + +``` + +You can find more information in [Microsoft's IEBlog post about prompting for +plugin use in IE10 Metro +Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx). + +### IE Pinned Sites (IE9+) + +Enabling your application for pinning will allow IE9 users to add it to their +Windows Taskbar and Start Menu. This comes with a range of new tools that you +can easily configure with the elements below. See more [documentation on IE9 +Pinned Sites](http://msdn.microsoft.com/en-us/library/gg131029.aspx). + +### Name the Pinned Site for Windows + +Without this rule, Windows will use the page title as the name for your +application. + +```html + +``` + +### Give your Pinned Site a tooltip + +You know — a tooltip. A little textbox that appears when the user holds their +mouse over your Pinned Site's icon. + +```html + +``` + +### Set a default page for your Pinned Site + +If the site should go to a specific URL when it is pinned (such as the +homepage), enter it here. One idea is to send it to a special URL so you can +track the number of pinned users, like so: +`http://www.example.com/index.html?pinned=true` + +```html + +``` + +### Recolor IE's controls manually for a Pinned Site + +IE9+ will automatically use the overall color of your Pinned Site's favicon to +shade its browser buttons. UNLESS you give it another color here. Only use +named colors (`red`) or hex colors (`#ff0000`). + +```html + +``` + +### Manually set the window size of a Pinned Site + +If the site should open at a certain window size once pinned, you can specify +the dimensions here. It only supports static pixel dimensions. 800x600 +minimum. + +```html + +``` + +### Jump List "Tasks" for Pinned Sites + +Add Jump List Tasks that will appear when the Pinned Site's icon gets a +right-click. Each Task goes to the specified URL, and gets its own mini icon +(essentially a favicon, a 16x16 .ICO). You can add as many of these as you +need. + +```html + + +``` + +### (Windows 8) High quality visuals for Pinned Sites + +Windows 8 adds the ability for you to provide a PNG tile image and specify the +tile's background color. [Full details on the IE +blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). + +* Create a 144x144 image of your site icon, filling all of the canvas, and + using a transparent background. +* Save this image as a 32-bit PNG and optimize it without reducing + colour-depth. It can be named whatever you want (e.g. `metro-tile.png`). +* To reference the tile and its color, add the HTML `meta` elements described + in the IE Blog post. + +### (Windows 8) Badges for Pinned Sites + +IE10 will poll an XML document for badge information to display on your app's +tile in the Start screen. The user will be able to receive these badge updates +even when your app isn't actively running. The badge's value can be a number, +or one of a predefined list of glyphs. + +* [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx) +* [Available badge values](http://msdn.microsoft.com/en-us/library/ie/br212849.aspx) + +```html + +``` + +### Suppress IE6 image toolbar + +Kill IE6's pop-up-on-mouseover toolbar for images that can interfere with +certain designs and be pretty distracting in general. + +```html + +``` + + +## Social Networks + +### Facebook Open Graph data + +You can control the information that Facebook and others display when users +share your site. Below are just the most basic data points you might need. For +specific content types (including "website"), see [Facebook's built-in Open +Graph content +templates](https://developers.facebook.com/docs/opengraph/objects/builtin/). +Take full advantage of Facebook's support for complex data and activity by +following the [Open Graph +tutorial](https://developers.facebook.com/docs/opengraph/tutorial/). + +```html + + + +``` + +### Twitter Cards + +Twitter provides a snippet specification that serves a similar purpose to Open +Graph. In fact, Twitter will use Open Graph when Cards is not available. Note +that, as of this writing, Twitter requires that app developers activate Cards +on a per-domain basis. You can read more about the various snippet formats +and application process in the [official Twitter Cards +documentation](https://dev.twitter.com/docs/cards). + +```html + + + + + + + +``` + + +## URLs + +### Canonical URL + +Signal to search engines and others "Use this URL for this page!" Useful when +parameters after a `#` or `?` is used to control the display state of a page. +`http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as +the cleaner, more accurate `http://www.example.com/cart.html`. + +```html + +``` + +### Official shortlink + +Signal to the world "This is the shortened URL to use this page!" Poorly +supported at this time. Learn more by reading the [article about shortlinks on +the Microformats wiki](http://microformats.org/wiki/rel-shortlink). + +```html + +``` + + +## News Feeds + +### RSS + +Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from +scratch](http://www.rssboard.org/rss-specification)? + +```html + +``` + +### Atom + +Atom is similar to RSS, and you might prefer to use it instead of or in +addition to it. [See what Atom's all +about](http://www.atomenabled.org/developers/syndication/). + +```html + +``` + +### Pingbacks + +Your server may be notified when another site links to yours. The href +attribute should contain the location of your pingback service. + +```html + +``` + +* High-level explanation: http://codex.wordpress.org/Introduction_to_Blogging#Pingbacks +* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 +* PHP pingback service: http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ + + +## App Stores + +### Install a Chrome Web Store app + +Users can install a Chrome app directly from your website, as long as the app +and site have been associated via Google's Webmaster Tools. Read more on +[Chrome Web Store's Inline Installation +docs](https://developers.google.com/chrome/web-store/docs/inline_installation). + +```html + +``` + +### Smart App Banners in iOS 6 Safari + +Stop bothering everyone with gross modals advertising your entry in the App Store. +This bit of code will unintrusively allow the user the option to download your iOS +app, or open it with some data about the user's current state on the website. + +```html + +``` + +## Google Analytics augments + +### More tracking settings + +The [optimized Google Analytics +snippet](http://mathiasbynens.be/notes/async-analytics-snippet) included with +HTML5 Boilerplate includes something like this: + +```js +var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']]; +``` + +In case you need more settings, just extend the array literal instead of +[`.push()`ing to the +array](http://mathiasbynens.be/notes/async-analytics-snippet#dont-push-it) +afterwards: + +```js +var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview'], ['_setAllowAnchor', true]]; +``` + +### Anonymize IP addresses + +In some countries, no personal data may be transferred outside jurisdictions +that do not have similarly strict laws (i.e. from Germany to outside the EU). +Thus a webmaster using the Google Analytics script may have to ensure that no +personal (trackable) data is transferred to the US. You can do that with [the +`_gat.anonymizeIp` +option](http://code.google.com/apis/analytics/docs/gaJS/gaJSApi_gat.html#_gat._anonymizeIp). +In use it looks like this: + +```js +var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_gat._anonymizeIp'], ['_trackPageview']]; +``` + +### Track jQuery AJAX requests in Google Analytics + +An article by @JangoSteve explains how to [track jQuery AJAX requests in Google +Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/). + +Add this to `plugins.js`: + +```js +/* + * Log all jQuery AJAX requests to Google Analytics + * See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ + */ +if (typeof _gaq !== "undefined" && _gaq !== null) { + $(document).ajaxSend(function(event, xhr, settings){ + _gaq.push(['_trackPageview', settings.url]); + }); +} +``` + +### Track JavaScript errors in Google Analytics + +Add this function after `_gaq` is defined: + +```js +(function(window){ + var undefined, + link = function (href) { + var a = window.document.createElement('a'); + a.href = href; + return a; + }; + window.onerror = function (message, file, row) { + var host = link(file).hostname; + _gaq.push([ + '_trackEvent', + (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', + message, file + ' LINE: ' + row, undefined, undefined, true + ]); + }; +}(window)); +``` + +### Track page scroll + +Add this function after `_gaq` is defined: + +```js +$(function(){ + var isDuplicateScrollEvent, + scrollTimeStart = new Date, + $window = $(window), + $document = $(document), + scrollPercent; + + $window.scroll(function() { + scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height()); + if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% + isDuplicateScrollEvent = 1; + _gaq.push(['_trackEvent', 'scroll', + 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's', + undefined, undefined, true + ]); + } + }); +}); +``` + + +## Miscellaneous + +* Use [HTML5 + polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). + +* Use [Microformats](http://microformats.org/wiki/Main_Page) (via + [microdata](http://microformats.org/wiki/microdata)) for optimum search + results + [visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html). + +* If you're building a web app you may want [native style momentum scrolling in + iOS5](http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/) using + `-webkit-overflow-scrolling: touch`. + +* Avoid development/stage websites "leaking" into SERPs (search engine results + page) by [implementing X-Robots-tag + headers](https://github.com/h5bp/html5-boilerplate/issues/804). + +* Screen readers currently have less-than-stellar support for HTML5 but the JS + script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can + help increase accessibility by adding ARIA roles to HTML5 elements. + + +*Many thanks to [Brian Blakely](https://github.com/brianblakely) for +contributing much of this information.* diff --git a/sample/doc/faq.md b/sample/doc/faq.md new file mode 100755 index 0000000000..3e967b240e --- /dev/null +++ b/sample/doc/faq.md @@ -0,0 +1,77 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Frequently asked questions + +### Why is the URL for jQuery without "http"? + +This is an intentional use of [protocol-relative +URLs](http://paulirish.com/2010/the-protocol-relative-url/) + +**N.B.** Using a protocol-relative URL for files that exist on a CDN is +problematic when you try to view your local files directly in the browser. The +browser will attempt to fetch the file from your local file system. We +recommend that you use a local server to test your pages (or Dropbox). This can +be done using Python by running `python -m SimpleHTTPServer` from your local +directory, using Ruby by installing and running +[asdf](https://rubygems.org/gems/asdf), and by installing any one of XAMPP, +MAMP, or WAMP. + + +### Why don't you automatically load the latest version of jQuery from the Google CDN? + +1. The latest version of jQuery may not be compatible with the existing + plugins/code on the site. Version updating should be an intentional + decision. +2. The latest version has a very short `max-age=3600` compares to the specific + version of `max-age=31536000`, which means you won't get the benefits of + long-term caching. + + +### Why is the Google Analytics code at the bottom? Google recommends it be placed the `head`. + +The advantage to placing it in the `head` is that you will track a user's +pageview even if they leave the page before it has been fully loaded. However, +putting the code at the bottom keeps all the scripts together and reinforces +that scripts at the bottom are the right move. + + +### How can I integrate [Twitter Bootstrap](http://twitter.github.com/bootstrap/) with HTML5 Boilerplate? + +You can use [Initializr](http://initializr.com) to create a custom build that +includes HTML5 Boilerplate with Twitter Bootstrap. + +Read more about how [HTML5 Boilerplate and Twitter Bootstrap complement each +other](http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher). + + +### How do I prevent phone numbers looking twice as large and having a Skype highlight? + +If this is occurring, it is because a user has the Skype browser extension +installed. + +Use the following CSS to prevent Skype from formatting the numbers on your +page: + +```css +span.skype_pnh_container { + display: none !important; +} + +span.skype_pnh_print_container { + display: inline !important; +} +``` + + +### Do I need to upgrade my sites each time a new version of HTML5 Boilerplate is released? + +No. You don't normally replace the foundations of a house once it has been +built. There is nothing stopping you from trying to work in the latest changes +but you'll have to assess the costs/benefits of doing so. + + +### Where can I get help for support questions? + +Please ask for help on +[StackOverflow](http://stackoverflow.com/questions/tagged/html5boilerplate). diff --git a/sample/doc/htaccess.md b/sample/doc/htaccess.md new file mode 100755 index 0000000000..71542bfbb5 --- /dev/null +++ b/sample/doc/htaccess.md @@ -0,0 +1,333 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# .htaccess + +In Apache HTTP server, `.htaccess` (hypertext access) is the configuration file +that allows for web server configuration. HTML5 Boilerplate includes a number +of best practice server rules for making web pages fast and secure, these rules +can be applied in the `.htaccess` file. + +**First, you'll want to have these modules enabled for optimum performance:** + +* `mod_setenvif.c` (setenvif_module) +* `mod_headers.c` (headers_module) +* `mod_deflate.c` (deflate_module) +* `mod_filter.c` (filter_module) +* `mod_expires.c` (expires_module) +* `mod_rewrite.c` (rewrite_module) + + +## On Windows + +You've got a couple of options that depend on how you installed Apache. + +1. **WampServer**. This is by far the simplest option. If you have installed + WampServer just click on the icon in the task bar, hover over the Apache + section in the menu that comes up and then hover over the modules section. + You will be presented with a list of modules. Simply click on a module name + to enable it (or disable it if it is already enabled). A check mark next to + a module indicates that it is enabled. WampServer will automatically restart + the Apache service after you enable a module. + +2. **Manually editing `httpd.conf`**. This assumes that you have manually + installed Apache. You will need to locate the `httpd.conf` file which is + normally in the `conf` folder in the folder where you installed Apache (for + example `C:\apache\conf\httpd.conf`). Open up this file in a text editor. Near + the top (after a bunch of comments) you will see a long list of modules. Check + to make sure that the modules listed above are not commented out. If they + are, go ahead and uncomment them and restart Apache. + +That's it, you're done! + + +## On Linux + +These instructions should work on any distribution where `apt-get` has been +used to install Apache. + +1. Open up a terminal and type the following command. Enter your password when + prompted. + + `sudo a2enmod setenvif headers deflate filter expires rewrite include` + +1. Restart apache by using the following command so the new configuration takes + effect. + + `sudo /etc/init.d/apache2 restart` + +That's it, you're done! + + +## On Mac + +1. **MAMP PRO**. On the main screen, click the `Apache` tab and ensure that all + the required modules listed above are 'checked', indicating they are + enabled. + +2. **MAMP**. Locate the `httpd.conf` file, which is typically found in + `/Applications/MAMP/conf/apache/httpd.conf`. Open the file in a text editor + and uncomment all of the required modules listed above. Once you have done so, + reset MAMP. + +3. **XAMPP**. Follow the same steps as for MAMP, but look for `httpd.conf` in + `/Applications/XAMPP/etc/httpd.conf`. + + +## Security + +Do not turn off your ServerSignature (i.e., the `Server:` HTTP header). Serious +attackers can use other kinds of fingerprinting methods to figure out the +actual server and components running behind a port. Instead, as a site owner, +you should keep track of what's listening on ports on hosts that you control. +Run a periodic scanner to make sure nothing suspicious is running on a host you +control, and use the ServerSignature to determine if this is the web server and +version that you expect. + + +## Performance + +### Configure ETags + +```apache +FileETag None +``` + +Entity tags (ETags) is a mechanism that web servers and browsers use to +determine whether the component in the browser's cache matches the one on the +origin server. (An "entity" is another word for "component": images, scripts, +stylesheets, etc.) ETags were added to provide a mechanism for validating +entities that is more flexible than the last-modified date. An `ETag` is a +string that uniquely identifies a specific version of a component. The only +format constraints are that the string be quoted. The origin server specifies +the component's `ETag` using the `ETag` response header. + +```http +HTTP/1.1 200 OK +Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT +ETag: "10c24bc-4ab-457e1c1f" +Content-Length: 12195 +``` + +Later, if the browser has to validate a component, it uses the `If-None-Match` +header to pass the `ETag` back to the origin server. If the ETags match, a 304 +status code is returned reducing the response by 12195 bytes for this +example. + +```http +GET /i/yahoo.gif HTTP/1.1 +Host: us.yimg.com +If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT +If-None-Match: "10c24bc-4ab-457e1c1f" +HTTP/1.1 304 Not Modified +``` + +The problem with ETags is that they typically are constructed using attributes +that make them unique to a specific server hosting a site. ETags won't match +when a browser gets the original component from one server and later tries to +validate that component on a different server, a situation that is all too +common on web sites that use a cluster of servers to handle requests. By +default, both Apache and IIS embed data in the ETag that dramatically reduces +the odds of the validity test succeeding on web sites with multiple servers. + +The ETag format for Apache 1.3 and 2.x is inode-size-timestamp. Although a +given file may reside in the same directory across multiple servers, and have +the same file size, permissions, timestamp, etc., its inode is different from +one server to the next. + +IIS 5.0 and 6.0 have a similar issue with ETags. The format for ETags on IIS is +Filetimestamp:ChangeNumber. A ChangeNumber is a counter used to track +configuration changes to IIS. It's unlikely that the ChangeNumber is the same +across all IIS servers behind a web site. + +The end result is ETags generated by Apache and IIS for the exact same +component won't match from one server to another. If the ETags don't match, the +user doesn't receive the small, fast 304 response that ETags were designed for; +instead, they'll get a normal 200 response along with all the data for the +component. If you host your web site on just one server, this isn't a problem. +But if you have multiple servers hosting your web site, and you're using Apache +or IIS with the default ETag configuration, your users are getting slower +pages, your servers have a higher load, you're consuming greater bandwidth, and +proxies aren't caching your content efficiently. Even if your components have a +far future Expires header, a conditional GET request is still made whenever the +user hits Reload or Refresh. + +If you're not taking advantage of the flexible validation model that ETags +provide, it's better to just remove the ETag altogether. The Last-Modified +header validates based on the component's timestamp. And removing the ETag +reduces the size of the HTTP headers in both the response and subsequent +requests. This Microsoft Support article describes how to remove ETags. In +Apache, this is done by simply adding the above line to your Apache +configuration file. + + +### Gzip Components + +Compression reduces response times by reducing the size of the HTTP response. + +Starting with HTTP/1.1, web clients indicate support for compression with the +Accept-Encoding header in the HTTP request. + +``` +Accept-Encoding: gzip, deflate +``` + +If the web server sees this header in the request, it may compress the response +using one of the methods listed by the client. The web server notifies the web +client of this via the Content-Encoding header in the response. + +``` +Content-Encoding: gzip +``` + +Gzip is the most popular and effective compression method at this time. It was +developed by the GNU project and standardized by RFC 1952. The only other +compression format you're likely to see is deflate, but it's less effective and +less popular. + +Gzipping generally reduces the response size by about 70%. Approximately 90% of +today's Internet traffic travels through browsers that claim to support gzip. +If you use Apache, the module configuring gzip depends on your version: Apache +1.3 uses `mod_gzip` while Apache 2.x uses `mod_deflate`. + +There are known issues with browsers and proxies that may cause a mismatch in +what the browser expects and what it receives with regard to compressed +content. Fortunately, these edge cases are dwindling as the use of older +browsers drops off. The Apache modules help out by adding appropriate Vary +response headers automatically. + +Servers choose what to gzip based on file type, but are typically too limited +in what they decide to compress. Most web sites gzip their HTML documents. It's +also worthwhile to gzip your scripts and stylesheets, but many web sites miss +this opportunity. In fact, it's worthwhile to compress any text response +including XML and JSON. Image and PDF files should not be gzipped because they +are already compressed. Trying to gzip them not only wastes CPU but can +potentially increase file sizes. + +Gzipping as many appropriate file types as possible is an easy way to reduce +page weight and accelerate the user experience. + + +### Cache busting + +A first-time visitor to your page may have to make several HTTP requests, but +by using the Expires header you make those components cacheable. This avoids +unnecessary HTTP requests on subsequent page views. Expires headers are most +often used with images, but they should be used on all components including +scripts, stylesheets, etc. + +Traditionally, if you use a far future Expires header you have to change the +component's filename whenever the component changes. + +The H5BP `.htaccess` has built-in filename cache busting. To use it, uncomment +the relevant lines in the `.htaccess` file. + +Doing so will route all requests for `/path/filename.20120101.ext` to +`/path/filename.ext`. To use this, just add a time-stamp number (or your own +numbered versioning system) into your resource filenames in your HTML source +whenever you update those resources. + +#### Example: + +```html + + + + +``` + +**N.B. You do not have to rename the resource on the filesystem.** All you have +to do is add the timestamp number to the filename in your HTML source. The +`.htaccess` directive will serve up the proper file. + +Traditional cache busting involved adding a query string to the end of your +JavaScript or CSS filename whenever you updated it. + +```html + +``` + +However, as [Steve Souders](http://stevesouders.com/) explains in [*Revving +Filenames: don’t use +querystring*](http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/), +the query string approach is not always reliable for clients behind a Squid +Proxy Server. + + +## Trailing slash redirects + +Trailing slash redirects can be done by adding one of the options below in `.htaccess`. + +### Option 1 +Rewrite `domain.com/foo` -> `domain.com/foo/`. + +```apache +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$ +RewriteRule ^(.*)$ $1/ [R=301,L] +``` + +### Option 2 +Rewrite `domain.com/foo/` -> `domain.com/foo` + +```apache +RewriteRule ^(.*)/$ $1 [R=301,L] +``` + +Here are some tips to show you how to integrate the rewrite rules with +different CMS tools. There are four areas you need to look out for: + +### 1. Keep a backup + +If you use trailing slash redirects on an existing site, always keep a backup +of your `.htaccess` and test thoroughly on your staging server before using it on +a production server. + +### 2. Don't replace existing rules, merge + +For example, if you use CodeIgniter you may have existing URL rewrite rules like: + +```apache +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule ^(.*)$ index.php/$1 +``` + +Merge the above with H5BP rules below: + +```apache +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$ +RewriteRule ^(.*)$ $1/ [R=301,L] +``` + +### 3. Be careful of the order + +Make sure you test thoroughly in your staging environment. For the above +example, the order is add trailing slash first, and add your existing rule +after: + +```apache +# this adds trailing slash +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$ +RewriteRule ^(.*)$ $1/ [R=301,L] + +# this gets rid of index.php +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule ^(.*)$ index.php/$1 +``` + +### 4. Double-check `RewriteBase` path is correct + +Make sure your `RewriteBase` path points to the correct location and sits above +any rewrite rules. This usually happens to those have WordPress and ran the +auto install. For instance, if you have a site at `example.com/blog`, your +RewriteBase may look like: + +```apache +RewriteBase /blog/ +``` + +If you already have a working RewriteBase, keep that and don't remove it. diff --git a/sample/doc/html.md b/sample/doc/html.md new file mode 100755 index 0000000000..a09fe0894d --- /dev/null +++ b/sample/doc/html.md @@ -0,0 +1,170 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# The HTML + +## Conditional `html` classes + +A series of IE conditional comments apply the relevant IE-specific classes to +the `html` tag. This provides one method of specifying CSS fixes for specific +legacy versions of IE. While you may or may not choose to use this technique in +your project code, HTML5 Boilerplate's default CSS does not rely on it. + +When using the conditional classes technique, applying classes to the `html` +element has several benefits: + +* It avoids a [file blocking + issue](http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/) + discovered by Stoyan Stefanov and Markus Leptien. +* It avoids the need for an empty comment that also fixes the above issue. +* CMSes like WordPress and Drupal use the body class more heavily. This makes + integrating there a touch simpler. +* It still validates as HTML5. +* It uses the same element as Modernizr (and Dojo). That feels nice. +* It can improve the clarity of code in multi-developer teams. + + +## The `no-js` class + +Allows you to more easily explicitly add custom styles when JavaScript is +disabled (`no-js`) or enabled (`js`). More here: [Avoiding the +FOUC](http://paulirish.com/2009/avoiding-the-fouc-v3/). + + +## The order of meta tags, and `` + +As recommended by [the HTML5 +spec](http://www.whatwg.org/specs/web-apps/current-work/complete/semantics.html#charset) +(4.2.5.5 Specifying the document's character encoding), add your charset +declaration early (before any ASCII art ;) to avoid a potential +[encoding-related security +issue](http://code.google.com/p/doctype/wiki/ArticleUtf7) in IE. It should come +in the first [1024 +bytes](http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset). + +The charset should also come before the `<title>` tag, due to [potential XSS +vectors](http://code.google.com/p/doctype-mirror/wiki/ArticleUtf7). + +The meta tag for compatibility mode [needs to be before all elements except +title and meta](http://h5bp.com/f "Defining Document Compatibility - MSDN"). +And that same meta tag can only be invoked for Google Chrome Frame if it is +within the [first 1024 +bytes](http://code.google.com/p/chromium/issues/detail?id=23003). + + +## X-UA-Compatible + +This makes sure the latest version of IE is used in versions of IE that contain +multiple rendering engines. Even if a site visitor is using IE8 or IE9, it's +possible that they're not using the latest rendering engine their browser +contains. To fix this, use: + +```html +<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> +``` + +The `meta` tag tells the IE rendering engine two things: + +1. It should use the latest, or edge, version of the IE rendering environment +2. If already installed, it should use the Google Chrome Frame rendering + engine. + +This `meta` tag ensures that anyone browsing your site in IE is treated to the +best possible user experience that their browser can offer. + +This line breaks validation, and the Google Chrome Frame part won't work inside +a conditional comment. To avoid these edge case issues it is recommended that +you **remove this line and use the `.htaccess`** (or other server config) +to send these headers instead. You also might want to read [Validating: +X-UA-Compatible](http://groups.google.com/group/html5boilerplate/browse_thread/thread/6d1b6b152aca8ed2). + +If you are serving your site on a non-standard port, you will need to set this +header on the server-side. This is because the IE preference option 'Display +intranet sites in Compatibility View' is checked by default. + + +## Mobile viewport + +There are a few different options that you can use with the [`viewport` meta +tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and +Media Queries - The Complete Idiot's Guide"). You can find out more in [the +Apple developer docs](http://j.mp/mobileviewport). HTML5 Boilerplate comes with +a simple setup that strikes a good balance for general use cases. + +```html +<meta name="viewport" content="width=device-width"> +``` + +## Favicons and Touch Icons + +The shortcut icons should be put in the root directory of your site. HTML5 +Boilerplate comes with a default set of icons (include favicon and Apple Touch +Icons) that you can use as a baseline to create your own. + +If your site or icons are in a sub-directory, you will need to reference the +icons using `link` elements placed in the HTML `head` of your document. + +For a comprehensive overview, please read [Everything you always wanted to know +about touch icons](http://mathiasbynens.be/notes/touch-icons) by Mathias +Bynens. + + +## Modernizr + +HTML5 Boilerplate uses a custom build of Modernizr. + +[Modernizr](http://modernizr.com) is a JavaScript library which adds classes to +the `html` element based on the results of feature test and which ensures that +all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). +This allows you to target parts of your CSS and JavaScript based on the +features supported by a browser. + +In general, in order to keep page load times to a minimum, it's best to call +any JavaScript at the end of the page because if a script is slow to load +from an external server it may cause the whole page to hang. That said, the +Modernizr script *needs* to run *before* the browser begins rendering the page, +so that browsers lacking support for some of the new HTML5 elements are able to +handle them properly. Therefore the Modernizr script is the only JavaScript +file synchronously loaded at the top of the document. + + +## The content area + +The central part of the boilerplate template is pretty much empty. This is +intentional, in order to make the boilerplate suitable for both web page and +web app development. + +### Google Chrome Frame + +The main content area of the boilerplate includes a prompt to install Chrome +Frame (which no longer requires administrative rights) for users of IE 6. If +you intended to support IE 6, then you should remove the snippet of code. + +### Google CDN for jQuery + +The Google CDN version of the jQuery JavaScript library is referenced towards +the bottom of the page using a protocol-independent path (read more about this +in the [FAQ](faq.md)). A local fallback of jQuery is included for rare instances +when the CDN version might not be available, and to facilitate offline +development. + +Regardless of which JavaScript library you choose to use, it is well worth the +time and effort to look up and reference the Google CDN (Content Delivery +Network) version. Your users may already have this version cached in their +browsers, and Google's CDN is likely to deliver the asset faster than your +server. + +### Google Analytics Tracking Code + +Finally, an optimized version of the latest Google Analytics tracking code is +included. Google recommends that this script be placed at the top of the page. +Factors to consider: if you place this script at the top of the page, you’ll be +able to count users who don’t fully load the page, and you’ll incur the max +number of simultaneous connections of the browser. + +Further information: + +* [Optimizing the asynchronous Google Analytics + snippet](http://mathiasbynens.be/notes/async-analytics-snippet). +* [Tracking Site Activity - Google + Analytics](http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html). diff --git a/sample/doc/js.md b/sample/doc/js.md new file mode 100755 index 0000000000..2781c984c5 --- /dev/null +++ b/sample/doc/js.md @@ -0,0 +1,31 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# The JavaScript + +Information about the default JavaScript included in the project. + +## main.js + +This file can be used to contain or reference your site/app JavaScript code. +For larger projects, you can make use of a JavaScript module loader, like +[Require.js](http://requirejs.org/), to load any other scripts you need to +run. + +## plugins.js + +This file can be used to contain all your plugins, such as jQuery plugins and +other 3rd party scripts. + +One approach is to put jQuery plugins inside of a `(function($){ ... +})(jQuery);` closure to make sure they're in the jQuery namespace safety +blanket. Read more about [jQuery plugin +authoring](http://docs.jquery.com/Plugins/Authoring#Getting_Started) + +## vendor + +This directory can be used to contain all 3rd party library code. + +Minified versions of the latest jQuery and Modernizr libraries are included by +default. You may wish to create your own [custom Modernizr +build](http://www.modernizr.com/download/). diff --git a/sample/doc/misc.md b/sample/doc/misc.md new file mode 100755 index 0000000000..865e3f050d --- /dev/null +++ b/sample/doc/misc.md @@ -0,0 +1,26 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Miscellaneous + +## .gitignore + +HTML5 Boilerplate includes a basic project-level `.gitignore`. This should +primarily be used to avoid certain project-level files and directories from +being kept under source control. Different development-environments will +benefit from different collections of ignores. + +OS-specific and editor-specific files should be ignored using a "global +ignore" that applies to all repositories on your system. + +For example, add the following to your `~/.gitconfig`, where the `.gitignore` +in your HOME directory contains the files and directories you'd like to +globally ignore: + +```gitignore +[core] + excludesfile = ~/.gitignore +``` + +* More on global ignores: http://help.github.com/ignore-files/ +* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore diff --git a/sample/doc/usage.md b/sample/doc/usage.md new file mode 100755 index 0000000000..058be356fc --- /dev/null +++ b/sample/doc/usage.md @@ -0,0 +1,109 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Usage + +Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app +usually involves the following: + +1. Set up the basic structure of the site. +2. Add some content, style, and functionality. +3. Run your site locally to see how it looks. +4. (Optionally run a build script to automate the optimization of your site - + e.g. [ant build script](https://github.com/h5bp/ant-build-script) or [node + build script](https://github.com/h5bp/node-build-script)). +5. Deploy your site. + + +## Basic structure + +A basic HTML5 Boilerplate site initially looks something like this: + +``` +. +├── css +│ ├── main.css +│ └── normalize.css +├── doc +├── img +├── js +│ ├── main.js +│ ├── plugins.js +│ └── vendor +│ ├── jquery.min.js +│ └── modernizr.min.js +├── .htaccess +├── 404.html +├── index.html +├── humans.txt +├── robots.txt +├── crossdomain.xml +├── favicon.ico +└── [apple-touch-icons] +``` + +What follows is a general overview of each major part and how to use them. + +### css + +This directory should contain all your project's CSS files. It includes some +initial CSS to help get you started from a solid foundation. [About the +CSS](css.md). + +### doc + +This directory contains all the HTML5 Boilerplate documentation. You can use it +as the location and basis for your own project's documentation. + +### js + +This directory should contain all your project's JS files. Libraries, plugins, +and custom code can all be included here. It includes some initial JS to help +get you started. [About the JavaScript](js.md). + +### .htaccess + +The default web server config is for Apache. [About the .htaccess](htaccess.md). + +Host your site on a server other than Apache? You're likely to find the +corresponding configuration file in our [server configs +repo](https://github.com/h5bp/server-configs). If you cannot find a +configuration file for your setup, please consider contributing one so that +others can benefit too. + +### 404.html + +A helpful custom 404 to get you started. + +### index.html + +This is the default HTML skeleton that should form the basis of all pages on +your site. If you are using a server-side templating framework, then you will +need to integrate this starting HTML with your setup. + +Make sure that you update the URLs for the referenced CSS and JavaScript if you +modify the directory structure at all. + +If you are using Google Analytics, make sure that you edit the corresponding +snippet at the bottom to include your analytics ID. + +### humans.txt + +Edit this file to include the team that worked on your site/app, and the +technology powering it. + +### robots.txt + +Edit this file to include any pages you need hidden from search engines. + +### crossdomain.xml + +A template for working with cross-domain requests. [About +crossdomain.xml](crossdomain.md). + +### icons + +Replace the default `favicon.ico` and apple touch icons with your own. You +might want to check out Hans Christian's handy [HTML5 Boilerplate Favicon and +Apple Touch Icon +PSD-Template](http://drublic.de/blog/html5-boilerplate-favicons-psd-template/). diff --git a/sample/img/.gitignore b/sample/img/.gitignore new file mode 100755 index 0000000000..e69de29bb2 diff --git a/sample/img/sprite.png b/sample/img/sprite.png new file mode 100644 index 0000000000..8f2bfc17eb Binary files /dev/null and b/sample/img/sprite.png differ diff --git a/sample/index.html b/sample/index.html new file mode 100644 index 0000000000..aec38c80c2 --- /dev/null +++ b/sample/index.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> +<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> +<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> +<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <title>Dustmoo Gridster Demo + + + + + + + + + + + + + +
+
    +
  • +
  • + +
  • +
  • + +
  • +
  • +
  • + +
  • +
  • + +
  • +
  • +
+
+ +
+

This demo represents using the branch in swap mode. This works best with shift_larger_widgets_down set to "false". However, smaller widgets do not displace larger ones.

+

For now, if you want the default shift down behavior I recommend using the standard gridster library.

+
+ + diff --git a/sample/js/main.js b/sample/js/main.js new file mode 100755 index 0000000000..8b13789179 --- /dev/null +++ b/sample/js/main.js @@ -0,0 +1 @@ + diff --git a/sample/js/plugins.js b/sample/js/plugins.js new file mode 100755 index 0000000000..728680b08d --- /dev/null +++ b/sample/js/plugins.js @@ -0,0 +1,24 @@ +// Avoid `console` errors in browsers that lack a console. +(function() { + var method; + var noop = function () {}; + var methods = [ + 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', + 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', + 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', + 'timeStamp', 'trace', 'warn' + ]; + var length = methods.length; + var console = (window.console = window.console || {}); + + while (length--) { + method = methods[length]; + + // Only stub undefined methods. + if (!console[method]) { + console[method] = noop; + } + } +}()); + +// Place any jQuery/helper plugins in here. diff --git a/sample/js/vendor/jquery-1.9.0.min.js b/sample/js/vendor/jquery-1.9.0.min.js new file mode 100755 index 0000000000..50d1b22f27 --- /dev/null +++ b/sample/js/vendor/jquery-1.9.0.min.js @@ -0,0 +1,4 @@ +/*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st("