summaryrefslogtreecommitdiff
path: root/src/public/polyfills
diff options
context:
space:
mode:
authorFreya Murphy <freya@freyacat.org>2024-05-24 09:05:42 -0400
committerFreya Murphy <freya@freyacat.org>2024-05-24 09:05:42 -0400
commitc5f39ea2cd7cf02246705ea8872d3b350526165c (patch)
tree2694f9fdc5d83b529a01f2997c1d89c271c86592 /src/public/polyfills
downloadwebsite-c5f39ea2cd7cf02246705ea8872d3b350526165c.tar.gz
website-c5f39ea2cd7cf02246705ea8872d3b350526165c.tar.bz2
website-c5f39ea2cd7cf02246705ea8872d3b350526165c.zip
initial
Diffstat (limited to 'src/public/polyfills')
-rw-r--r--src/public/polyfills/boxsizing.htc461
-rw-r--r--src/public/polyfills/display-table.htc272
2 files changed, 733 insertions, 0 deletions
diff --git a/src/public/polyfills/boxsizing.htc b/src/public/polyfills/boxsizing.htc
new file mode 100644
index 0000000..f5936e7
--- /dev/null
+++ b/src/public/polyfills/boxsizing.htc
@@ -0,0 +1,461 @@
+<!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
new file mode 100644
index 0000000..395209c
--- /dev/null
+++ b/src/public/polyfills/display-table.htc
@@ -0,0 +1,272 @@
+<!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>