From 553c89f5a32e95b9318e8a829bb882bd2d5929ef Mon Sep 17 00:00:00 2001
From: lamkoi <lamkoi@utu.fi>
Date: Tue, 3 Dec 2019 15:52:43 +0200
Subject: [PATCH] ie11 hacks
---
code.es6.js | 75 +++++++++++++++++++++++++++++++++
code.js | 119 +++++++++++++++++++++++++++++-----------------------
style.css | 14 +++----
3 files changed, 147 insertions(+), 61 deletions(-)
create mode 100644 code.es6.js
diff --git a/code.es6.js b/code.es6.js
new file mode 100644
index 0000000..0cae3f9
--- /dev/null
+++ b/code.es6.js
@@ -0,0 +1,75 @@
+class Orbital {
+ constructor(element) {
+ this.element = element;
+ this.planet = element.querySelector('.planet');
+ this.addCustomHover();
+ this.render();
+ this.config = { attributes: true, childList: true };
+ this.observer = new MutationObserver(this.render.bind(this));
+ this.observer.observe(this.planet, this.config);
+ window.addEventListener('resize', () => {debounce(this.render.bind(this), 200)});
+ }
+
+ addCustomHover() {
+ let css = `#${this.element.id}>.orbital>.planet>.satellite:hover {
+ background-color: ${this.planet.dataset.hovercolor ? this.planet.dataset.hovercolor : "#000"} !important;
+ color: ${this.planet.dataset.texthovercolor ? this.planet.dataset.texthovercolor : "#fff"} !important;
+ }`
+ let style = document.createElement('style');
+ if (style.styleSheet) {
+ style.styleSheet.cssText = css;
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
+
+ document.getElementsByTagName('head')[0].appendChild(style);
+
+ }
+
+
+ render() {
+ let planet = this.planet;
+ let radiusHint = parseInt(planet.dataset.radius);
+ // Designer's choice: This quarantees that if the amount of satellites is odd,
+ // the odd one will be on the top (-90 degrees) rather than as the rightmost
+ let rotation = parseInt(planet.dataset.rotation) - 90;
+ let satellites = planet.children;
+ let div = 360 / satellites.length;
+ let planetOrigoOffset = (planet.offsetWidth / 2);
+ // Assuming that every satellite is the same size
+ let satelliteOrigoOffset = satellites[0].offsetWidth/2;
+ let totalOffset = planetOrigoOffset - satelliteOrigoOffset;
+ let maxRadius = parseFloat(window.getComputedStyle(planet).getPropertyValue('margin-left')) + totalOffset;
+ let minRadius = planetOrigoOffset+satelliteOrigoOffset;
+ let radius = minRadius+(((maxRadius-minRadius)/100)*radiusHint);
+ for (let i=0; i<satellites.length; i++) {
+ let y = Math.sin((div * i + rotation) * (Math.PI / 180)) * radius;
+ let x = Math.cos((div * i + rotation) * (Math.PI / 180)) * radius;
+ satellites[i].style.top = (y + totalOffset).toString() + "px";
+ satellites[i].style.left = (x + totalOffset).toString() + "px";
+ }
+
+ }
+}
+
+
+/**
+ *
+ * @param {function} func - function to execute via debouncing
+ * @param {integer} delay - the delay to wait for things to settle
+ */
+const debounce = (func, delay) => {
+ debounce.timeout = debounce.timeout ? debounce.timeout : false;
+ clearTimeout(debounce.timeout)
+ debounce.timeout = setTimeout(func, delay);
+}
+
+const create_orbitals = () => {
+ planets = document.getElementsByClassName("imageorbit");
+ Array.prototype.forEach.call(planets, (planet) => {
+ new Orbital(planet);
+ })
+}
+
+window.addEventListener('DOMContentLoaded', create_orbitals);
+//window.addEventListener('resize', () => {debounce(redraw_orbitals, 200)});
diff --git a/code.js b/code.js
index 0cae3f9..e7f8043 100644
--- a/code.js
+++ b/code.js
@@ -1,75 +1,88 @@
-class Orbital {
- constructor(element) {
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Orbital = function () {
+ function Orbital(element) {
+ var _this = this;
+
+ _classCallCheck(this, Orbital);
+
this.element = element;
- this.planet = element.querySelector('.planet');
- this.addCustomHover();
+ this.planet = element.querySelector('.planet');
+ this.addCustomHover();
this.render();
this.config = { attributes: true, childList: true };
this.observer = new MutationObserver(this.render.bind(this));
this.observer.observe(this.planet, this.config);
- window.addEventListener('resize', () => {debounce(this.render.bind(this), 200)});
- }
-
- addCustomHover() {
- let css = `#${this.element.id}>.orbital>.planet>.satellite:hover {
- background-color: ${this.planet.dataset.hovercolor ? this.planet.dataset.hovercolor : "#000"} !important;
- color: ${this.planet.dataset.texthovercolor ? this.planet.dataset.texthovercolor : "#fff"} !important;
- }`
- let style = document.createElement('style');
- if (style.styleSheet) {
- style.styleSheet.cssText = css;
- } else {
- style.appendChild(document.createTextNode(css));
- }
-
- document.getElementsByTagName('head')[0].appendChild(style);
-
+ window.addEventListener('resize', function () {
+ debounce(_this.render.bind(_this), 200);
+ });
}
+ _createClass(Orbital, [{
+ key: 'addCustomHover',
+ value: function addCustomHover() {
+ var css = '#' + this.element.id + '>.orbital>.planet>.satellite:hover {\n background-color: ' + (this.planet.dataset.hovercolor ? this.planet.dataset.hovercolor : "#000") + ' !important;\n color: ' + (this.planet.dataset.texthovercolor ? this.planet.dataset.texthovercolor : "#fff") + ' !important;\n }';
+ var style = document.createElement('style');
+ if (style.styleSheet) {
+ style.styleSheet.cssText = css;
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
- render() {
- let planet = this.planet;
- let radiusHint = parseInt(planet.dataset.radius);
- // Designer's choice: This quarantees that if the amount of satellites is odd,
- // the odd one will be on the top (-90 degrees) rather than as the rightmost
- let rotation = parseInt(planet.dataset.rotation) - 90;
- let satellites = planet.children;
- let div = 360 / satellites.length;
- let planetOrigoOffset = (planet.offsetWidth / 2);
- // Assuming that every satellite is the same size
- let satelliteOrigoOffset = satellites[0].offsetWidth/2;
- let totalOffset = planetOrigoOffset - satelliteOrigoOffset;
- let maxRadius = parseFloat(window.getComputedStyle(planet).getPropertyValue('margin-left')) + totalOffset;
- let minRadius = planetOrigoOffset+satelliteOrigoOffset;
- let radius = minRadius+(((maxRadius-minRadius)/100)*radiusHint);
- for (let i=0; i<satellites.length; i++) {
- let y = Math.sin((div * i + rotation) * (Math.PI / 180)) * radius;
- let x = Math.cos((div * i + rotation) * (Math.PI / 180)) * radius;
- satellites[i].style.top = (y + totalOffset).toString() + "px";
- satellites[i].style.left = (x + totalOffset).toString() + "px";
+ document.getElementsByTagName('head')[0].appendChild(style);
}
+ }, {
+ key: 'render',
+ value: function render() {
+ var planet = this.planet;
+ var radiusHint = parseInt(planet.dataset.radius);
+ // Designer's choice: This quarantees that if the amount of satellites is odd,
+ // the odd one will be on the top (-90 degrees) rather than as the rightmost
+ var rotation = parseInt(planet.dataset.rotation) - 90;
+ var satellites = planet.children;
+ var div = 360 / satellites.length;
+ var planetOrigoOffset = planet.offsetWidth / 2;
+ // Assuming that every satellite is the same size
+ var satelliteOrigoOffset = satellites[0].offsetWidth / 2;
+ var totalOffset = planetOrigoOffset - satelliteOrigoOffset;
+ var maxRadius = parseFloat(window.getComputedStyle(planet).getPropertyValue('margin-left')) + totalOffset;
+ var minRadius = planetOrigoOffset + satelliteOrigoOffset;
+ var radius = minRadius + (maxRadius - minRadius) / 100 * radiusHint;
+ for (var i = 0; i < satellites.length; i++) {
+ var y = Math.sin((div * i + rotation) * (Math.PI / 180)) * radius;
+ var x = Math.cos((div * i + rotation) * (Math.PI / 180)) * radius;
+ satellites[i].style.top = (y + totalOffset).toString() + "px";
+ satellites[i].style.left = (x + totalOffset).toString() + "px";
+ }
+ }
+ }]);
- }
-}
-
+ return Orbital;
+}();
/**
*
* @param {function} func - function to execute via debouncing
* @param {integer} delay - the delay to wait for things to settle
*/
-const debounce = (func, delay) => {
+
+
+var debounce = function debounce(func, delay) {
debounce.timeout = debounce.timeout ? debounce.timeout : false;
- clearTimeout(debounce.timeout)
+ clearTimeout(debounce.timeout);
debounce.timeout = setTimeout(func, delay);
-}
+};
-const create_orbitals = () => {
- planets = document.getElementsByClassName("imageorbit");
- Array.prototype.forEach.call(planets, (planet) => {
+var create_orbitals = function create_orbitals() {
+ var planets = document.getElementsByClassName("imageorbit");
+ Array.prototype.forEach.call(planets, function (planet) {
new Orbital(planet);
- })
-}
+ });
+};
window.addEventListener('DOMContentLoaded', create_orbitals);
-//window.addEventListener('resize', () => {debounce(redraw_orbitals, 200)});
+//window.addEventListener('resize', () => {debounce(redraw_orbitals, 200)});
\ No newline at end of file
diff --git a/style.css b/style.css
index 5da1593..312a6e0 100644
--- a/style.css
+++ b/style.css
@@ -51,13 +51,11 @@
}
.planet>.satellite {
- --edge: 80%;
- --max-edge: 150px;
- width: var(--edge);
- height: var(--edge);
+ width: 80%;
+ height: 80%;
position: absolute;
- max-width: var(--max-edge);
- max-height: var(--max-edge);
+ max-width: 150px;
+ max-height: 150px;
margin: 0;
display: table;
table-layout: fixed;
@@ -66,8 +64,8 @@
.planet>.satellite>* {
display: table-cell;
vertical-align: middle; /*height on prosentteina, tämä ei toimi*/
- /*width: var(--edge);
- height: var(--edge);
+ /*width: var(80%);
+ height: var(80%);
max-width: var(--max-edge);
max-height: var(--max-edge);*/
text-align: center;
--
GitLab