diff --git a/dist/pivot.css b/dist/pivot.css index 4df17e82..dc2da7dd 100644 --- a/dist/pivot.css +++ b/dist/pivot.css @@ -1,6 +1,5 @@ .pvtUi { color: #333; } - table.pvtTable { font-size: 8pt; text-align: left; @@ -112,3 +111,146 @@ table.pvtTable tbody tr td { .pvtCheckContainer p{ margin: 5px; } .pvtRendererArea { padding: 5px;} + +.pvtUI2 +{ + display: grid; + grid-template-columns: [rowGroups] auto [reportArea] auto [nargin ] 1fr [end]; + grid-template-rows: 34px 34px auto; +} + +.pvtUI2 > div:first-child +{ + grid-column: 1; + grid-row: 1; + margin-top: 4px; + +} +.pvtUI2 > div:nth-child(2) +{ + grid-column: 2; + grid-row: 1; + margin-top: 4px; +} +.pvtUI2 > div:nth-child(3) +{ + grid-column: 1; + grid-row: 2; + margin-top: 4px; +} +.pvtUI2 > div:nth-child(4) +{ + grid-column: 2; + grid-row: 2; + margin-top: 4px; +} +.pvtUI2 > div:nth-child(5) +{ + grid-column: 1; + grid-row: 5; + margin-top: 4px; +} +.pvtUI2 > div:nth-child(6) +{ + grid-column: 2; + grid-row: 5; + margin-top: 4px; +} + +.pvtUI2 > .pvtVals +{ + text-align: left; +} + +.pvtUI2 > div:first-child +{ + margin-top: 8px; +} + +.pvtUI2 > .pvtRendererArea +{ + overflow: auto; +} + +@media handheld, only screen and (max-width: 800px) +{ + .pvtUIResponsive + { + display: grid; + grid-template-columns: auto [margin ] 1fr [end]; + } + + .pvtUIResponsive > div:first-child, + .pvtUIResponsive > .pvtUnused, + .pvtUIResponsive > .pvtVals, + .pvtUIResponsive > .pvtCols, + .pvtUIResponsive > .pvtRows, + .pvtUIResponsive > .pvtRendererArea + { + grid-column: 1; + margin-top: 4px; + } + +} + +@media only screen and (min-width: 801px) +{ + .pvtUIResponsive + { + display: grid; + grid-template-columns: [left] auto [reportArea] auto [margin ] 1fr [end]; + grid-template-rows: [rendererControl] 34px [columnGroups] 34px [reportArea] auto [end]; + } + + .pvtUIResponsive > div:first-child + { + grid-column: 1; + grid-row: 1; + margin-top: 4px; + } + + .pvtUIResponsive > .pvtUnused + { + grid-column: 2; + grid-row: 1; + margin-top: 4px; + } + + .pvtUIResponsive > .pvtVals + { + grid-column: 1; + grid-row: 2; + margin-top: 4px; + } + + .pvtUIResponsive > .pvtCols + { + grid-column: 2; + grid-row: 2; + margin-top: 4px; + } + + .pvtUIResponsive > .pvtRows + { + grid-column: 1; + grid-row: 5; + margin-top: 4px; + } + + .pvtUIResponsive > .pvtRendererArea + { + grid-column: 2; + grid-row: 5; + margin-top: 4px; + } + +} + +.pvtUIResponsive .pvtVals +{ + text-align: left; +} + +.pvtUIResponsive .pvtRendererArea { + overflow: auto; +} diff --git a/package.json b/package.json index c32985bd..226808fe 100644 --- a/package.json +++ b/package.json @@ -39,12 +39,13 @@ "gulp": "^3.8.10", "run-sequence": "^1.0.2", "gulp-tag-version": "^1.2.1", - "gulp-git": "^0.5.5", + "gulp-git": "^2.8.0", "gulp-bump": "^0.1.11", "gulp-filter": "^1.0.2", "gulp-util": "^3.0.1", "gulp-rename": "^1.2.0", "gulp-minify-css": "^0.3.11", - "gulp-concat": "^2.4.2" + "gulp-concat": "^2.4.2", + "natives": "^1.1.6" } } diff --git a/src/pivot.coffee b/src/pivot.coffee index 45c28261..86df1a25 100644 --- a/src/pivot.coffee +++ b/src/pivot.coffee @@ -652,7 +652,11 @@ callWithJQuery ($) -> ### - Pivot Table UI: calls Pivot Table core above with options set by user + Pivot Table UI: calls Pivot Table core above with options set by user. + Set the 'tag' option to 'table' (the default) to have the layout HTML + use the and related tags. Use a value of 'div' to hve the layout + HTML use a series of
tags for the renderer, page fields, aggregator, + columns, rows and report areas. ### $.fn.pivotUI = (input, inputOpts, overwrite = false, locale="en") -> @@ -676,6 +680,8 @@ callWithJQuery ($) -> showUI: true filter: -> true sorters: {} + tag: 'table' + responsive: false localeStrings = $.extend(true, {}, locales.en.localeStrings, locales[locale].localeStrings) localeDefaults = @@ -709,21 +715,31 @@ callWithJQuery ($) -> recordsProcessed++ #start building the output - uiTable = $("
", "class": "pvtUi").attr("cellpadding", 5) + if opts.tag == 'div' + uiTable = $("
", "class": "pvtUi") + if opts.responsive + uiTable.addClass('pvtUIResponsive') + else + uiTable.addClass('pvtUI2'); + else + uiTable = $("
", "class": "pvtUi").attr("cellpadding", 5) #renderer control - rendererControl = $("").appendTo(uiTable) + if not opts.tag? or opts.tag != 'div' + tr1 = $("").appendTo(uiTable) #aggregator menu and value area @@ -886,33 +903,45 @@ callWithJQuery ($) -> $(this).html(ordering[$(this).data("order")].colSymbol) refresh() - $("").appendTo(uiTable) + if opts.tag != 'div' + tr2 = $("").appendTo(uiTable) #row axes - tr2.append $("").append(rendererControl).append(unused) + if opts.unusedAttrsVertical == true or unusedAttrsVerticalAutoOverride + uiTable.find('tr:nth-child(1)').prepend rendererControl + uiTable.find('tr:nth-child(2)').prepend unused + else + uiTable.prepend $("").append(rendererControl).append(unused) #render the UI in its default state @html uiTable
").addClass("pvtUiCell") + rendererControl = $(if opts.tag == 'div' then "
" else "
").addClass("pvtUiCell") + if ( opts.responsive ) + rendererControl.addClass('pvtAxisContainer'); renderer = $("").addClass('pvtAxisContainer pvtUnused pvtUiCell') + unused = $(if opts.tag == 'div' then "
" else "
").addClass('pvtAxisContainer pvtUnused pvtUiCell') shownAttributes = (a for a of attrValues when a not in opts.hiddenAttributes) shownInAggregators = (c for c in shownAttributes when c not in opts.hiddenFromAggregators) shownInDragDrop = (c for c in shownAttributes when c not in opts.hiddenFromDragDrop) @@ -858,7 +874,8 @@ callWithJQuery ($) -> attrElem.addClass('pvtFilteredAttribute') if hasExcludedItem unused.append(attrElem).append(valueList) - tr1 = $("
").addClass('pvtVals pvtUiCell') - .appendTo(tr1) - .append(aggregator) - .append(rowOrderArrow) - .append(colOrderArrow) - .append($("
")) + $(if opts.tag == 'div' then "
" else "
") + .addClass('pvtVals pvtUiCell') + .appendTo(if opts.tag == 'div' then uiTable else tr1) + .append(aggregator) + .append(rowOrderArrow) + .append(colOrderArrow) + .append($("
")) #column axes - $("		").addClass('pvtAxisContainer pvtHorizList pvtCols pvtUiCell').appendTo(tr1) + $(if opts.tag == 'div' then "
" else "
") + .addClass('pvtAxisContainer pvtHorizList pvtCols pvtUiCell') + .appendTo(if opts.tag == 'div' then uiTable else tr1) - tr2 = $("
").addClass('pvtAxisContainer pvtRows pvtUiCell').attr("valign", "top") + if opts.tag == 'div' + uiTable.append $("
").addClass('pvtAxisContainer pvtRows pvtUiCell').attr("valign", "top") + else + tr2.append $("
").addClass('pvtAxisContainer pvtRows pvtUiCell').attr("valign", "top") #the actual pivot table container - pivotTable = $("") + pivotTable = $(if opts.tag == 'div' then "
" else "
") .attr("valign", "top") .addClass('pvtRendererArea') - .appendTo(tr2) + .appendTo(if opts.tag == 'div' then uiTable else tr2) #finally the renderer dropdown and unused attribs are inserted at the requested location - if opts.unusedAttrsVertical == true or unusedAttrsVerticalAutoOverride - uiTable.find('tr:nth-child(1)').prepend rendererControl - uiTable.find('tr:nth-child(2)').prepend unused + #When the tag is set to 'div' the the 'unusedAttrsVertical' option is not relevant because + #the position of the layout components is determined by CSS + if opts.tag == 'div' + uiTable.prepend(unused).prepend(rendererControl) else - uiTable.prepend $("