@ronantakizawa/airpln-ui
Version:
A collection of airline-themed UI web components
773 lines (763 loc) • 58.7 kB
JavaScript
function _assertThisInitialized(e) {
if (undefined === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(undefined);
});
};
}
function _callSuper(t, o, e) {
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, [], _getPrototypeOf(t).constructor) : o.apply(t, e));
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _construct(t, e, r) {
if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
var o = [null];
o.push.apply(o, e);
var p = new (t.bind.apply(t, o))();
return r && _setPrototypeOf(p, r.prototype), p;
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
writable: false
}), e;
}
function _getPrototypeOf(t) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
}, _getPrototypeOf(t);
}
function _inherits(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: true,
configurable: true
}
}), Object.defineProperty(t, "prototype", {
writable: false
}), e && _setPrototypeOf(t, e);
}
function _isNativeFunction(t) {
try {
return -1 !== Function.toString.call(t).indexOf("[native code]");
} catch (n) {
return "function" == typeof t;
}
}
function _isNativeReflectConstruct() {
try {
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (t) {}
return (_isNativeReflectConstruct = function () {
return !!t;
})();
}
function _possibleConstructorReturn(t, e) {
if (e && ("object" == typeof e || "function" == typeof e)) return e;
if (undefined !== e) throw new TypeError("Derived constructors may only return object or undefined");
return _assertThisInitialized(t);
}
function _regeneratorRuntime() {
_regeneratorRuntime = function () {
return e;
};
var t,
e = {},
r = Object.prototype,
n = r.hasOwnProperty,
o = Object.defineProperty || function (t, e, r) {
t[e] = r.value;
},
i = "function" == typeof Symbol ? Symbol : {},
a = i.iterator || "@@iterator",
c = i.asyncIterator || "@@asyncIterator",
u = i.toStringTag || "@@toStringTag";
function define(t, e, r) {
return Object.defineProperty(t, e, {
value: r,
enumerable: true,
configurable: true,
writable: true
}), t[e];
}
try {
define({}, "");
} catch (t) {
define = function (t, e, r) {
return t[e] = r;
};
}
function wrap(t, e, r, n) {
var i = e && e.prototype instanceof Generator ? e : Generator,
a = Object.create(i.prototype),
c = new Context(n || []);
return o(a, "_invoke", {
value: makeInvokeMethod(t, r, c)
}), a;
}
function tryCatch(t, e, r) {
try {
return {
type: "normal",
arg: t.call(e, r)
};
} catch (t) {
return {
type: "throw",
arg: t
};
}
}
e.wrap = wrap;
var h = "suspendedStart",
l = "suspendedYield",
f = "executing",
s = "completed",
y = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var p = {};
define(p, a, function () {
return this;
});
var d = Object.getPrototypeOf,
v = d && d(d(values([])));
v && v !== r && n.call(v, a) && (p = v);
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
function defineIteratorMethods(t) {
["next", "throw", "return"].forEach(function (e) {
define(t, e, function (t) {
return this._invoke(e, t);
});
});
}
function AsyncIterator(t, e) {
function invoke(r, o, i, a) {
var c = tryCatch(t[r], t, o);
if ("throw" !== c.type) {
var u = c.arg,
h = u.value;
return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
invoke("next", t, i, a);
}, function (t) {
invoke("throw", t, i, a);
}) : e.resolve(h).then(function (t) {
u.value = t, i(u);
}, function (t) {
return invoke("throw", t, i, a);
});
}
a(c.arg);
}
var r;
o(this, "_invoke", {
value: function (t, n) {
function callInvokeWithMethodAndArg() {
return new e(function (e, r) {
invoke(t, n, e, r);
});
}
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
}
});
}
function makeInvokeMethod(e, r, n) {
var o = h;
return function (i, a) {
if (o === f) throw Error("Generator is already running");
if (o === s) {
if ("throw" === i) throw a;
return {
value: t,
done: true
};
}
for (n.method = i, n.arg = a;;) {
var c = n.delegate;
if (c) {
var u = maybeInvokeDelegate(c, n);
if (u) {
if (u === y) continue;
return u;
}
}
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
if (o === h) throw o = s, n.arg;
n.dispatchException(n.arg);
} else "return" === n.method && n.abrupt("return", n.arg);
o = f;
var p = tryCatch(e, r, n);
if ("normal" === p.type) {
if (o = n.done ? s : l, p.arg === y) continue;
return {
value: p.arg,
done: n.done
};
}
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
}
};
}
function maybeInvokeDelegate(e, r) {
var n = r.method,
o = e.iterator[n];
if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
var i = tryCatch(o, e.iterator, r.arg);
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
var a = i.arg;
return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
}
function pushTryEntry(t) {
var e = {
tryLoc: t[0]
};
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
}
function resetTryEntry(t) {
var e = t.completion || {};
e.type = "normal", delete e.arg, t.completion = e;
}
function Context(t) {
this.tryEntries = [{
tryLoc: "root"
}], t.forEach(pushTryEntry, this), this.reset(true);
}
function values(e) {
if (e || "" === e) {
var r = e[a];
if (r) return r.call(e);
if ("function" == typeof e.next) return e;
if (!isNaN(e.length)) {
var o = -1,
i = function next() {
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next;
return next.value = t, next.done = true, next;
};
return i.next = i;
}
}
throw new TypeError(typeof e + " is not iterable");
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
value: GeneratorFunctionPrototype,
configurable: true
}), o(GeneratorFunctionPrototype, "constructor", {
value: GeneratorFunction,
configurable: true
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
var e = "function" == typeof t && t.constructor;
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
}, e.mark = function (t) {
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
}, e.awrap = function (t) {
return {
__await: t
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
return this;
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
undefined === i && (i = Promise);
var a = new AsyncIterator(wrap(t, r, n, o), i);
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
return t.done ? t.value : a.next();
});
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
return this;
}), define(g, "toString", function () {
return "[object Generator]";
}), e.keys = function (t) {
var e = Object(t),
r = [];
for (var n in e) r.push(n);
return r.reverse(), function next() {
for (; r.length;) {
var t = r.pop();
if (t in e) return next.value = t, next.done = false, next;
}
return next.done = true, next;
};
}, e.values = values, Context.prototype = {
constructor: Context,
reset: function (e) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
},
stop: function () {
this.done = true;
var t = this.tryEntries[0].completion;
if ("throw" === t.type) throw t.arg;
return this.rval;
},
dispatchException: function (e) {
if (this.done) throw e;
var r = this;
function handle(n, o) {
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
}
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
var i = this.tryEntries[o],
a = i.completion;
if ("root" === i.tryLoc) return handle("end");
if (i.tryLoc <= this.prev) {
var c = n.call(i, "catchLoc"),
u = n.call(i, "finallyLoc");
if (c && u) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
} else if (c) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
} else {
if (!u) throw Error("try statement without catch or finally");
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
}
}
}
},
abrupt: function (t, e) {
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
var o = this.tryEntries[r];
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
var i = o;
break;
}
}
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
var a = i ? i.completion : {};
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
},
complete: function (t, e) {
if ("throw" === t.type) throw t.arg;
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
},
finish: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
}
},
catch: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.tryLoc === t) {
var n = r.completion;
if ("throw" === n.type) {
var o = n.arg;
resetTryEntry(r);
}
return o;
}
}
throw Error("illegal catch attempt");
},
delegateYield: function (e, r, n) {
return this.delegate = {
iterator: values(e),
resultName: r,
nextLoc: n
}, "next" === this.method && (this.arg = t), y;
}
}, e;
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (undefined !== e) {
var i = e.call(t, r);
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (String )(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _wrapNativeSuper(t) {
var r = "function" == typeof Map ? new Map() : undefined;
return _wrapNativeSuper = function (t) {
if (null === t || !_isNativeFunction(t)) return t;
if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
if (undefined !== r) {
if (r.has(t)) return r.get(t);
r.set(t, Wrapper);
}
function Wrapper() {
return _construct(t, arguments, _getPrototypeOf(this).constructor);
}
return Wrapper.prototype = Object.create(t.prototype, {
constructor: {
value: Wrapper,
enumerable: false,
writable: true,
configurable: true
}
}), _setPrototypeOf(Wrapper, t);
}, _wrapNativeSuper(t);
}
var BurstButton = /*#__PURE__*/function (_HTMLElement) {
function BurstButton() {
var _this;
_classCallCheck(this, BurstButton);
_this = _callSuper(this, BurstButton);
_this.attachShadow({
mode: 'open'
});
_this.shadowRoot.innerHTML = "\n <style>\n .plane-button {\n padding: 16px 32px;\n font-size: 18px;\n background: linear-gradient(135deg, #0477BF, #0369a1);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: transform 0.2s;\n }\n\n .plane-button:hover {\n transform: translateY(-2px);\n }\n\n .plane {\n position: absolute;\n width: 24px;\n height: 24px;\n fill: #0477BF;\n opacity: 0;\n pointer-events: none;\n }\n\n @keyframes flyPlane {\n 0% {\n transform: translate(0, 0) rotate(0deg);\n opacity: 1;\n }\n 100% {\n transform: translate(var(--tx), var(--ty)) rotate(var(--rotation));\n opacity: 0;\n }\n }\n </style>\n <button class=\"plane-button\">\n <slot>Click!</slot>\n </button>\n ";
_this.button = _this.shadowRoot.querySelector('.plane-button');
_this.button.addEventListener('click', function () {
return _this.createPlanes();
});
return _this;
}
_inherits(BurstButton, _HTMLElement);
return _createClass(BurstButton, [{
key: "createPlanes",
value: function createPlanes() {
for (var i = 0; i < 8; i++) {
this.createPlane();
}
}
}, {
key: "createPlane",
value: function createPlane() {
if (!document.querySelector('#burst-plane-style')) {
var style = document.createElement('style');
style.id = 'burst-plane-style';
style.textContent = "\n @keyframes burstFlyPlane {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg);\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n ";
document.head.appendChild(style);
}
var plane = document.createElement('div');
plane.style.position = 'fixed';
plane.style.zIndex = '9999';
plane.style.pointerEvents = 'none';
plane.innerHTML = "\n <svg class=\"plane\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\" style=\"width: 24px; height: 24px; fill: #0477BF;\">\n <path d=\"M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z\"/>\n </svg>\n ";
var rect = this.button.getBoundingClientRect();
var angle = Math.random() * Math.PI * 2;
var distance = 100 + Math.random() * 200;
var endX = Math.cos(angle) * distance;
var endY = Math.sin(angle) * distance;
plane.style.left = "".concat(rect.left + rect.width / 2, "px");
plane.style.top = "".concat(rect.top + rect.height / 2, "px");
plane.style.transform = "translate(-50%, -50%)";
plane.style.animation = 'burstFlyPlane 1s ease-out forwards';
plane.style.animationName = 'none';
void plane.offsetWidth;
plane.style.animationName = 'burstFlyPlane';
plane.style.transform = "translate(calc(-50% + ".concat(endX, "px), calc(-50% + ").concat(endY, "px)) rotate(").concat(angle * (180 / Math.PI), "deg)");
document.body.appendChild(plane);
setTimeout(function () {
document.body.removeChild(plane);
}, 1000);
}
}]);
}(/*#__PURE__*/_wrapNativeSuper(HTMLElement));
customElements.define('burst-button', BurstButton);
var ProgressButton = /*#__PURE__*/function (_HTMLElement) {
function ProgressButton() {
var _this;
_classCallCheck(this, ProgressButton);
_this = _callSuper(this, ProgressButton);
_this.attachShadow({
mode: 'open'
});
_this.shadowRoot.innerHTML = "\n <style>\n .download-button {\n padding: 12px 32px;\n font-size: 16px;\n background: #0284c7;\n color: white;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: background-color 0.3s ease;\n font-family: 'Roboto', sans-serif;\n min-width: 140px;\n }\n\n .download-button:hover {\n background: #0369a1;\n }\n\n .button-text {\n display: inline-block;\n transition: opacity 0.2s ease;\n }\n\n .plane {\n position: absolute;\n width: 20px;\n height: 20px;\n fill: white;\n top: 50%;\n left: -30px;\n transform: translateY(-50%);\n transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .checkmark {\n position: absolute;\n width: 20px;\n height: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n transition: all 0.3s ease;\n }\n\n .checkmark path {\n stroke: white;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 48;\n stroke-dashoffset: 48;\n transition: stroke-dashoffset 0.3s ease 0.1s;\n }\n\n .button-success {\n background: #16a34a;\n }\n\n .button-success:hover {\n background: #16a34a;\n }\n\n .download-button[disabled] {\n cursor: default;\n }\n </style>\n <button class=\"download-button\">\n <span class=\"button-text\"><slot>Book Flight</slot></span>\n <svg class=\"plane\" viewBox=\"0 0 576 512\">\n <path d=\"M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z\"/>\n </svg>\n <svg class=\"checkmark\" viewBox=\"0 0 24 24\">\n <path fill=\"none\" d=\"M3.5 12.5L9.5 18.5L20.5 5.5\"/>\n </svg>\n </button>\n ";
_this.button = _this.shadowRoot.querySelector('.download-button');
_this.plane = _this.shadowRoot.querySelector('.plane');
_this.buttonText = _this.shadowRoot.querySelector('.button-text');
_this.checkmark = _this.shadowRoot.querySelector('.checkmark');
_this.button.addEventListener('click', function () {
return _this.startAnimation();
});
return _this;
}
_inherits(ProgressButton, _HTMLElement);
return _createClass(ProgressButton, [{
key: "startAnimation",
value: function startAnimation() {
var _this2 = this;
if (this.button.disabled) return;
this.button.disabled = true;
this.plane.style.left = 'calc(100% + 30px)';
this.buttonText.style.opacity = '0';
setTimeout(function () {
_this2.button.classList.add('button-success');
_this2.plane.style.opacity = '0';
_this2.checkmark.style.transform = 'translate(-50%, -50%) scale(1)';
_this2.checkmark.style.opacity = '1';
_this2.checkmark.querySelector('path').style.strokeDashoffset = '0';
setTimeout(function () {
_this2.reset();
}, 2000);
}, 800);
}
}, {
key: "reset",
value: function reset() {
var _this3 = this;
this.button.disabled = false;
this.button.classList.remove('button-success');
this.plane.style.opacity = '0';
this.plane.style.left = '-30px';
setTimeout(function () {
_this3.plane.style.opacity = '1';
}, 1000);
this.buttonText.style.opacity = '1';
this.checkmark.style.transform = 'translate(-50%, -50%) scale(0)';
this.checkmark.style.opacity = '0';
}
}]);
}(/*#__PURE__*/_wrapNativeSuper(HTMLElement));
customElements.define('progress-button', ProgressButton);
var OrbitLoading = /*#__PURE__*/function (_HTMLElement) {
function OrbitLoading() {
var _this;
_classCallCheck(this, OrbitLoading);
_this = _callSuper(this, OrbitLoading);
_this.attachShadow({
mode: 'open'
});
_this.shadowRoot.innerHTML = "\n <style>\n :host {\n display: block;\n }\n\n #loading-container {\n position: relative;\n width: 200px;\n height: 200px;\n }\n\n #loading-text {\n font-size: 20px;\n color: #0477BF;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-family: 'Roboto', sans-serif;\n }\n\n #plane-container {\n position: absolute;\n width: 100px;\n height: 100px;\n top: 30%;\n left: 30%;\n transform: translate(-30%, -30%);\n animation: orbit 3s linear infinite;\n }\n\n #plane {\n position: absolute;\n top: -45px;\n left: 80%;\n transform: translateX(-50%);\n width: 30px;\n height: 30px;\n fill: #0477BF;\n transform-origin: 50% 100%;\n }\n\n @keyframes orbit {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n </style>\n <div id=\"loading-container\">\n <span id=\"loading-text\">Loading</span>\n <div id=\"plane-container\">\n <svg id=\"plane\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\">\n <path d=\"M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z\"/>\n </svg>\n </div>\n </div>\n ";
_this.loadingText = _this.shadowRoot.getElementById('loading-text');
_this.dots = 1;
setInterval(function () {
_this.loadingText.textContent = "Loading" + ".".repeat(_this.dots);
_this.dots = _this.dots % 3 + 1;
}, 500);
return _this;
}
_inherits(OrbitLoading, _HTMLElement);
return _createClass(OrbitLoading);
}(/*#__PURE__*/_wrapNativeSuper(HTMLElement));
customElements.define('orbit-loading', OrbitLoading);
var OrbitLoadingCircle = /*#__PURE__*/function (_HTMLElement) {
function OrbitLoadingCircle() {
var _this;
_classCallCheck(this, OrbitLoadingCircle);
_this = _callSuper(this, OrbitLoadingCircle);
_this.attachShadow({
mode: 'open'
});
_this.shadowRoot.innerHTML = "\n <style>\n :host {\n display: block;\n }\n \n \n #loading-container {\n position: relative;\n width: 200px;\n height: 200px;\n }\n \n \n #loading-text {\n font-size: 20px;\n color: #0477BF;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-family: 'Roboto', sans-serif;\n }\n \n \n #progress-ring {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 140px;\n height: 140px;\n border-radius: 50%;\n border: 3px solid rgba(4, 119, 191, 0.1);\n }\n \n \n #progress-ring::after {\n content: '';\n position: absolute;\n top: 70px;\n left: 70px;\n width: 140px;\n height: 140px;\n border-radius: 50%;\n border: 3px solid transparent;\n border-top-color: #0477BF;\n transform-origin: center;\n animation: spin 2s linear infinite;\n }\n \n \n #plane {\n position: absolute;\n width: 24px;\n height: 24px;\n fill: #0477BF;\n top: 14px;\n left: 128px;\n transform: translateX(-50%) rotate(45deg);\n }\n \n \n #plane-wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 146px;\n height: 146px;\n transform-origin: center;\n animation: spin 2s linear infinite;\n }\n \n \n @keyframes spin {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n }\n </style>\n <div id=\"loading-container\">\n <div id=\"progress-ring\"></div>\n <div id=\"plane-wrapper\">\n <svg id=\"plane\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\">\n <path d=\"M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z\"/>\n </svg>\n </div>\n <span id=\"loading-text\">Loading</span>\n </div>\n ";
_this.loadingText = _this.shadowRoot.getElementById('loading-text');
_this.dots = 1;
setInterval(function () {
_this.loadingText.textContent = "Loading" + ".".repeat(_this.dots);
_this.dots = _this.dots % 3 + 1;
}, 500);
return _this;
}
_inherits(OrbitLoadingCircle, _HTMLElement);
return _createClass(OrbitLoadingCircle);
}(/*#__PURE__*/_wrapNativeSuper(HTMLElement));
customElements.define('orbit-loading-circle', OrbitLoadingCircle);
var CloudLoading = /*#__PURE__*/function (_HTMLElement) {
function CloudLoading() {
var _this;
_classCallCheck(this, CloudLoading);
_this = _callSuper(this, CloudLoading);
_this.attachShadow({
mode: 'open'
});
_this.shadowRoot.innerHTML = "\n <style>\n :host {\n display: block;\n min-height: 200px;\n }\n\n .scene {\n position: relative;\n width: 300px;\n height: 200px;\n background: linear-gradient(to bottom, #3498db, #85c1e9);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .plane {\n position: absolute;\n width: 40px;\n height: 40px;\n fill: white;\n filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));\n z-index: 2;\n animation: fly 4s infinite ease-in-out;\n }\n\n .cloud {\n position: absolute;\n background: white;\n border-radius: 20px;\n animation: float-across 8s linear infinite;\n opacity: 0.9;\n }\n\n .cloud::before,\n .cloud::after {\n content: '';\n position: absolute;\n background: white;\n border-radius: 50%;\n }\n\n .cloud-1 {\n width: 100px;\n height: 30px;\n top: 50px;\n }\n\n .cloud-1::before {\n width: 35px;\n height: 35px;\n top: -20px;\n left: 10px;\n }\n\n .cloud-1::after {\n width: 45px;\n height: 45px;\n top: -25px;\n left: 40px;\n }\n\n .cloud-2 {\n width: 80px;\n height: 25px;\n top: 100px;\n animation-delay: -4s;\n }\n\n .cloud-2::before {\n width: 30px;\n height: 30px;\n top: -15px;\n left: 5px;\n }\n\n .cloud-2::after {\n width: 35px;\n height: 35px;\n top: -20px;\n left: 30px;\n }\n\n .cloud-3 {\n width: 120px;\n height: 35px;\n top: 150px;\n animation-delay: -2s;\n }\n\n .cloud-3::before {\n width: 40px;\n height: 40px;\n top: -25px;\n left: 15px;\n }\n\n .cloud-3::after {\n width: 50px;\n height: 50px;\n top: -30px;\n left: 45px;\n }\n\n @keyframes float-across {\n from {\n left: 320px;\n transform: translateX(0);\n }\n to {\n left: -150px;\n transform: translateX(0);\n }\n }\n\n @keyframes fly {\n 0%, 100% {\n transform: translate(130px, 80px) rotate(5deg);\n }\n 25% {\n transform: translate(130px, 60px) rotate(-2deg);\n }\n 75% {\n transform: translate(130px, 100px) rotate(8deg);\n }\n }\n\n .loading-text {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n color: white;\n font-size: 16px;\n font-weight: 600;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n white-space: nowrap;\n font-family: 'Roboto', sans-serif;\n }\n\n .dots {\n display: inline-block;\n width: 24px;\n }\n </style>\n <div class=\"scene\">\n <svg class=\"plane\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\">\n <path d=\"M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z\"/>\n </svg>\n <div class=\"cloud cloud-1\"></div>\n <div class=\"cloud cloud-2\"></div>\n <div class=\"cloud cloud-3\"></div>\n <div class=\"loading-text\">Loading<span class=\"dots\"></span></div>\n </div>\n ";
_this.dots = _this.shadowRoot.querySelector('.dots');
_this.dotCount = 0;
setInterval(function () {
_this.dotCount = _this.dotCount % 3 + 1;
_this.dots.textContent = '.'.repeat(_this.dotCount);
}, 500);
return _this;
}
_inherits(CloudLoading, _HTMLElement);
return _createClass(CloudLoading);
}(/*#__PURE__*/_wrapNativeSuper(HTMLElement));
customElements.define('cloud-loading', CloudLoading);
var PlaneBackground = /*#__PURE__*/function (_HTMLElement) {
function PlaneBackground() {
var _this;
_classCallCheck(this, PlaneBackground);
_this = _callSuper(this, PlaneBackground);
_this.attachShadow({
mode: 'open'
});
_this.shadowRoot.innerHTML = "\n <style>\n :host {\n display: block;\n width: 250px;\n height: 250px;\n position: relative;\n background: transparent;\n }\n \n .bg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n \n .bg-plane {\n position: absolute;\n font-size: 1.5rem;\n color: rgba(0, 0, 0, 0.2);\n animation: roam linear infinite;\n transform: translateX(-100%);\n }\n \n .bg-plane:nth-child(1) {\n top: 20%;\n animation-duration: 4s;\n animation-delay: 0s;\n }\n \n .bg-plane:nth-child(2) {\n top: 45%;\n font-size: 1.8rem;\n color: rgba(0, 0, 0, 0.15);\n animation-duration: 5s;\n animation-delay: 2s;\n }\n \n .bg-plane:nth-child(3) {\n top: 70%;\n font-size: 1.3rem;\n color: rgba(0, 0, 0, 0.25);\n animation-duration: 3s;\n animation-delay: 1s;\n }\n \n @keyframes roam {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(250px);\n }\n }\n </style>\n \n <div class=\"bg-container\">\n <div class=\"bg-plane\">\u2708</div>\n <div class=\"bg-plane\">\u2708</div>\n <div class=\"bg-plane\">\u2708</div>\n </div>\n ";
return _this;
}
_inherits(PlaneBackground, _HTMLElement);
return _createClass(PlaneBackground, [{
key: "connectedCallback",
value: function connectedCallback() {
// Ensure the component is properly initialized when added to the DOM
this.style.display = 'block';
}
}]);
}(/*#__PURE__*/_wrapNativeSuper(HTMLElement));
customElements.define('plane-background', PlaneBackground);
var FlightMapGlobe = /*#__PURE__*/function (_HTMLElement) {
function FlightMapGlobe() {
var _this;
_classCallCheck(this, FlightMapGlobe);
_this = _callSuper(this, FlightMapGlobe);
_this.attachShadow({
mode: 'open'
});
_this.shadowRoot.innerHTML = "\n <style>\n :host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 500px;\n }\n #metrics-container {\n position: absolute;\n top: 100px;\n right: 20px;\n color: white;\n background: rgba(0, 0, 0, 0.6);\n padding: 20px;\n border-radius: 8px;\n max-width: 300px;\n backdrop-filter: blur(5px);\n display: none;\n }\n .metric-group {\n margin-bottom: 15px;\n }\n .metric-group h3 {\n margin: 0 0 8px 0;\n font-size: 14px;\n color: #88ccff;\n }\n .metric-item {\n margin: 5px 0;\n font-size: 13px;\n }\n #input-container {\n position: absolute;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1000;\n display: flex;\n gap: 10px;\n }\n .location-input {\n padding: 8px 12px;\n border: 1px solid #ccc;\n border-radius: 4px;\n width: 200px;\n }\n #add-flight-btn {\n padding: 8px 16px;\n background: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n #add-flight-btn:hover {\n background: #45a049;\n }\n #error-message {\n position: absolute;\n top: 60px;\n left: 50%;\n transform: translateX(-50%);\n color: red;\n background: rgba(255, 255, 255, 0.9);\n padding: 5px 10px;\n border-radius: 4px;\n display: none;\n }\n #globeViz {\n width: 100%;\n height: 100%;\n }\n </style>\n <div id=\"input-container\">\n <input type=\"text\" id=\"from-input\" class=\"location-input\" placeholder=\"From (e.g., 'New York')\">\n <input type=\"text\" id=\"to-input\" class=\"location-input\" placeholder=\"To (e.g., 'London')\">\n <button id=\"add-flight-btn\">Add Flight Path</button>\n </div>\n <div id=\"error-message\"></div>\n <div id=\"globeViz\"></div>\n <div id=\"metrics-container\">\n <div class=\"metric-group\">\n <h3>Flight Information</h3>\n <div id=\"flight-duration\" class=\"metric-item\"></div>\n <div id=\"flight-distance\" class=\"metric-item\"></div>\n <div id=\"time-difference\" class=\"metric-item\"></div>\n </div>\n <div class=\"metric-group\">\n <h3>Environmental Impact</h3>\n <div id=\"co2-emissions\" class=\"metric-item\"></div>\n <div id=\"fuel-consumption\" class=\"metric-item\"></div>\n </div>\n <div class=\"metric-group\">\n <h3>Route Details</h3>\n <div id=\"avg-flights\" class=\"metric-item\"></div>\n <div id=\"typical-aircraft\" class=\"metric-item\"></div>\n <div id=\"cruising-altitude\" class=\"metric-item\"></div>\n </div>\n </div>\n ";
_this.world = null;
_this.points = [];
_this.arcs = [];
_this.airplaneModel = null;
_this.AIRPLANE_SCALE = 0.5;
_this.AIRPLANE_ALTITUDE = 0.15;
return _this;
}
_inherits(FlightMapGlobe, _HTMLElement);
return _createClass(FlightMapGlobe, [{
key: "connectedCallback",
value: function () {
var _connectedCallback = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return this.loadDependencies();
case 2:
this.initializeGlobe();
this.setupEventListeners();
case 4:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function connectedCallback() {
return _connectedCallback.apply(this, arguments);
}
return connectedCallback;
}()
}, {
key: "loadDependencies",
value: function () {
var _loadDependencies = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return Promise.all([this.loadScript('https://unpkg.com/three@0.139.2/build/three.min.js'), this.loadScript('https://unpkg.com/three@0.139.2/examples/js/loaders/GLTFLoader.js'), this.loadScript('https://unpkg.com/globe.gl@2.32.1/dist/globe.gl.min.js')]);
case 2:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function loadDependencies() {
return _loadDependencies.apply(this, arguments);
}
return loadDependencies;
}()
}, {
key: "loadScript",
value: function loadScript(src) {
return new Promise(function (resolve, reject) {
var script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
}, {
key: "initializeGlobe",
value: function initializeGlobe() {
var _this2 = this;
this.world = Globe().globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg').bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png').arcColor(function () {
return '#ffff00';
}).arcAltitude(0).arcStroke(1.5).arcsData([]).pointsData([]).pointColor(function () {
return '#ff0000';
}).pointAltitude(0.1).pointRadius(0.5)(this.shadowRoot.getElementById('globeViz'));
// Center the globe
this.world.camera().position.set(0, 0, 300);
this.world.controls().enableZoom = true;
this.world.controls().enablePan = true;
this.world.controls().dampingFactor = 0.1;
this.world.controls().minDistance = 100;
this.world.controls().maxDistance = 500;
// Enable controls and set rotation
this.world.controls().autoRotate = true;
this.world.controls().autoRotateSpeed = 0.1;
// Load airplane model
var loader = new THREE.GLTFLoader();
loader.load('Plane.glb', function (gltf) {
_this2.airplaneModel = gltf.scene;
_this2.airplaneModel.scale.set(_this2.AIRPLANE_SCALE, _this2.AIRPLANE_SCALE, _this2.AIRPLANE_SCALE);
}, undefined, function (error) {
return console.error('Error loading airplane model:', error);
});
}
}, {
key: "setupEventListeners",
value: function setupEventListeners() {
var _this3 = this;
this.shadowRoot.getElementById('add-flight-btn').addEventListener('click', function () {
return _this3.addFlightPath();
});
this.shadowRoot.getElementById('from-input').addEventListener('keypress', function (e) {
if (e.key === 'Enter') _this3.shadowRoot.getElementById('to-input').focus();
});
this.shadowRoot.getElementById('to-input').addEventListener('keypress', function (e) {
if (e.key === 'Enter') _this3.addFlightPath();
});
}
}, {
key: "getCoordinates",
value: function () {
var _getCoordinates = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(location) {
var response, data;
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_context3.prev = 0;
_context3.next = 3;
return fetch("https://geocoding-api.open-meteo.com/v1/search?name=".concat(encodeURIComponent(location), "&count=1&language=en&format=json"));
case 3:
response = _context3.sent;
_context3.next = 6;
return response.json();
case 6:
data = _context3.sent;
if (!(data.results && data.results.length > 0)) {
_cont