diff options
| author | Freya Murphy <freya@freyacat.org> | 2026-02-26 23:21:06 -0500 |
|---|---|---|
| committer | Freya Murphy <freya@freyacat.org> | 2026-02-26 23:25:26 -0500 |
| commit | 106cebec65e8b6a623bec2fff29a87c2932fa4dc (patch) | |
| tree | 8c38145d998509046c35f122f8f184ca0d7cdee5 /src/public/polyfills | |
| parent | make the header logo a clickable link to home (diff) | |
| download | website-106cebec65e8b6a623bec2fff29a87c2932fa4dc.tar.gz website-106cebec65e8b6a623bec2fff29a87c2932fa4dc.tar.bz2 website-106cebec65e8b6a623bec2fff29a87c2932fa4dc.zip | |
update css to not using box-sizing
Diffstat (limited to '')
| -rw-r--r-- | src/public/polyfills/boxsizing.htc | 461 | ||||
| -rw-r--r-- | src/public/polyfills/display-table.htc | 272 |
2 files changed, 0 insertions, 733 deletions
diff --git a/src/public/polyfills/boxsizing.htc b/src/public/polyfills/boxsizing.htc deleted file mode 100644 index f5936e7..0000000 --- a/src/public/polyfills/boxsizing.htc +++ /dev/null @@ -1,461 +0,0 @@ -<!DOCTYPE html><!-- DOCTYPE is needed to make IE version detection possible. --> -<public:component lightWeight="true"> -<attach event="onpropertychange" onevent="checkPropertyChange()" /> -<attach event="ondetach" onevent="restore()" /> -<attach event="onresize" for="window" onevent="update()" /> -<script type="text/javascript"> -//<![CDATA[ - -var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth); - -// Shortcut for the document object -var doc = element.document; - -// Buffer for multiple resize events -var resizetimeout = null; - -// Don't apply box-sizing to certain elements -var apply = false; -switch(element.nodeName){ - case '#comment': - case 'HTML': - case 'HEAD': - case 'TITLE': - case 'SCRIPT': - case 'STYLE': - case 'LINK': - case 'META': - break; - - default: - apply = true; - break; -} - -/* -* update gets called during resize events, then waits until there are no further resize events, and finally triggers a recalculation -*/ -function update(){ - if(resizetimeout !== null){ - window.clearTimeout(resizetimeout); - } - resizetimeout = window.setTimeout(function(){ - try{ - restore(); - init(); - } - catch(e){} - resizetimeout = null; - },100); -} - -/* -* restore gets called when the behavior is being detached (see event binding at the top), -* resets everything like it was before applying the behavior -*/ -function restore(){ - if(apply){ - try{ - element.runtimeStyle.removeAttribute("width"); - element.runtimeStyle.removeAttribute("height"); - } - catch(e){} - } -} - -/* -* init gets called once at the start and then never again, -* triggers box-sizing calculations and updates width and height -*/ -function init(){ - if(apply){ - updateBorderBoxWidth(); - updateBorderBoxHeight(); - } -} - -/* -* checkPropertyChange gets called as soon as an element property changes -* (see event binding at the top), it then checks if any property influencing its -* dimensions was changed and if yes recalculates width and height -*/ -function checkPropertyChange(){ - if(apply){ - var pn = event.propertyName; - if(pn === "style.boxSizing" && element.style.boxSizing === ""){ - element.style.removeAttribute("boxSizing"); - element.runtimeStyle.removeAttribute("boxSizing"); - element.runtimeStyle.removeAttribute("width"); - element.runtimeStyle.removeAttribute("height"); - } - switch (pn){ - case "style.width": - case "style.minWidth": - case "style.maxWidth": - case "style.borderLeftWidth": - case "style.borderLeftStyle": - case "style.borderRightWidth": - case "style.borderRightStyle": - case "style.paddingLeft": - case "style.paddingRight": - updateBorderBoxWidth(); - break; - - case "style.height": - case "style.minHeight": - case "style.maxHeight": - case "style.borderTopWidth": - case "style.borderTopStyle": - case "style.borderBottomWidth": - case "style.borderBottomStyle": - case "style.paddingTop": - case "style.paddingBottom": - updateBorderBoxHeight(); - break; - - case "className": - case "style.boxSizing": - updateBorderBoxWidth(); - updateBorderBoxHeight(); - break; - } - } -} - -/* - * Helper function, taken from Dean Edward's IE7 framework, - * added by Schepp on 12.06.2010. - * http://code.google.com/p/ie7-js/ - * - * Allows us to convert from relative to pixel-values. - */ -function getPixelValue(value){ - var PIXEL = /^\d+(px)?$/i; - if (PIXEL.test(value)) return parseInt(value); - var style = element.style.left; - var runtimeStyle = element.runtimeStyle.left; - element.runtimeStyle.left = element.currentStyle.left; - element.style.left = value || 0; - value = parseInt(element.style.pixelLeft); - element.style.left = style; - element.runtimeStyle.left = runtimeStyle; - - return value; -} - -function getPixelWidth(object, value){ - // For Pixel Values - var PIXEL = /^\d+(px)?$/i; - if (PIXEL.test(value)) return parseInt(value); - - // For Percentage Values - var PERCENT = /^[\d\.]+%$/i; - if (PERCENT.test(value)){ - try{ - var parentPaddingLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingLeft); - var parentPaddingRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingRight); - var parentBorderLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderLeftWidth); - var parentBorderRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderRightWidth); - - //var parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%")); - var parentWidth = object.parentElement.offsetWidth - parentPaddingLeft - parentPaddingRight - parentBorderLeft - parentBorderRight; - var value = (parseFloat(value) / 100) * parentWidth; - } - catch(e){ - var value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth; - } - return parseInt(value); - } - - // For EM Values - var style = object.style.left; - var runtimeStyle = object.runtimeStyle.left; - object.runtimeStyle.left = object.currentStyle.left; - object.style.left = value || 0; - value = parseInt(object.style.pixelLeft); - object.style.left = style; - object.runtimeStyle.left = runtimeStyle; - - return value; -} - -function getPixelHeight(object, value){ - // For Pixel Values - var PIXEL = /^\d+(px)?$/i; - if (PIXEL.test(value)) return parseInt(value); - - // For Percentage Values - var PERCENT = /^[\d\.]+%$/i; - if (PERCENT.test(value)){ - try{ - if(object.parentElement.currentStyle.height != "auto"){ - switch(object.parentElement.nodeName){ - default: - if(object.parentElement.currentStyle.height !== "auto"){ - var parentPaddingTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingTop); - var parentPaddingBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingBottom); - var parentBorderTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderTopWidth); - var parentBorderBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderBottomWidth); - - var parentHeight = object.parentElement.offsetHeight - parentPaddingTop - parentPaddingBottom - parentBorderTop - parentBorderBottom; - //var parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height); - - value = (parseFloat(value) / 100) * parentHeight; - } - else { - value = "auto"; - } - break; - - case 'HTML': - parentHeight = element.document.documentElement.clientHeight; - if(parentHeight !== "auto"){ - value = (parseFloat(value) / 100) * parentHeight; - } - else { - value = "auto"; - } - break; - } - if(value !== "auto") value = parseInt(value); - } - else { - value = "auto"; - } - } - catch(e){ - value = "auto"; - } - return value; - } - - // For EM Values - var style = object.style.left; - var runtimeStyle = object.runtimeStyle.left; - object.runtimeStyle.left = object.currentStyle.left; - object.style.left = value || 0; - value = parseInt(object.style.pixelLeft); - object.style.left = style; - object.runtimeStyle.left = runtimeStyle; - - return value; -} - - -/* - * getBorderWidth & friends - * Border width getters - */ -function getBorderWidth(sSide){ - if(element.currentStyle["border" + sSide + "Style"] == "none"){ - return 0; - } - var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]); - return n || 0; -} -function getBorderLeftWidth() { return getBorderWidth("Left"); } -function getBorderRightWidth() { return getBorderWidth("Right"); } -function getBorderTopWidth() { return getBorderWidth("Top"); } -function getBorderBottomWidth() { return getBorderWidth("Bottom"); } - - -/* - * getPadding & friends - * Padding width getters - */ -function getPadding(sSide) { - var n = getPixelValue(element.currentStyle["padding" + sSide]); - return n || 0; -} -function getPaddingLeft() { return getPadding("Left"); } -function getPaddingRight() { return getPadding("Right"); } -function getPaddingTop() { return getPadding("Top"); } -function getPaddingBottom() { return getPadding("Bottom"); } - - - -/* - * getBoxSizing - * Get the box-sizing value for the current element - */ -function getBoxSizing(){ - var s = element.style; - var cs = element.currentStyle - if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){ - return s.boxSizing; - } - if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){ - return s["box-sizing"]; - } - if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){ - return cs.boxSizing; - } - if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){ - return cs["box-sizing"]; - } - return getDocumentBoxSizing(); -} - - -/* - * getDocumentBoxSizing - * Get the default document box sizing (check for quirks mode) - */ -function getDocumentBoxSizing(){ - if(doc.compatMode === null || doc.compatMode === "BackCompat"){ - return "border-box"; - } - return "content-box" -} - - -/* - * setBorderBoxWidth & friends - * Width and height setters - */ -function setBorderBoxWidth(n){ - element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() - - getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px"; -} -function setBorderBoxMinWidth(n){ - element.runtimeStyle.minWidth = Math.max(0, n - getBorderLeftWidth() - - getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px"; -} -function setBorderBoxMaxWidth(n){ - element.runtimeStyle.maxWidth = Math.max(0, n - getBorderLeftWidth() - - getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px"; -} -function setBorderBoxHeight(n){ - element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() - - getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px"; -} -function setBorderBoxMinHeight(n){ - element.runtimeStyle.minHeight = Math.max(0, n - getBorderTopWidth() - - getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px"; -} -function setBorderBoxMaxHeight(n){ - element.runtimeStyle.maxHeight = Math.max(0, n - getBorderTopWidth() - - getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px"; -} -function setContentBoxWidth(n){ - element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() + - getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px"; -} -function setContentBoxMinWidth(n){ - element.runtimeStyle.minWidth = Math.max(0, n + getBorderLeftWidth() + - getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px"; -} -function setContentBoxMaxWidth(n){ - element.runtimeStyle.maxWidth = Math.max(0, n + getBorderLeftWidth() + - getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px"; -} -function setContentBoxHeight(n){ - element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() + - getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px"; -} -function setContentBoxMinHeight(n){ - element.runtimeStyle.minHeight = Math.max(0, n + getBorderTopWidth() + - getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px"; -} -function setContentBoxMaxHeight(n){ - element.runtimeStyle.maxHeight = Math.max(0, n + getBorderTopWidth() + - getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px"; -} - - -/* - * updateBorderBoxWidth & updateBorderBoxHeight - * - */ -function updateBorderBoxWidth() { - if(getDocumentBoxSizing() == getBoxSizing()){ - return; - } - - var csw = element.currentStyle.width; - if(csw != "auto"){ - csw = getPixelWidth(element,csw); - if(getBoxSizing() == "border-box"){ - setBorderBoxWidth(parseInt(csw)); - } - else{ - setContentBoxWidth(parseInt(csw)); - } - } - - csw = element.currentStyle.minWidth; - if(csw != "none"){ - csw = getPixelWidth(element,csw); - if(getBoxSizing() == "border-box"){ - setBorderBoxMinWidth(parseInt(csw)); - } - else{ - setContentBoxMinWidth(parseInt(csw)); - } - } - - csw = element.currentStyle.maxWidth; - if(csw != "none"){ - csw = getPixelWidth(element,csw); - if(getBoxSizing() == "border-box"){ - setBorderBoxMaxWidth(parseInt(csw)); - } - else{ - setContentBoxMaxWidth(parseInt(csw)); - } - } -} - -function updateBorderBoxHeight() { - if(getDocumentBoxSizing() == getBoxSizing()){ - return; - } - - var csh = element.currentStyle.height; - if(csh != "auto"){ - csh = getPixelHeight(element,csh); - if(csh !== "auto"){ - if(getBoxSizing() == "border-box"){ - setBorderBoxHeight(parseInt(csh)); - } - else{ - setContentBoxHeight(parseInt(csh)); - } - } - } - - csh = element.currentStyle.minHeight; - if(csh != "none"){ - csh = getPixelHeight(element,csh); - if(csh !== "none"){ - if(getBoxSizing() == "border-box"){ - setBorderBoxMinHeight(parseInt(csh)); - } - else{ - setContentBoxMinHeight(parseInt(csh)); - } - } - } - - csh = element.currentStyle.maxHeight; - if(csh != "none"){ - csh = getPixelHeight(element,csh); - if(csh !== "none"){ - if(getBoxSizing() == "border-box"){ - setBorderBoxMaxHeight(parseInt(csh)); - } - else{ - setContentBoxMaxHeight(parseInt(csh)); - } - } - } -} - - -// Run the calculations -init(); - -//]]> -</script> -</public:component> - diff --git a/src/public/polyfills/display-table.htc b/src/public/polyfills/display-table.htc deleted file mode 100644 index 395209c..0000000 --- a/src/public/polyfills/display-table.htc +++ /dev/null @@ -1,272 +0,0 @@ -<!DOCTYPE html><!-- DOCTYPE is needed to make IE version detection possible. --> -<public:component lightweight="true"><public:attach event="ondocumentready" onevent="_(element)" /> -<script> -/** - * display-table.htc by Marat Tanalin - * http://tanalin.com/en/projects/display-table-htc/ - * @version 2011-11-25 - */ -function _(element) { - var d = element.document; - - // Exit if {display: table} is natively supported (IE8+). - // See http://tanalin.com/en/articles/ie-version-js/ - if (d.querySelector) { - return; - } - - var rspace = /\s+/g, - prefix = 'dt-'; - - // If IE7+. See http://tanalin.com/en/articles/ie-version-js/ - if (window.XMLHttpRequest) { - // IE6 can't read properties with leading dash, but can without, - // so using full prefix in IE7, and no-leading-dash one in IE6. - prefix = '-' + prefix; - } - - var getCssValue = function(el, property) { - return el.currentStyle.getAttribute(prefix + property); - }; - - var inArray = function(needle, haystack) { - var i = haystack.length; - - while (i--) { - if (needle === haystack[i]) { - return true; - } - } - - return false; - }; - - var trim = function(str) { - return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); - }; - - var hasClass = function(elem, className) { - return (' ' + elem.className.replace(rspace, ' ') + ' ').indexOf(' ' + className + ' ') != -1; - }; - - var addClass = function(elem, className) { - className = trim(className); - - if (!className.length) { - return; - } - - if (rspace.test(className)) { - var classes = className.split(rspace), - i = classes.length; - - while (i--) { - addClass(elem, classes[i]); - } - - return; - } - - if (elem.className.length) { - if (!hasClass(elem, className)) { - elem.className += ' ' + className; - } - } - else { - elem.className = className; - } - }; - - var getChildren = function(elem) { - var node = elem.firstChild, - elems = []; - - while (node) { - if (1 === node.nodeType) { - elems.push(node); - } - - node = node.nextSibling; - } - - return elems; - }; - - var getFirstChildElement = function(elem) { - var node = elem.firstChild; - - while (node) { - if (1 === node.nodeType) { - return node; - } - - node = node.nextSibling; - } - - return null; - }; - - var moveChildNodes = function(src, dst) { - while (src.firstChild) { - dst.appendChild(src.firstChild); - } - }; - - var addFirstLastClass = function(outElem, inElem, className) { - addClass(outElem, inElem.nodeName + '-' + className + ' ' + className); - }; - - var copyClasses = function(src, dst) { - addClass(dst, src.nodeName + ' ' + src.className); - }; - - // Filters elements that can be converted to table elements. - var filterElements = function(elems) { - var filtered = [], - count = elems.length; - - for (var i = 0; i < count; i++) { - var elem = elems[i]; - - if ('HR' !== elem.nodeName) { - filtered.push(elem); - } - } - - return filtered; - }; - - var generateElements = function(inContainer, outElemNodeName, action, outContainer) { - var inElems = filterElements(getChildren(inContainer)), - count = inElems.length; - - if (!count) { - return; - } - - var outElems = [], - lastIndex = count - 1; - - for (var i = 0; i < count; i++) { - var inElem = inElems[i], - outElem = d.createElement(outElemNodeName); - - outElem.id = inElem.id; - copyClasses(inElem, outElem); - action(inElem, outElem); - outContainer.appendChild(outElem); - outElems.push(outElem); - } - - addFirstLastClass(outElems[0], inElems[0], 'first'); - addFirstLastClass(outElems[lastIndex], inElems[lastIndex], 'last'); - - if (!lastIndex) { - addClass(outElems[0], inElems[0].nodeName + '-first-last'); - } - }; - - var generateRowCells = function(inRow, outRow) { - generateElements(inRow, 'td', moveChildNodes, outRow); - }; - - var generateRows = function(inTable, outTbody) { - var firstChildEl = getFirstChildElement(inTable); - - // If cells are direct children of table. - if ( firstChildEl && ('table-cell' === getCssValue(firstChildEl, 'display')) ) { - var outRow = d.createElement('tr'); - outTbody.appendChild(outRow); - generateRowCells(inTable, outRow); - } - else { - generateElements(inTable, 'tr', generateRowCells, outTbody); - } - }; - - var getTablyElements = function() { - var elems = d.body.getElementsByTagName('*'), - i = elems.length, - tables = []; - - while (i--) { - var elem = elems[i]; - - if ('table' === getCssValue(elem, 'display')) { - tables.push(elem); - } - } - - return tables; - }; - - var processTable = function(inTable) { - var inNodeName = inTable.nodeName; - - // Exit if element to process is already a table element. - if (inArray(inNodeName, ['TABLE', 'TR', 'TD', 'TH', 'TBODY', 'THEAD', 'TFOOT'])) { - return; - } - - var outTable = d.createElement('table'), - outTbody = d.createElement('tbody'); - - var borderSpacing = getCssValue(inTable, 'border-spacing'); - - outTable.cellSpacing = null === borderSpacing - ? 0 - : parseInt(borderSpacing, 10); - - outTable.cellPadding = 0; - - // Unlike HTML-tables, default vertical align for CSS-table cells - // is 'baseline' (as for normal text elements). - outTbody.vAlign = 'baseline'; - - copyClasses(inTable, outTable); - generateRows(inTable, outTbody); - outTable.appendChild(outTbody); - - // If element cannot be replaced with table due to its semantics/functioning, - // then we insert table inside the element, replacing its contents. - if (inArray(inNodeName, ['DT', 'DD', 'LI', 'FORM', 'A'])) { - inTable.innerHTML = ''; - inTable.appendChild(outTable); - - if ('A' === inNodeName) { - // Default link cursor is displayed unstably for link that contains - // table, so we set it explicitly. - if ('auto' === inTable.currentStyle.cursor) { - inTable.style.cursor = 'pointer'; - } - - // Table inside link is unclickable in IE, so we generate click - // event for link manually when generated table iself is clicked. - outTable.onclick = function() { - this.parentNode.click(); - } - } - } - else { - outTable.id = inTable.id; - inTable.replaceNode(outTable); - } - }; - - // If display-table.htc is attached to HTML or BODY element, - // process all elements that have {-dt-display: table}. - if (inArray(element.nodeName, ['HTML', 'BODY'])) { - var tables = getTablyElements(), - i = tables.length; - - while (i--) { - processTable(tables[i]); - } - } - // Process single element that display-table.htc is attached to. - else { - processTable(element); - } -} -</script> -</public:component> |