diff --git a/css/gumby.css b/css/gumby.css index c51dcfb..6a1f392 100644 --- a/css/gumby.css +++ b/css/gumby.css @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset "CP850"; @import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); /** * Gumby Framework @@ -1666,6 +1666,23 @@ table.rounded thead ~ tr:last-child td:last-child, table.rounded tbody tr:last-c table.rounded thead ~ tr:last-child td:first-child, table.rounded tbody tr:last-child td:first-child { border-bottom-left-radius: 4px; } table.rounded thead th, table.rounded thead td, table.rounded caption + tbody tr:first-child td, table.rounded > tbody:first-child tr:first-child td { border-top: 0; } +/* Mobile first styles: Begin with the stacked presentation at narrow widths */ +@media only all { .reflow { /* Hide the table headers */ /* Show the table cells as a block level element */ /* Add a fair amount of top margin to visually separate each row when stacked */ } + .reflow thead td, .reflow thead th { display: none; } + .reflow td, .reflow th { text-align: left; display: block; font-size: 16px; font-size: 1rem; /* Make the label elements a percentage width */ /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */ } + .reflow td b.ui-table-cell-label, .reflow th b.ui-table-cell-label { padding: .4em; min-width: 30%; display: inline-block; margin: -.4em 1em -.4em -.4em; font-weight: bold; font-size: 18px; font-size: 1.125rem; } + .reflow td b.ui-table-cell-label-top, .reflow th b.ui-table-cell-label-top { display: block; padding: .4em 0; margin: .4em 0; text-transform: uppercase; font-size: 26px; font-size: 1.625rem; font-weight: normal; } + .reflow tbody th { margin-top: 3em; } } +@media (min-width: 730px) { .reflow { display: table-row-group; } + .reflow td, .reflow th { display: table-cell; margin: 0; } + .reflow td .ui-table-cell-label, .reflow th .ui-table-cell-label { display: none; } + .reflow tbody td, .reflow tbody th { display: table-cell; margin: 0; } + .reflow tbody td .ui-table-cell-label, .reflow tbody th .ui-table-cell-label { display: none; } + .reflow thead td, .reflow thead th { display: table-cell; margin: 0; } + .reflow thead td .ui-table-cell-label, .reflow thead th .ui-table-cell-label { display: none; } } +/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */ +/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/ +@media (max-width: 730px) { .ui-table-reflow td, .ui-table-reflow th { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; clear: left; } } /* Tooltips */ .ttip { position: relative; cursor: pointer; } .ttip:after { display: block; background: #3085d6; border: 1px solid #3085d6; border-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 0.5em 0.75em; width: auto; min-width: 130px; max-width: 500px; position: absolute; left: 0; bottom: 101%; margin-bottom: 8px; text-align: left; color: #fff; content: attr(data-tooltip); line-height: 1.5; font-size: 16px; font-weight: normal; font-style: normal; -webkit-transition: opacity 0.1s ease; -moz-transition: opacity 0.1s ease; -o-transition: opacity 0.1s ease; transition: opacity 0.1s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #65a4e1), color-stop(100%, #3085d6)); background-image: -webkit-linear-gradient(top, #65a4e1, #3085d6); background-image: -moz-linear-gradient(top, #65a4e1, #3085d6); background-image: -o-linear-gradient(top, #65a4e1, #3085d6); background-image: linear-gradient(top, #65a4e1, #3085d6); -webkit-box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); -moz-box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); } diff --git a/gumby.min.js b/gumby.min.js index cdf4167..55535df 100644 --- a/gumby.min.js +++ b/gumby.min.js @@ -1 +1 @@ -!function(t){"use strict";function i(){this.$dom=t(document),this.$html=this.$dom.find("html"),this.isOldie=!!this.$html.hasClass("oldie"),this.click="click",this.onReady=this.onOldie=this.onTouch=!1,this.autoInit="false"===t("script[gumby-init]").attr("gumby-init")?!1:!0,this.debugMode=Boolean(t("script[gumby-debug]").length),this.touchDevice=!!(Modernizr.touch||window.navigator.userAgent.indexOf("Windows Phone")>0),this.gumbyTouch=!1,this.touchEvents="js/libs",this.breakpoint=Number(t("script[gumby-breakpoint]").attr("gumby-breakpoint"))||768,this.touchEventsLoaded=!1,this.uiModulesReady=!1,this.uiModules={},this.inits={};var i=t("script[gumby-touch]").attr("gumby-touch"),e=t("script[gumby-path]").attr("gumby-path");"false"===i?this.touchEvents=!1:i?this.touchEvents=i:e&&(this.touchEvents=e),this.touchDevice&&(this.click+=" tap"),this.touchDevice&&t(window).width()1?Array.prototype.slice.call(i):i[0])},i.prototype.log=function(){this.console("log",arguments)},i.prototype.debug=function(){this.console("debug",arguments)},i.prototype.warn=function(){this.console("warn",arguments)},i.prototype.error=function(){this.console("error",arguments)},i.prototype.dump=function(){return{$dom:this.$dom,isOldie:this.isOldie,touchEvents:this.touchEvents,debugMode:this.debugMode,autoInit:this.autoInit,uiModules:this.uiModules,click:this.click}},i.prototype.selectAttr=function(){for(var t=0;t'),this.$input.prop("checked",!0),Gumby.debug("Triggering onCheck event",this.$el),Gumby.debug("Triggering onChange event",this.$el),this.$el.addClass("checked").trigger("gumby.onCheck").trigger("gumby.onChange")):(Gumby.debug("Unchecking Checkbox",this.$el),this.$input.prop("checked",!1),i.find("i").remove(),Gumby.debug("Triggering onUncheck event",this.$el),Gumby.debug("Triggering onChange event",this.$el),this.$el.removeClass("checked").trigger("gumby.onUncheck").trigger("gumby.onChange"))},Gumby.addInitalisation("checkbox",function(){t(".checkbox").each(function(){var e=t(this);return e.data("isCheckbox")?!0:(e.data("isCheckbox",!0),new i(e),void 0)})}),Gumby.UIModule({module:"checkbox",events:["onCheck","onUncheck","onChange","check","uncheck"],init:function(){Gumby.initialize("checkbox")}})}(jQuery),!function(t){"use strict";function i(i){Gumby.debug("Initializing Fixed Position",i),this.$el=i,this.$window=t(window),this.fixedPoint="",this.pinPoint=!1,this.fixedPointjQ=!1,this.pinPointjQ=!1,this.offset=0,this.pinOffset=0,this.top=0,this.constrainEl=!0,this.state=!1,this.measurements={left:0,width:0},this.setup();var e=this;this.$window.on("scroll load",function(){e.monitorScroll()}),this.$el.on("gumby.initialize",function(){Gumby.debug("Re-initializing Fixed Position",i),e.setup(),e.monitorScroll()})}i.prototype.setup=function(){var t=this;this.fixedPoint=this.parseAttrValue(Gumby.selectAttr.apply(this.$el,["fixed"])),this.pinPoint=Gumby.selectAttr.apply(this.$el,["pin"])||!1,this.offset=Number(Gumby.selectAttr.apply(this.$el,["offset"]))||0,this.pinOffset=Number(Gumby.selectAttr.apply(this.$el,["pinoffset"]))||0,this.top=Number(Gumby.selectAttr.apply(this.$el,["top"]))||0,this.constrainEl=Gumby.selectAttr.apply(this.$el,["constrain"])||!0,"false"===this.constrainEl&&(this.constrainEl=!1),this.$parent=this.$el.parents(".columns, .column, .row"),this.$parent=this.$parent.length?this.$parent.first():!1,this.parentRow=this.$parent?!!this.$parent.hasClass("row"):!1,this.pinPoint&&(this.pinPoint=this.parseAttrValue(this.pinPoint)),this.fixedPointjQ=this.fixedPoint instanceof jQuery,this.pinPointjQ=this.pinPoint instanceof jQuery,this.$parent&&this.constrainEl&&(this.measure(),this.$window.resize(function(){t.state&&(t.measure(),t.constrain())}))},i.prototype.monitorScroll=function(){var t=this.$window.scrollTop(),i=this.fixedPointjQ?this.fixedPoint.offset().top:this.fixedPoint,e=!1;this.pinPoint&&(e=this.pinPointjQ?this.pinPoint.offset().top:this.pinPoint),this.offset&&(i-=this.offset),this.pinOffset&&(e-=this.pinOffset),t>=i&&"fixed"!==this.state?(!e||e>t)&&this.fix():i>t&&"fixed"===this.state?this.unfix():e&&t>=e&&"pinned"!==this.state&&this.pin()},i.prototype.fix=function(){Gumby.debug("Element has been fixed",this.$el),Gumby.debug("Triggering onFixed event",this.$el),this.state="fixed",this.$el.css({top:this.top}).addClass("fixed").removeClass("unfixed pinned").trigger("gumby.onFixed"),this.$parent&&this.constrain()},i.prototype.unfix=function(){Gumby.debug("Element has been unfixed",this.$el),Gumby.debug("Triggering onUnfixed event",this.$el),this.state="unfixed",this.$el.addClass("unfixed").removeClass("fixed pinned").trigger("gumby.onUnfixed")},i.prototype.pin=function(){Gumby.debug("Element has been pinned",this.$el),Gumby.debug("Triggering onPinned event",this.$el),this.state="pinned",this.$el.css({top:this.$el.offset().top}).addClass("pinned fixed").removeClass("unfixed").trigger("gumby.onPinned")},i.prototype.constrain=function(){Gumby.debug("Constraining element",this.$el),this.$el.css({left:this.measurements.left,width:this.measurements.width})},i.prototype.measure=function(){var t;this.measurements.left=this.$parent.offset().left,this.measurements.width=this.$parent.width(),this.parentRow&&(t=Number(this.$parent.css("paddingLeft").replace(/px/,"")),t&&(this.measurements.left+=t))},i.prototype.parseAttrValue=function(i){if(t.isNumeric(i))return Number(i);if("top"===i)return this.$el.offset().top;var e=t(i);return e.length?e:(Gumby.error("Cannot find Fixed target: "+i),!1)},Gumby.addInitalisation("fixed",function(e){t("[data-fixed],[gumby-fixed],[fixed]").each(function(){var n=t(this);return n.data("isFixed")&&!e?!0:n.data("isFixed")&&e?(n.trigger("gumby.initialize"),!0):(n.data("isFixed",!0),new i(n),void 0)})}),Gumby.UIModule({module:"fixed",events:["initialize","onFixed","onUnfixed"],init:function(){Gumby.initialize("fixed")}})}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing Navbar",t),this.$el=t,this.$dropDowns=this.$el.find("li:has(.dropdown)");var i=this,e=this.$el.attr("gumby-persist");"undefined"==typeof e&&"false"!==e&&this.$el.find("li:not(:has(.dropdown)) a").on(Gumby.click,function(){i.$el.find("ul").removeClass("active")}),this.$dropDowns.on(Gumby.click,this.toggleDropdown).on("swiperight",this.openLink),"#"!==this.$dropDowns.children("a").attr("href")&&this.$dropDowns.children("a").append('').children("i").on(Gumby.click,this.openLink),this.$dropDowns.find(".dropdown li:not(:has(.dropdown)) a[href]").on(Gumby.click,this.openLink)}Gumby.gumbyTouch&&(i.prototype.toggleDropdown=function(i){if(i.preventDefault(),!t(i.target).is("i")){var e=t(this);e.hasClass("active")?e.removeClass("active"):e.addClass("active")}},i.prototype.openLink=function(i){i.preventDefault();var e,n=t(this),s=n;n.is("i")?s=n.parent("a"):n.is("li")&&(s=n.children("a")),e=s.attr("href"),"blank"==s.attr("target")?window.open(e):window.location=e},Gumby.addInitalisation("navbar",function(){t(".navbar").each(function(){var e=t(this);return e.data("isNavbar")?!0:(e.data("isNavbar",!0),new i(e),void 0)})}),Gumby.UIModule({module:"navbar",events:[],init:function(){Gumby.initialize("navbar")}}))}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing Radio Button",t),this.$el=t,this.$input=this.$el.find("input[type=radio]");var i=this;this.$el.on(Gumby.click,function(t){t.preventDefault(),i.$input.is("[disabled]")||i.update()}).on("gumby.check",function(){Gumby.debug("Check event triggered",i.$el),i.update()}),(this.$input.prop("checked")||this.$el.hasClass("checked"))&&i.update(!0)}i.prototype.update=function(){if(!(this.$el.hasClass("checked")&&this.$input.prop("checked")&&this.$el.find("i.icon-dot").length)){Gumby.debug("Updating Radio Button group",this.$el);var i=this.$el.find("span"),e='input[name="'+this.$input.attr("name")+'"]';t(".radio").has(e).removeClass("checked").find("input").prop("checked",!1).end().find("i").remove(),this.$input.prop("checked",!0),i.append(''),Gumby.debug("Triggering onCheck event",this.$el),this.$el.addClass("checked").trigger("gumby.onCheck")}},Gumby.addInitalisation("radiobtn",function(){t(".radio").each(function(){var e=t(this);return e.data("isRadioBtn")?!0:(e.data("isRadioBtn",!0),new i(e),void 0)})}),Gumby.UIModule({module:"radiobtn",events:["onCheck","check"],init:function(){Gumby.initialize("radiobtn")}})}(jQuery),!function(t){"use strict";function i(i){Gumby.debug("Initializing Retina",i),this.$el=i,this.imageSrc=this.$el.attr("src"),this.retinaSrc=this.fetchRetinaImage(),this.$retinaImg=t(new Image);var e=this;return this.retinaSrc?(this.$retinaImg.attr("src",this.retinaSrc).load(function(){e.retinaImageLoaded()}).error(function(){Gumby.error("Couln't load retina image: "+e.retinaSrc)}),void 0):!1}i.prototype.fetchRetinaImage=function(){var t=this.imageSrc,i=this.imageSrc.search(/(\.|\/)(gif|jpe?g|png)$/i);return 0>i?!1:t.substr(0,i)+"@2x"+t.substr(i,t.length)},i.prototype.retinaImageLoaded=function(){Gumby.debug("Swapping image for retina version",this.$el),Gumby.debug("Triggering onRetina event",this.$el),this.$el.attr("src",this.$retinaImg.attr("src")).trigger("gumby.onRetina")},Gumby.addInitalisation("retina",function(){!window.devicePixelRatio||window.devicePixelRatio<=1||t("img[data-retina],img[gumby-retina],img[retina]").each(function(){var e=t(this);return e.data("isRetina")?!0:(e.data("isRetina",!0),new i(e),void 0)})}),Gumby.UIModule({module:"retina",events:["onRetina"],init:function(){Gumby.initialize("retina")}})}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing Skiplink",t),this.$el=t,this.targetPos=0,this.duration=0,this.offset=!1,this.easing="",this.update=!1,this.setup();var i=this;this.$el.on(Gumby.click+" gumby.skip",function(t){t.preventDefault(),"skip"===t.namespace&&Gumby.debug("Skip event triggered",i.$el),i.update?i.calculateTarget(i.skipTo):i.skipTo()}).on("gumby.initialize",function(){Gumby.debug("Re-initializing Skiplink",i.$el),i.setup()})}i.prototype.setup=function(){this.duration=Number(Gumby.selectAttr.apply(this.$el,["duration"]))||200,this.offset=Gumby.selectAttr.apply(this.$el,["offset"])||!1,this.easing=Gumby.selectAttr.apply(this.$el,["easing"])||"swing",this.update=Gumby.selectAttr.apply(this.$el,["update"])?!0:!1,this.calculateTarget()},i.prototype.calculateTarget=function(i){var e,n=Gumby.selectAttr.apply(this.$el,["goto"]);if("top"==n)this.targetPos=0;else if(t.isNumeric(n))this.targetPos=Number(n);else{if(e=t(n),!e.length)return Gumby.error("Cannot find skiplink target: "+n),!1;this.targetPos=e.offset().top}i&&i.apply(this)},i.prototype.skipTo=function(){Gumby.debug("Skipping to target",this.$el);var i=this;t("html,body").animate({scrollTop:this.calculateOffset()},this.duration,this.easing).promise().done(function(){Gumby.debug("Triggering onComplete event",i.$el),i.$el.trigger("gumby.onComplete")})},i.prototype.calculateOffset=function(){if(!this.offset)return this.targetPos;var t=this.offset.substr(0,1),i=Number(this.offset.substr(1,this.offset.length));return"-"===t?this.targetPos-i:"+"===t?this.targetPos+i:void 0},Gumby.addInitalisation("skiplink",function(e){t(".skiplink > a, .skip").each(function(){var n=t(this);return n.data("isSkipLink")&&!e?!0:n.data("isSkipLink")&&e?(n.trigger("gumby.initialize"),!0):(n.data("isSkipLink",!0),new i(n),void 0)})}),Gumby.UIModule({module:"skiplink",events:["initialize","onComplete","skip"],init:function(){Gumby.initialize("skiplink")}})}(jQuery),!function(t){"use strict";function i(i){Gumby.debug("Initializing Tabs",i),this.$el=i,this.$nav=this.$el.find("ul.tab-nav > li"),this.$content=this.$el.find(".tab-content");var e=this;this.$nav.children("a").on(Gumby.click,function(i){i.preventDefault(),e.click(t(this))}),this.$el.on("gumby.set",function(t,i){Gumby.debug("Set event triggered",e.$el),e.set(t,i)})}i.prototype.click=function(t){var i=t.parent().index();this.$nav.eq(i).add(this.$content.eq(i)).hasClass("active")||(Gumby.debug("Setting active tab to "+i,this.$el),this.$nav.add(this.$content).removeClass("active"),this.$nav.eq(i).add(this.$content.eq(i)).addClass("active"),Gumby.debug("Triggering onChange event",this.$el),this.$el.trigger("gumby.onChange",i))},i.prototype.set=function(t,i){this.$nav.eq(i).find("a").trigger(Gumby.click)},Gumby.addInitalisation("tabs",function(){t(".tabs").each(function(){var e=t(this);return e.data("isTabs")?!0:(e.data("isTabs",!0),new i(e),void 0)})}),Gumby.UIModule({module:"tabs",events:["onChange","set"],init:function(){Gumby.initialize("tabs")}})}(jQuery),!function(t){"use strict";function i(i){this.$el=t(i),this.targets=[],this.on="",this.className="",this.self=!1,this.$el.length&&(Gumby.debug("Initializing Toggle",i),this.init())}function e(i){this.$el=t(i),this.targets=[],this.on="",this.className="",this.self=!1,this.$el.length&&(Gumby.debug("Initializing Switch",i),this.init())}i.prototype.init=function(){var t=this;this.setup(),this.$el.on(this.on,function(i){i.preventDefault(),t.trigger(t.triggered)}).on("gumby.trigger",function(){Gumby.debug("Trigger event triggered",t.$el),t.trigger(t.triggered)}).on("gumby.initialize",function(){Gumby.debug("Re-initializing "+t.constructor,$el),t.setup()})},i.prototype.setup=function(){this.targets=this.parseTargets(),this.on=Gumby.selectAttr.apply(this.$el,["on"])||Gumby.click,this.className=Gumby.selectAttr.apply(this.$el,["classname"])||"active",this.self="false"===Gumby.selectAttr.apply(this.$el,["self"])},i.prototype.parseTargets=function(){var i=Gumby.selectAttr.apply(this.$el,["trigger"]),e=0,n=[];return i?(e=i.indexOf("|"),-1===e?this.checkTargets([i])?[t(i)]:!1:(n=i.split("|"),this.checkTargets(n)?n.length>1?[t(n[0]),t(n[1])]:[t(n[0])]:!1)):!1},i.prototype.checkTargets=function(i){var e=0;for(e;e1&&(this.targets[0].hasClass(this.className)?(i=this.targets[0],this.self||(i=i.add(this.$el)),i.removeClass(this.className),this.targets[1].addClass(this.className)):(i=this.targets[0],this.self||(i=i.add(this.$el)),i.addClass(this.className),this.targets[1].removeClass(this.className))):this.$el.toggleClass(this.className),t&&"function"==typeof t&&t.apply(this)},e.prototype.trigger=function(t){Gumby.debug("Triggering Switch",this.$el);var i;this.targets?1==this.targets.length?(i=this.targets[0],this.self||(i=i.add(this.$el)),i.addClass(this.className)):this.targets.length>1&&(i=this.targets[0],this.self||(i=i.add(this.$el)),i.addClass(this.className),this.targets[1].removeClass(this.className)):this.$el.addClass(this.className),t&&"function"==typeof t&&t.apply(this)},Gumby.addInitalisation("toggles",function(e){t(".toggle").each(function(){var n=t(this);return n.data("isToggle")&&!e?!0:(n.data("isToggle")&&e&&n.trigger("gumby.initialize"),n.data("isToggle",!0),new i(n),void 0)})}),Gumby.addInitalisation("switches",function(i){t(".switch").each(function(){var n=t(this);return n.data("isSwitch")&&!i?!0:n.data("isSwitch")&&i?(n.trigger("gumby.initialize"),!0):(n.data("isSwitch",!0),new e(n),void 0)})}),Gumby.UIModule({module:"toggleswitch",events:["initialize","trigger","onTrigger"],init:function(){Gumby.initialize("switches"),Gumby.initialize("toggles")}})}(jQuery),!function(t){"use strict";function i(t,i){Gumby&&Gumby.debug("Initializing Validation",t),this.$this=t,this.$field=this.$this.parents(".field"),this.req=i||function(){return!!this.$this.val().length};var e=this;this.$this.is("[type=checkbox], [type=radio]")?(this.$field=this.$this.parent("label"),this.$field.on("gumby.onChange",function(){e.validate()})):this.$this.is("select")?(this.$field=this.$this.parents(".picker"),this.$field.on("change",function(){e.validate()})):this.$this.on("blur",function(t){9!==t.which&&e.validate()})}i.prototype.validate=function(){var t=this.req(this.$this);return t?this.$field.removeClass("danger").addClass("success"):this.$field.removeClass("success").addClass("danger"),t},t.fn.validation=function(e){var n=t.extend({submit:!1,fail:!1,required:[]},e),s=[];return this.each(function(){if(!n.required.length)return!1;var e,o=t(this),a=n.required.length;for(e=0;a>e;e++)s.push(new i(o.find('[name="'+n.required[e].name+'"]'),n.required[e].validate||!1));o.on("submit",function(t){var i=!1;if(!o.data("passed")){t.preventDefault();var e,a=s.length;for(e=0;a>e;e++)s[e].validate()||(i=!0);if(i){if(n.fail&&"function"==typeof n.fail)return n.fail(),void 0}else{if(n.submit&&"function"==typeof n.submit)return n.submit(o.serializeArray()),void 0;o.data("passed",!0).submit()}}})})}}(jQuery),!function(t){"use strict";Gumby.touchDevice&&Gumby.touchEvents||!Gumby.autoInit?Gumby.touchEvents&&Gumby.touchDevice&&(Gumby.debug("Loading jQuery mobile touch events"),yepnope.errorTimeout=2e3,Modernizr.load({test:Modernizr.touch,yep:Gumby.touchEvents+"/jquery.mobile.custom.min.js",complete:function(){t.mobile||Gumby.error("Error loading jQuery mobile touch events"),Gumby.touchEventsLoaded=!0,Gumby.autoInit?window.Gumby.init():Gumby.uiModulesReady&&Gumby.helpers()}})):window.Gumby.init(),"function"==typeof define&&define.amd&&define(window.Gumby)}(jQuery); \ No newline at end of file +!function(t){"use strict";function i(){this.$dom=t(document),this.$html=this.$dom.find("html"),this.isOldie=!!this.$html.hasClass("oldie"),this.click="click",this.onReady=this.onOldie=this.onTouch=!1,this.autoInit="false"===t("script[gumby-init]").attr("gumby-init")?!1:!0,this.debugMode=Boolean(t("script[gumby-debug]").length),this.touchDevice=!!(Modernizr.touch||window.navigator.userAgent.indexOf("Windows Phone")>0),this.gumbyTouch=!1,this.touchEvents="js/libs",this.breakpoint=Number(t("script[gumby-breakpoint]").attr("gumby-breakpoint"))||768,this.touchEventsLoaded=!1,this.uiModulesReady=!1,this.uiModules={},this.inits={};var i=t("script[gumby-touch]").attr("gumby-touch"),e=t("script[gumby-path]").attr("gumby-path");"false"===i?this.touchEvents=!1:i?this.touchEvents=i:e&&(this.touchEvents=e),this.touchDevice&&(this.click+=" tap"),this.touchDevice&&t(window).width()1?Array.prototype.slice.call(i):i[0])},i.prototype.log=function(){this.console("log",arguments)},i.prototype.debug=function(){this.console("debug",arguments)},i.prototype.warn=function(){this.console("warn",arguments)},i.prototype.error=function(){this.console("error",arguments)},i.prototype.dump=function(){return{$dom:this.$dom,isOldie:this.isOldie,touchEvents:this.touchEvents,debugMode:this.debugMode,autoInit:this.autoInit,uiModules:this.uiModules,click:this.click}},i.prototype.selectAttr=function(){for(var t=0;t'),this.$input.prop("checked",!0),Gumby.debug("Triggering onCheck event",this.$el),Gumby.debug("Triggering onChange event",this.$el),this.$el.addClass("checked").trigger("gumby.onCheck").trigger("gumby.onChange")):(Gumby.debug("Unchecking Checkbox",this.$el),this.$input.prop("checked",!1),i.find("i").remove(),Gumby.debug("Triggering onUncheck event",this.$el),Gumby.debug("Triggering onChange event",this.$el),this.$el.removeClass("checked").trigger("gumby.onUncheck").trigger("gumby.onChange"))},Gumby.addInitalisation("checkbox",function(){t(".checkbox").each(function(){var e=t(this);return e.data("isCheckbox")?!0:(e.data("isCheckbox",!0),new i(e),void 0)})}),Gumby.UIModule({module:"checkbox",events:["onCheck","onUncheck","onChange","check","uncheck"],init:function(){Gumby.initialize("checkbox")}})}(jQuery),!function(t){"use strict";function i(i){Gumby.debug("Initializing Fixed Position",i),this.$el=i,this.$window=t(window),this.fixedPoint="",this.pinPoint=!1,this.fixedPointjQ=!1,this.pinPointjQ=!1,this.offset=0,this.pinOffset=0,this.top=0,this.constrainEl=!0,this.state=!1,this.measurements={left:0,width:0},this.setup();var e=this;this.$window.on("scroll load",function(){e.monitorScroll()}),this.$el.on("gumby.initialize",function(){Gumby.debug("Re-initializing Fixed Position",i),e.setup(),e.monitorScroll()})}i.prototype.setup=function(){var t=this;this.fixedPoint=this.parseAttrValue(Gumby.selectAttr.apply(this.$el,["fixed"])),this.pinPoint=Gumby.selectAttr.apply(this.$el,["pin"])||!1,this.offset=Number(Gumby.selectAttr.apply(this.$el,["offset"]))||0,this.pinOffset=Number(Gumby.selectAttr.apply(this.$el,["pinoffset"]))||0,this.top=Number(Gumby.selectAttr.apply(this.$el,["top"]))||0,this.constrainEl=Gumby.selectAttr.apply(this.$el,["constrain"])||!0,"false"===this.constrainEl&&(this.constrainEl=!1),this.$parent=this.$el.parents(".columns, .column, .row"),this.$parent=this.$parent.length?this.$parent.first():!1,this.parentRow=this.$parent?!!this.$parent.hasClass("row"):!1,this.pinPoint&&(this.pinPoint=this.parseAttrValue(this.pinPoint)),this.fixedPointjQ=this.fixedPoint instanceof jQuery,this.pinPointjQ=this.pinPoint instanceof jQuery,this.$parent&&this.constrainEl&&(this.measure(),this.$window.resize(function(){t.state&&(t.measure(),t.constrain())}))},i.prototype.monitorScroll=function(){var t=this.$window.scrollTop(),i=this.fixedPointjQ?this.fixedPoint.offset().top:this.fixedPoint,e=!1;this.pinPoint&&(e=this.pinPointjQ?this.pinPoint.offset().top:this.pinPoint),this.offset&&(i-=this.offset),this.pinOffset&&(e-=this.pinOffset),t>=i&&"fixed"!==this.state?(!e||e>t)&&this.fix():i>t&&"fixed"===this.state?this.unfix():e&&t>=e&&"pinned"!==this.state&&this.pin()},i.prototype.fix=function(){Gumby.debug("Element has been fixed",this.$el),Gumby.debug("Triggering onFixed event",this.$el),this.state="fixed",this.$el.css({top:this.top}).addClass("fixed").removeClass("unfixed pinned").trigger("gumby.onFixed"),this.$parent&&this.constrain()},i.prototype.unfix=function(){Gumby.debug("Element has been unfixed",this.$el),Gumby.debug("Triggering onUnfixed event",this.$el),this.state="unfixed",this.$el.addClass("unfixed").removeClass("fixed pinned").trigger("gumby.onUnfixed")},i.prototype.pin=function(){Gumby.debug("Element has been pinned",this.$el),Gumby.debug("Triggering onPinned event",this.$el),this.state="pinned",this.$el.css({top:this.$el.offset().top}).addClass("pinned fixed").removeClass("unfixed").trigger("gumby.onPinned")},i.prototype.constrain=function(){Gumby.debug("Constraining element",this.$el),this.$el.css({left:this.measurements.left,width:this.measurements.width})},i.prototype.measure=function(){var t;this.measurements.left=this.$parent.offset().left,this.measurements.width=this.$parent.width(),this.parentRow&&(t=Number(this.$parent.css("paddingLeft").replace(/px/,"")),t&&(this.measurements.left+=t))},i.prototype.parseAttrValue=function(i){if(t.isNumeric(i))return Number(i);if("top"===i)return this.$el.offset().top;var e=t(i);return e.length?e:(Gumby.error("Cannot find Fixed target: "+i),!1)},Gumby.addInitalisation("fixed",function(e){t("[data-fixed],[gumby-fixed],[fixed]").each(function(){var n=t(this);return n.data("isFixed")&&!e?!0:n.data("isFixed")&&e?(n.trigger("gumby.initialize"),!0):(n.data("isFixed",!0),new i(n),void 0)})}),Gumby.UIModule({module:"fixed",events:["initialize","onFixed","onUnfixed"],init:function(){Gumby.initialize("fixed")}})}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing Navbar",t),this.$el=t,this.$dropDowns=this.$el.find("li:has(.dropdown)");var i=this,e=this.$el.attr("gumby-persist");"undefined"==typeof e&&"false"!==e&&this.$el.find("li:not(:has(.dropdown)) a").on(Gumby.click,function(){i.$el.find("ul").removeClass("active")}),this.$dropDowns.on(Gumby.click,this.toggleDropdown).on("swiperight",this.openLink),"#"!==this.$dropDowns.children("a").attr("href")&&this.$dropDowns.children("a").append('').children("i").on(Gumby.click,this.openLink),this.$dropDowns.find(".dropdown li:not(:has(.dropdown)) a[href]").on(Gumby.click,this.openLink)}Gumby.gumbyTouch&&(i.prototype.toggleDropdown=function(i){if(i.preventDefault(),!t(i.target).is("i")){var e=t(this);e.hasClass("active")?e.removeClass("active"):e.addClass("active")}},i.prototype.openLink=function(i){i.preventDefault();var e,n=t(this),s=n;n.is("i")?s=n.parent("a"):n.is("li")&&(s=n.children("a")),e=s.attr("href"),"blank"==s.attr("target")?window.open(e):window.location=e},Gumby.addInitalisation("navbar",function(){t(".navbar").each(function(){var e=t(this);return e.data("isNavbar")?!0:(e.data("isNavbar",!0),new i(e),void 0)})}),Gumby.UIModule({module:"navbar",events:[],init:function(){Gumby.initialize("navbar")}}))}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing Radio Button",t),this.$el=t,this.$input=this.$el.find("input[type=radio]");var i=this;this.$el.on(Gumby.click,function(t){t.preventDefault(),i.$input.is("[disabled]")||i.update()}).on("gumby.check",function(){Gumby.debug("Check event triggered",i.$el),i.update()}),(this.$input.prop("checked")||this.$el.hasClass("checked"))&&i.update(!0)}i.prototype.update=function(){if(!(this.$el.hasClass("checked")&&this.$input.prop("checked")&&this.$el.find("i.icon-dot").length)){Gumby.debug("Updating Radio Button group",this.$el);var i=this.$el.find("span"),e='input[name="'+this.$input.attr("name")+'"]';t(".radio").has(e).removeClass("checked").find("input").prop("checked",!1).end().find("i").remove(),this.$input.prop("checked",!0),i.append(''),Gumby.debug("Triggering onCheck event",this.$el),this.$el.addClass("checked").trigger("gumby.onCheck")}},Gumby.addInitalisation("radiobtn",function(){t(".radio").each(function(){var e=t(this);return e.data("isRadioBtn")?!0:(e.data("isRadioBtn",!0),new i(e),void 0)})}),Gumby.UIModule({module:"radiobtn",events:["onCheck","check"],init:function(){Gumby.initialize("radiobtn")}})}(jQuery),!function(t){"use strict";function i(i){Gumby.debug("Initializing Retina",i),this.$el=i,this.imageSrc=this.$el.attr("src"),this.retinaSrc=this.fetchRetinaImage(),this.$retinaImg=t(new Image);var e=this;return this.retinaSrc?(this.$retinaImg.attr("src",this.retinaSrc).load(function(){e.retinaImageLoaded()}).error(function(){Gumby.error("Couln't load retina image: "+e.retinaSrc)}),void 0):!1}i.prototype.fetchRetinaImage=function(){var t=this.imageSrc,i=this.imageSrc.search(/(\.|\/)(gif|jpe?g|png)$/i);return 0>i?!1:t.substr(0,i)+"@2x"+t.substr(i,t.length)},i.prototype.retinaImageLoaded=function(){Gumby.debug("Swapping image for retina version",this.$el),Gumby.debug("Triggering onRetina event",this.$el),this.$el.attr("src",this.$retinaImg.attr("src")).trigger("gumby.onRetina")},Gumby.addInitalisation("retina",function(){!window.devicePixelRatio||window.devicePixelRatio<=1||t("img[data-retina],img[gumby-retina],img[retina]").each(function(){var e=t(this);return e.data("isRetina")?!0:(e.data("isRetina",!0),new i(e),void 0)})}),Gumby.UIModule({module:"retina",events:["onRetina"],init:function(){Gumby.initialize("retina")}})}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing Skiplink",t),this.$el=t,this.targetPos=0,this.duration=0,this.offset=!1,this.easing="",this.update=!1,this.setup();var i=this;this.$el.on(Gumby.click+" gumby.skip",function(t){t.preventDefault(),"skip"===t.namespace&&Gumby.debug("Skip event triggered",i.$el),i.update?i.calculateTarget(i.skipTo):i.skipTo()}).on("gumby.initialize",function(){Gumby.debug("Re-initializing Skiplink",i.$el),i.setup()})}i.prototype.setup=function(){this.duration=Number(Gumby.selectAttr.apply(this.$el,["duration"]))||200,this.offset=Gumby.selectAttr.apply(this.$el,["offset"])||!1,this.easing=Gumby.selectAttr.apply(this.$el,["easing"])||"swing",this.update=Gumby.selectAttr.apply(this.$el,["update"])?!0:!1,this.calculateTarget()},i.prototype.calculateTarget=function(i){var e,n=Gumby.selectAttr.apply(this.$el,["goto"]);if("top"==n)this.targetPos=0;else if(t.isNumeric(n))this.targetPos=Number(n);else{if(e=t(n),!e.length)return Gumby.error("Cannot find skiplink target: "+n),!1;this.targetPos=e.offset().top}i&&i.apply(this)},i.prototype.skipTo=function(){Gumby.debug("Skipping to target",this.$el);var i=this;t("html,body").animate({scrollTop:this.calculateOffset()},this.duration,this.easing).promise().done(function(){Gumby.debug("Triggering onComplete event",i.$el),i.$el.trigger("gumby.onComplete")})},i.prototype.calculateOffset=function(){if(!this.offset)return this.targetPos;var t=this.offset.substr(0,1),i=Number(this.offset.substr(1,this.offset.length));return"-"===t?this.targetPos-i:"+"===t?this.targetPos+i:void 0},Gumby.addInitalisation("skiplink",function(e){t(".skiplink > a, .skip").each(function(){var n=t(this);return n.data("isSkipLink")&&!e?!0:n.data("isSkipLink")&&e?(n.trigger("gumby.initialize"),!0):(n.data("isSkipLink",!0),new i(n),void 0)})}),Gumby.UIModule({module:"skiplink",events:["initialize","onComplete","skip"],init:function(){Gumby.initialize("skiplink")}})}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing TableReflow",t),this.$el=t,this.cellLabels="ui-table-cell-label";var i=this;i.refresh(),i.updateReflow()}i.prototype.getAttribute=function(t,i){var e;t=t.jquery?t[0]:t,t&&t.getAttribute&&(e=t.getAttribute("gumby-"+i));try{e="true"===e?!0:"false"===e?!1:"null"===e?null:+e+""===e?+e:rbrace.test(e)?JSON.parse(e):e}catch(n){}return e},i.prototype.setHeaders=function(){var t=this.$el.find("thead tr");this.headers=this.$el.find("tr:eq(0)").children(),this.allHeaders=this.headers.add(t.children())},i.prototype.refresh=function(){var i=this.$el,e=i.find("thead tr");this.setHeaders(),e.each(function(){var n=0;t(this).children().each(function(){var s,o=parseInt(this.getAttribute("colspan"),10),a=":nth-child("+(n+1)+")";if(this.setAttribute("gumby-colstart",n+1),o)for(s=0;o-1>s;s++)n++,a+=", :nth-child("+(n+1)+")";t(this).data("cells",i.find("tr").not(e.eq(0)).not(this).children(a)),n++})})},i.prototype.updateReflow=function(){var i=this;t(i.allHeaders.get().reverse()).each(function(){var e,n,s=t(this).data("cells"),o=i.getAttribute(this,"colstart"),a=s.not(this).filter("thead th").length&&" ui-table-cell-label-top",r=t(this).text();""!==r&&(a?(e=parseInt(this.getAttribute("colspan"),10),n="",e&&(n="td:nth-child("+e+"n + "+o+")"),i.addLabels(s.filter(n),i.cellLabels+a,r)):i.addLabels(s,i.cellLabels,r))})},i.prototype.addLabels=function(t,i,e){t.not(":has(b."+i+")").prepend(""+e+"")},Gumby.addInitalisation("tablereflow",function(){t(".reflow").each(function(){var e=t(this);return e.data("isReflow")?!0:(e.data("isReflow",!0),new i(e),void 0)})}),Gumby.UIModule({module:"tablereflow",events:["initialize"],init:function(){Gumby.initialize("tablereflow")}})}(jQuery),!function(t){"use strict";function i(i){Gumby.debug("Initializing Tabs",i),this.$el=i,this.$nav=this.$el.find("ul.tab-nav > li"),this.$content=this.$el.find(".tab-content");var e=this;this.$nav.children("a").on(Gumby.click,function(i){i.preventDefault(),e.click(t(this))}),this.$el.on("gumby.set",function(t,i){Gumby.debug("Set event triggered",e.$el),e.set(t,i)})}i.prototype.click=function(t){var i=t.parent().index();this.$nav.eq(i).add(this.$content.eq(i)).hasClass("active")||(Gumby.debug("Setting active tab to "+i,this.$el),this.$nav.add(this.$content).removeClass("active"),this.$nav.eq(i).add(this.$content.eq(i)).addClass("active"),Gumby.debug("Triggering onChange event",this.$el),this.$el.trigger("gumby.onChange",i))},i.prototype.set=function(t,i){this.$nav.eq(i).find("a").trigger(Gumby.click)},Gumby.addInitalisation("tabs",function(){t(".tabs").each(function(){var e=t(this);return e.data("isTabs")?!0:(e.data("isTabs",!0),new i(e),void 0)})}),Gumby.UIModule({module:"tabs",events:["onChange","set"],init:function(){Gumby.initialize("tabs")}})}(jQuery),!function(t){"use strict";function i(i){this.$el=t(i),this.targets=[],this.on="",this.className="",this.self=!1,this.$el.length&&(Gumby.debug("Initializing Toggle",i),this.init())}function e(i){this.$el=t(i),this.targets=[],this.on="",this.className="",this.self=!1,this.$el.length&&(Gumby.debug("Initializing Switch",i),this.init())}i.prototype.init=function(){var t=this;this.setup(),this.$el.on(this.on,function(i){i.preventDefault(),t.trigger(t.triggered)}).on("gumby.trigger",function(){Gumby.debug("Trigger event triggered",t.$el),t.trigger(t.triggered)}).on("gumby.initialize",function(){Gumby.debug("Re-initializing "+t.constructor,$el),t.setup()})},i.prototype.setup=function(){this.targets=this.parseTargets(),this.on=Gumby.selectAttr.apply(this.$el,["on"])||Gumby.click,this.className=Gumby.selectAttr.apply(this.$el,["classname"])||"active",this.self="false"===Gumby.selectAttr.apply(this.$el,["self"])},i.prototype.parseTargets=function(){var i=Gumby.selectAttr.apply(this.$el,["trigger"]),e=0,n=[];return i?(e=i.indexOf("|"),-1===e?this.checkTargets([i])?[t(i)]:!1:(n=i.split("|"),this.checkTargets(n)?n.length>1?[t(n[0]),t(n[1])]:[t(n[0])]:!1)):!1},i.prototype.checkTargets=function(i){var e=0;for(e;e1&&(this.targets[0].hasClass(this.className)?(i=this.targets[0],this.self||(i=i.add(this.$el)),i.removeClass(this.className),this.targets[1].addClass(this.className)):(i=this.targets[0],this.self||(i=i.add(this.$el)),i.addClass(this.className),this.targets[1].removeClass(this.className))):this.$el.toggleClass(this.className),t&&"function"==typeof t&&t.apply(this)},e.prototype.trigger=function(t){Gumby.debug("Triggering Switch",this.$el);var i;this.targets?1==this.targets.length?(i=this.targets[0],this.self||(i=i.add(this.$el)),i.addClass(this.className)):this.targets.length>1&&(i=this.targets[0],this.self||(i=i.add(this.$el)),i.addClass(this.className),this.targets[1].removeClass(this.className)):this.$el.addClass(this.className),t&&"function"==typeof t&&t.apply(this)},Gumby.addInitalisation("toggles",function(e){t(".toggle").each(function(){var n=t(this);return n.data("isToggle")&&!e?!0:(n.data("isToggle")&&e&&n.trigger("gumby.initialize"),n.data("isToggle",!0),new i(n),void 0)})}),Gumby.addInitalisation("switches",function(i){t(".switch").each(function(){var n=t(this);return n.data("isSwitch")&&!i?!0:n.data("isSwitch")&&i?(n.trigger("gumby.initialize"),!0):(n.data("isSwitch",!0),new e(n),void 0)})}),Gumby.UIModule({module:"toggleswitch",events:["initialize","trigger","onTrigger"],init:function(){Gumby.initialize("switches"),Gumby.initialize("toggles")}})}(jQuery),!function(t){"use strict";function i(t){Gumby.debug("Initializing Tables",t),this.$el=t,this.$table=this.$el.find("table.reflow")}i.prototype.updateReflow=function(){var i=this.$table;t(i.allHeaders.get().reverse()).each(function(){var e,n,s=i.find("tbody tr td"),o=t.mobile.getAttribute(this,"colstart"),a=s.not(this).filter("thead th").length&&" ui-table-cell-label-top",r=t(this).text();""!==r&&(a?(e=parseInt(this.getAttribute("colspan"),10),n="",e&&(n="td:nth-child("+e+"n + "+o+")"),i._addLabels(s.filter(n),opts.classes.cellLabels+a,r)):i._addLabels(s,opts.classes.cellLabels,r))})},i.prototype.addLabels=function(t,i,e){t.not(":has(b."+i+")").prepend(""+e+"")},Gumby.addInitalisation("tables",function(i){t(".skiplink > a, .skip").each(function(){var e=t(this);return e.data("isSkipLink")&&!i?!0:e.data("isSkipLink")&&i?(e.trigger("gumby.initialize"),!0):(e.data("isSkipLink",!0),new SkipLink(e),void 0)})}),Gumby.UIModule({module:"tables",events:["initialize","onComplete"],init:function(){Gumby.initialize("skiplink")}})}(jQuery),!function(t){"use strict";function i(t,i){Gumby&&Gumby.debug("Initializing Validation",t),this.$this=t,this.$field=this.$this.parents(".field"),this.req=i||function(){return!!this.$this.val().length};var e=this;this.$this.is("[type=checkbox], [type=radio]")?(this.$field=this.$this.parent("label"),this.$field.on("gumby.onChange",function(){e.validate()})):this.$this.is("select")?(this.$field=this.$this.parents(".picker"),this.$field.on("change",function(){e.validate()})):this.$this.on("blur",function(t){9!==t.which&&e.validate()})}i.prototype.validate=function(){var t=this.req(this.$this);return t?this.$field.removeClass("danger").addClass("success"):this.$field.removeClass("success").addClass("danger"),t},t.fn.validation=function(e){var n=t.extend({submit:!1,fail:!1,required:[]},e),s=[];return this.each(function(){if(!n.required.length)return!1;var e,o=t(this),a=n.required.length;for(e=0;a>e;e++)s.push(new i(o.find('[name="'+n.required[e].name+'"]'),n.required[e].validate||!1));o.on("submit",function(t){var i=!1;if(!o.data("passed")){t.preventDefault();var e,a=s.length;for(e=0;a>e;e++)s[e].validate()||(i=!0);if(i){if(n.fail&&"function"==typeof n.fail)return n.fail(),void 0}else{if(n.submit&&"function"==typeof n.submit)return n.submit(o.serializeArray()),void 0;o.data("passed",!0).submit()}}})})}}(jQuery),!function(t){"use strict";Gumby.touchDevice&&Gumby.touchEvents||!Gumby.autoInit?Gumby.touchEvents&&Gumby.touchDevice&&(Gumby.debug("Loading jQuery mobile touch events"),yepnope.errorTimeout=2e3,Modernizr.load({test:Modernizr.touch,yep:Gumby.touchEvents+"/jquery.mobile.custom.min.js",complete:function(){t.mobile||Gumby.error("Error loading jQuery mobile touch events"),Gumby.touchEventsLoaded=!0,Gumby.autoInit?window.Gumby.init():Gumby.uiModulesReady&&Gumby.helpers()}})):window.Gumby.init(),"function"==typeof define&&define.amd&&define(window.Gumby)}(jQuery); \ No newline at end of file diff --git a/index.html b/index.html index cd2efc0..6d8c214 100755 --- a/index.html +++ b/index.html @@ -74,6 +74,7 @@ + diff --git a/js/libs/ui/gumby.tablereflow.js b/js/libs/ui/gumby.tablereflow.js new file mode 100644 index 0000000..9363ed1 --- /dev/null +++ b/js/libs/ui/gumby.tablereflow.js @@ -0,0 +1,146 @@ +/** +* Gumby TableReflow +*/ +!function($) { + + 'use strict'; + + function TableReflow($el) { + + Gumby.debug('Initializing TableReflow', $el); + + this.$el = $el; + this.cellLabels = "ui-table-cell-label"; + + + var scope = this; + + scope.refresh(); + scope.updateReflow(); + } + + TableReflow.prototype.getAttribute = function( element, key ) { + var data; + + element = element.jquery ? element[0] : element; + + if ( element && element.getAttribute ) { + data = element.getAttribute( "gumby-" + key ); + } + + // Copied from core's src/data.js:dataAttr() + // Convert from a string to a proper data type + try { + data = data === "true" ? true : + data === "false" ? false : + data === "null" ? null : + // Only convert to a number if it doesn't change the string + +data + "" === data ? +data : + rbrace.test( data ) ? JSON.parse( data ) : + data; + } catch( err ) {} + + return data; + } + + TableReflow.prototype.setHeaders = function() { + var trs = this.$el.find( "thead tr" ); + + this.headers = this.$el.find( "tr:eq(0)" ).children(); + this.allHeaders = this.headers.add( trs.children() ); + } + + TableReflow.prototype.refresh = function( /* create */ ) { + var table = this.$el, + trs = table.find( "thead tr" ); + + // updating headers on refresh (fixes #5880) + this.setHeaders(); + + // Iterate over the trs + trs.each( function() { + var columnCount = 0; + + // Iterate over the children of the tr + $( this ).children().each( function() { + var span = parseInt( this.getAttribute( "colspan" ), 10 ), + selector = ":nth-child(" + ( columnCount + 1 ) + ")", + j; + + this.setAttribute( "gumby-" + "colstart", columnCount + 1 ); + + if ( span ) { + for( j = 0; j < span - 1; j++ ) { + columnCount++; + selector += ", :nth-child(" + ( columnCount + 1 ) + ")"; + } + } + + // Store "cells" data on header as a reference to all cells in the + // same column as this TH + $( this ).data( "cells", table.find( "tr" ).not( trs.eq( 0 ) ).not( this ).children( selector ) ); + + columnCount++; + }); + }); + } + + TableReflow.prototype.updateReflow = function() { + var table = this; + + // get headers in reverse order so that top-level headers are appended last + $( table.allHeaders.get().reverse() ).each( function() { + var cells = $( this ).data( "cells" ), + colstart = table.getAttribute( this, "colstart" ), + hierarchyClass = cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top", + text = $( this ).text(), + iteration, filter; + + if ( text !== "" ) { + + if ( hierarchyClass ) { + iteration = parseInt( this.getAttribute( "colspan" ), 10 ); + filter = ""; + + if ( iteration ) { + filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")"; + } + + table.addLabels( cells.filter( filter ), table.cellLabels + hierarchyClass, text ); + } else { + table.addLabels( cells, table.cellLabels, text ); + } + + } + }); + } + + TableReflow.prototype.addLabels = function( cells, label, text ) { + cells.not( ":has(b." + label + ")" ).prepend( "" + text + "" ); + }; + + Gumby.addInitalisation('tablereflow', function() { + $('.reflow').each(function() { + var $this = $(this); + // this element has already been initialized + if($this.data('isReflow')) { + return true; + } + // mark element as initialized + $this.data('isReflow', true); + new TableReflow($this); + }); + }); + + // register UI module + Gumby.UIModule({ + module: 'tablereflow', + events: ['initialize'], + init: function() { + Gumby.initialize('tablereflow'); + } + }); + + + +}(jQuery); \ No newline at end of file diff --git a/sass/ui/_tables.scss b/sass/ui/_tables.scss index bfaa5b1..05e23d8 100644 --- a/sass/ui/_tables.scss +++ b/sass/ui/_tables.scss @@ -87,3 +87,94 @@ table { } } } + +/* Mobile first styles: Begin with the stacked presentation at narrow widths */ +@media only all { + .reflow { + /* Hide the table headers */ + thead { + td, th { + display: none; + } + } + + /* Show the table cells as a block level element */ + td, th { + text-align: left; + display: block; + @include font-size($norm); + + /* Make the label elements a percentage width */ + b.ui-table-cell-label { + padding: .4em; + min-width: 30%; + display: inline-block; + margin: -.4em 1em -.4em -.4em; + font-weight: bold; + @include font-size($med); + } + + /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */ + b.ui-table-cell-label-top { + display: block; + padding: .4em 0; + margin: .4em 0; + text-transform: uppercase; + @include font-size($large); + font-weight: normal; + } + } + + /* Add a fair amount of top margin to visually separate each row when stacked */ + tbody { + th { + margin-top: 3em; + } + } + } +} + +@media ( min-width: $table-reflow-breakpoint ) { + .reflow { + display: table-row-group; + + @mixin showheaderrows() { + display: table-cell; + margin: 0; + + .ui-table-cell-label { + display: none; + } + } + + td, th { + @include showheaderrows(); + } + + tbody { + td, th { + @include showheaderrows(); + } + } + + thead { + td, th { + @include showheaderrows(); + } + } + } +} + + +/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */ +/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/ +@media ( max-width: $table-reflow-breakpoint ) { + .ui-table-reflow { + td, th { + width: 100%; + @include box-sizing(border-box); + float: left; + clear: left; + } + } +} diff --git a/sass/var/_settings.scss b/sass/var/_settings.scss index 16ea90d..0ac1110 100755 --- a/sass/var/_settings.scss +++ b/sass/var/_settings.scss @@ -155,6 +155,8 @@ $table-cell-border-style: solid; $table-border-radius: 4px; // .striped $table-stripe-bgcolor: #e5e5e5; +// .reflow +$table-reflow-breakpoint: 730px; // Tooltips $tt-min-width: 130px; diff --git a/ui.html b/ui.html index 309311a..7dc2ae9 100755 --- a/ui.html +++ b/ui.html @@ -612,6 +612,62 @@

Tables

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Reflow
Top Header 1Top Header 2Top Header 3
Table Header 1Table Header 2Table Header 3Table Header 4Table Header 5Table Header 6
Lorem ipsum dolor.Perspiciatis, vero, obcaecati.Odio, similique, labore!Aut, doloremque quaerat.Fugiat, nam, provident.Nam, nihil, corporis.
Lorem ipsum dolor.Cum, quaerat, magni?Mollitia, eligendi, ea.Mollitia, modi, laudantium.Laboriosam, facilis, hic?Dignissimos, quis, asperiores!
Lorem ipsum dolor.Saepe, eum, numquam.Ducimus, ullam, quos.Sapiente, inventore, minus.Consequatur, porro, blanditiis.Quisquam, iusto, odit.
Lorem ipsum dolor.Molestias, earum, optio.Aliquid, rerum, repudiandae.Aut, repellat nulla!Error, earum, nihil!Nesciunt, facere, nisi?
+
+

Tabs

@@ -1268,6 +1324,7 @@

Icon Map

+