Meteor.js Handlebars template logic operators - operators

From this page, I inserted to my /client/helpers/handlebars.js file this handlebars helper:
Handlebars.registerHelper('compare', function (lvalue, operator, rvalue, options) {
var operators, result;
if (arguments.length < 3) {
throw new Error("Handlerbars Helper 'compare' needs 2 parameters");
}
if (options === undefined) {
options = rvalue;
rvalue = operator;
operator = "===";
}
operators = {
'==': function (l, r) { return l == r; },
'===': function (l, r) { return l === r; },
'!=': function (l, r) { return l != r; },
'!==': function (l, r) { return l !== r; },
'<': function (l, r) { return l < r; },
'>': function (l, r) { return l > r; },
'<=': function (l, r) { return l <= r; },
'>=': function (l, r) { return l >= r; },
'typeof': function (l, r) { return typeof l == r; }
};
if (!operators[operator]) {
throw new Error("Handlerbars Helper 'compare' doesn't know the operator " + operator);
}
result = operators[operator](lvalue, rvalue);
if (result) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
And to the template:
{{#compare "Test" "Test"}}
Default comparison of "==="
{{/compare}}
And in console I always see: Exception from Deps recompute: Error: Handlerbars Helper 'compare' needs 2 parameters
I tried this as well:
{{#compare "Test" "==" "Test"}}
But this did not help.


Try
{{#compare "Test" "Test" operator="=="}}

Related

Typewriter is not working when loaded via npm import (compiled with Babel)

I set up Typewriter on a site, it works fine when loaded via the direct src.
<script src="https://unpkg.com/typewriter-effect#2.3.1/dist/core.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {document.getElementById('typewriter-container');
const typewriter = new Typewriter(whatever, { ... });
...
But when I do it with npm, it doesn't work.
What does "doing it with npm" mean?
Well, since loading stuff the traditional way seems to be outdated... I'm doing the same thing with npm and using the import into a file:
src/typewriter.js
import Typewriter from 'typewriter-effect/dist/core';
And then compiling this file with webpack and babel, and loading that file instead.
<script src="/my_site_stuff/dist/typewriter.js"></script>
This is the compiled file:
dist/typewriter.js
/******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./node_modules/typewriter-effect/dist/core.js":
/*!*****************************************************!*\
!*** ./node_modules/typewriter-effect/dist/core.js ***!
\*****************************************************/
/***/ (function(module, exports, __webpack_require__) {
/* module decorator */ module = __webpack_require__.nmd(module);
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { "#babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
!function (e, t) {
"object" == ( false ? 0 : _typeof(exports)) && "object" == ( false ? 0 : _typeof(module)) ? module.exports = t() : true ? !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (t),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : 0;
}("undefined" != typeof self ? self : this, function () {
return function () {
var e = {
75: function _(e) {
(function () {
var t, n, r, o, a, s;
"undefined" != typeof performance && null !== performance && performance.now ? e.exports = function () {
return performance.now();
} : "undefined" != typeof process && null !== process && process.hrtime ? (e.exports = function () {
return (t() - a) / 1e6;
}, n = process.hrtime, o = (t = function t() {
var e;
return 1e9 * (e = n())[0] + e[1];
})(), s = 1e9 * process.uptime(), a = o - s) : Date.now ? (e.exports = function () {
return Date.now() - r;
}, r = Date.now()) : (e.exports = function () {
return new Date().getTime() - r;
}, r = new Date().getTime());
}).call(this);
},
4087: function _(e, t, n) {
for (var r = n(75), o = "undefined" == typeof window ? n.g : window, a = ["moz", "webkit"], s = "AnimationFrame", i = o["request" + s], u = o["cancel" + s] || o["cancelRequest" + s], l = 0; !i && l < a.length; l++) {
i = o[a[l] + "Request" + s], u = o[a[l] + "Cancel" + s] || o[a[l] + "CancelRequest" + s];
}
if (!i || !u) {
var c = 0,
p = 0,
d = [];
i = function i(e) {
if (0 === d.length) {
var t = r(),
n = Math.max(0, 16.666666666666668 - (t - c));
c = n + t, setTimeout(function () {
var e = d.slice(0);
d.length = 0;
for (var t = 0; t < e.length; t++) {
if (!e[t].cancelled) try {
e[t].callback(c);
} catch (e) {
setTimeout(function () {
throw e;
}, 0);
}
}
}, Math.round(n));
}
return d.push({
handle: ++p,
callback: e,
cancelled: !1
}), p;
}, u = function u(e) {
for (var t = 0; t < d.length; t++) {
d[t].handle === e && (d[t].cancelled = !0);
}
};
}
e.exports = function (e) {
return i.call(o, e);
}, e.exports.cancel = function () {
u.apply(o, arguments);
}, e.exports.polyfill = function (e) {
e || (e = o), e.requestAnimationFrame = i, e.cancelAnimationFrame = u;
};
}
},
t = {};
function n(r) {
var o = t[r];
if (void 0 !== o) return o.exports;
var a = t[r] = {
exports: {}
};
return e[r].call(a.exports, a, a.exports, n), a.exports;
}
n.n = function (e) {
var t = e && e.__esModule ? function () {
return e.default;
} : function () {
return e;
};
return n.d(t, {
a: t
}), t;
}, n.d = function (e, t) {
for (var r in t) {
n.o(t, r) && !n.o(e, r) && Object.defineProperty(e, r, {
enumerable: !0,
get: t[r]
});
}
}, n.g = function () {
if ("object" == (typeof globalThis === "undefined" ? "undefined" : _typeof(globalThis))) return globalThis;
try {
return this || new Function("return this")();
} catch (e) {
if ("object" == (typeof window === "undefined" ? "undefined" : _typeof(window))) return window;
}
}(), n.o = function (e, t) {
return Object.prototype.hasOwnProperty.call(e, t);
};
var r = {};
return function () {
"use strict";
n.d(r, {
default: function _default() {
return S;
}
});
var e = n(4087),
t = n.n(e);
var o = function o(e) {
return new RegExp(/<[a-z][\s\S]*>/i).test(e);
},
a = function a(e) {
var t = document.createElement("div");
return t.innerHTML = e, t.childNodes;
},
s = function s(e, t) {
return Math.floor(Math.random() * (t - e + 1)) + e;
};
var i = "TYPE_CHARACTER",
u = "REMOVE_CHARACTER",
l = "REMOVE_ALL",
c = "REMOVE_LAST_VISIBLE_NODE",
p = "PAUSE_FOR",
d = "CALL_FUNCTION",
f = "ADD_HTML_TAG_ELEMENT",
v = "CHANGE_DELETE_SPEED",
h = "CHANGE_DELAY",
m = "CHANGE_CURSOR",
y = "PASTE_STRING",
g = "HTML_TAG";
function E(e, t) {
var n = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var r = Object.getOwnPropertySymbols(e);
t && (r = r.filter(function (t) {
return Object.getOwnPropertyDescriptor(e, t).enumerable;
})), n.push.apply(n, r);
}
return n;
}
function w(e) {
for (var t = 1; t < arguments.length; t++) {
var n = null != arguments[t] ? arguments[t] : {};
t % 2 ? E(Object(n), !0).forEach(function (t) {
N(e, t, n[t]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : E(Object(n)).forEach(function (t) {
Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
});
}
return e;
}
function T(e) {
return function (e) {
if (Array.isArray(e)) return b(e);
}(e) || function (e) {
if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["##iterator"]) return Array.from(e);
}(e) || function (e, t) {
if (e) {
if ("string" == typeof e) return b(e, t);
var n = Object.prototype.toString.call(e).slice(8, -1);
return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? b(e, t) : void 0;
}
}(e) || function () {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}();
}
function b(e, t) {
(null == t || t > e.length) && (t = e.length);
for (var n = 0, r = new Array(t); n < t; n++) {
r[n] = e[n];
}
return r;
}
function A(e, t) {
for (var n = 0; n < t.length; n++) {
var r = t[n];
r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(e, r.key, r);
}
}
function N(e, t, n) {
return t in e ? Object.defineProperty(e, t, {
value: n,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[t] = n, e;
}
var S = function () {
function n(r, E) {
var b = this;
if (function (e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
}(this, n), N(this, "state", {
cursorAnimation: null,
lastFrameTime: null,
pauseUntil: null,
eventQueue: [],
eventLoop: null,
eventLoopPaused: !1,
reverseCalledEvents: [],
calledEvents: [],
visibleNodes: [],
initialOptions: null,
elements: {
container: null,
wrapper: document.createElement("span"),
cursor: document.createElement("span")
}
}), N(this, "options", {
strings: null,
cursor: "|",
delay: "natural",
pauseFor: 1500,
deleteSpeed: "natural",
loop: !1,
autoStart: !1,
devMode: !1,
skipAddStyles: !1,
wrapperClassName: "Typewriter__wrapper",
cursorClassName: "Typewriter__cursor",
stringSplitter: null,
onCreateTextNode: null,
onRemoveNode: null
}), N(this, "setupWrapperElement", function () {
b.state.elements.container && (b.state.elements.wrapper.className = b.options.wrapperClassName, b.state.elements.cursor.className = b.options.cursorClassName, b.state.elements.cursor.innerHTML = b.options.cursor, b.state.elements.container.innerHTML = "", b.state.elements.container.appendChild(b.state.elements.wrapper), b.state.elements.container.appendChild(b.state.elements.cursor));
}), N(this, "start", function () {
return b.state.eventLoopPaused = !1, b.runEventLoop(), b;
}), N(this, "pause", function () {
return b.state.eventLoopPaused = !0, b;
}), N(this, "stop", function () {
return b.state.eventLoop && ((0, e.cancel)(b.state.eventLoop), b.state.eventLoop = null), b;
}), N(this, "pauseFor", function (e) {
return b.addEventToQueue(p, {
ms: e
}), b;
}), N(this, "typeOutAllStrings", function () {
return "string" == typeof b.options.strings ? (b.typeString(b.options.strings).pauseFor(b.options.pauseFor), b) : (b.options.strings.forEach(function (e) {
b.typeString(e).pauseFor(b.options.pauseFor).deleteAll(b.options.deleteSpeed);
}), b);
}), N(this, "typeString", function (e) {
var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
if (o(e)) return b.typeOutHTMLString(e, t);
if (e) {
var n = b.options || {},
r = n.stringSplitter,
a = "function" == typeof r ? r(e) : e.split("");
b.typeCharacters(a, t);
}
return b;
}), N(this, "pasteString", function (e) {
var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
return o(e) ? b.typeOutHTMLString(e, t, !0) : (e && b.addEventToQueue(y, {
character: e,
node: t
}), b);
}), N(this, "typeOutHTMLString", function (e) {
var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
n = arguments.length > 2 ? arguments[2] : void 0,
r = a(e);
if (r.length > 0) for (var o = 0; o < r.length; o++) {
var s = r[o],
i = s.innerHTML;
s && 3 !== s.nodeType ? (s.innerHTML = "", b.addEventToQueue(f, {
node: s,
parentNode: t
}), n ? b.pasteString(i, s) : b.typeString(i, s)) : s.textContent && (n ? b.pasteString(s.textContent, t) : b.typeString(s.textContent, t));
}
return b;
}), n;
}();
}(), r.default;
}();
});
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ id: moduleId,
/******/ loaded: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/node module decorator */
/******/ !function() {
/******/ __webpack_require__.nmd = function(module) {
/******/ module.paths = [];
/******/ if (!module.children) module.children = [];
/******/ return module;
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
!function() {
"use strict";
/*!*************************************!*\
!*** ./src/js/typewriter-effect.js ***!
\*************************************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var typewriter_effect_dist_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! typewriter-effect/dist/core */ "./node_modules/typewriter-effect/dist/core.js");
/* harmony import */ var typewriter_effect_dist_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(typewriter_effect_dist_core__WEBPACK_IMPORTED_MODULE_0__);
}();
/******/ })()
;
//# sourceMappingURL=typeWriter.js.map
How do I know what the problem is?

Webpack encloses everything in the compiled file so nothing leaks into the global scope.
You'd have to change your src file and do:
import Typewriter from 'typewriter-effect/dist/core';
window.Typewriter = Typewriter;
Then, when using it, instead of:
const typewriter = new Typewriter(...);
Just do:
const typewriter = new window.Typewriter(...);
What we are doing here is, making it available to the global scope.

Trying to generate custom play button for SoundCloud API

I was experimenting with SoundCloud API in Elementor, but I couldn't solve a problem because I have very little knowledge about JS. I was trying to achieve custom play/stop button.
I added a play icon, which changes to a stop icon
It started playing as it should be, but now it's not stopping.
So when I click the icon with the id of #playBPP works well but when I click to the button again it's not working.
This is where I added JS.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<!-- SoundCloud-->
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>
<script type="text/javascript">
// Play - Stop
$(function(){
var widget1 = SC.Widget("bppRadioPlayer");
$("#playBPP").click(function() {
widget1.play();
});
$("toggle-pause").click(function() {
widget1.pause();
});
});
// Audio button toggle
const audioButton = document.querySelector('.audio-button');
audioButton.addEventListener('click', function(){
audioButton.classList.toggle('toggle-pause');
});
</script>
<iframe id="bppRadioPlayer" width="100%" height="160" scrolling="no" src="http://w.soundcloud.com/player/?url=https://soundcloud.com/sdyld/bpp-bonvoyage" frameborder="0" ></iframe>
Icon HTML
<div class="elementor-element elementor-element-ff4607e audio-button elementor-view-default elementor-widget elementor-widget-icon" data-id="ff4607e" data-element_type="widget" id="playBPP" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<i aria-hidden="true" class="fas fa-play"></i> </div>
</div>
</div>
</div>
.toggle-pause .elementor-icon i::before{
content: '\f04c';
}
check out the page screenshot

I updated the snippet to achieve the goal, dropping here, so you can use.
var SC = "object" == typeof SC ? SC : {};
SC.Widget = function(e) {
var t = {};
function n(r) {
if (t[r]) return t[r].exports;
var o = t[r] = {
i: r,
l: !1,
exports: {}
};
return e[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports
}
return n.m = e, n.c = t, n.d = function(e, t, r) {
n.o(e, t) || Object.defineProperty(e, t, {
enumerable: !0,
get: r
})
}, n.r = function(e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(e, "__esModule", {
value: !0
})
}, n.t = function(e, t) {
if (1 & t && (e = n(e)), 8 & t) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var r = Object.create(null);
if (n.r(r), Object.defineProperty(r, "default", {
enumerable: !0,
value: e
}), 2 & t && "string" != typeof e)
for (var o in e) n.d(r, o, function(t) {
return e[t]
}.bind(null, o));
return r
}, n.n = function(e) {
var t = e && e.__esModule ? function() {
return e.default
} : function() {
return e
};
return n.d(t, "a", t), t
}, n.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, n.p = "", n(n.s = 0)
}([function(e, t, n) {
var r, o, i, u = n(1),
a = n(2),
c = n(3),
s = u.api,
l = u.bridge,
d = [],
f = [],
p = /^http(?:s?)/;
function E(e) {
var t, n;
for (t = 0, n = f.length; t < n && !1 !== e(f[t]); t++);
}
function v(e) {
return e.contentWindow ? e.contentWindow : e.contentDocument && "parentWindow" in e.contentDocument ? e.contentDocument.parentWindow : null
}
function _(e) {
var t, n = [];
for (t in e) e.hasOwnProperty(t) && n.push(e[t]);
return n
}
function S(e, t, n) {
n.callbacks[e] = n.callbacks[e] || [], n.callbacks[e].push(t)
}
function h(e, t) {
var n = !0;
return t.callbacks[e] = [], E((function(t) {
if ((t.callbacks[e] || []).length) return n = !1, !1
})), n
}
function y(e, t, n) {
var r, o, i = v(n);
if (!i.postMessage) return !1;
r = n.getAttribute("src").split("?")[0], o = JSON.stringify({
method: e,
value: t
}), "//" === r.substr(0, 2) && (r = window.location.protocol + r), r = r.replace(/http:\/\/(w|wt).soundcloud.com/, "https://$1.soundcloud.com"), i.postMessage(o, r)
}
function b(e) {
var t;
return E((function(n) {
if (n.instance === e) return t = n, !1
})), t
}
function g(e) {
var t;
return E((function(n) {
if (v(n.element) === e) return t = n, !1
})), t
}
function m(e, t) {
return function(n) {
var r, o = !!((r = n) && r.constructor && r.call && r.apply),
i = b(this),
u = !o && t ? n : null,
a = o && !t ? n : null;
return a && S(e, a, i), y(e, u, i.element), this
}
}
function R(e, t, n) {
var r, o, i;
for (r = 0, o = t.length; r < o; r++) e[i = t[r]] = m(i, n)
}
function O(e, t, n) {
return e + "?url=" + t + "&" + function(e) {
var t, n, r = [];
for (t in e) e.hasOwnProperty(t) && (n = e[t], r.push(t + "=" + ("start_track" === t ? parseInt(n, 10) : n ? "true" : "false")));
return r.join("&")
}(n)
}
function w(e, t, n) {
var r, o, i = e.callbacks[t] || [];
for (r = 0, o = i.length; r < o; r++) i[r].apply(e.instance, n);
(function(e) {
var t, n = !1;
for (t in a)
if (a.hasOwnProperty(t) && a[t] === e) {
n = !0;
break
} return n
}(t) || t === s.READY) && (e.callbacks[t] = [])
}
function A(e) {
var t, n, r, o, i;
try {
n = JSON.parse(e.data)
} catch (e) {
return !1
}
return t = g(e.source), r = n.method, o = n.value, (!t || P(e.origin) === P(t.domain)) && (t ? (r === s.READY && (t.isReady = !0, w(t, "__LATE_BINDING__"), h("__LATE_BINDING__", t)), r !== s.PLAY || t.playEventFired || (t.playEventFired = !0), r !== s.PLAY_PROGRESS || t.playEventFired || (t.playEventFired = !0, w(t, s.PLAY, [o])), i = [], void 0 !== o && i.push(o), void w(t, r, i)) : (r === s.READY && d.push(e.source), !1))
}
function P(e) {
return e.replace(p, "")
}
window.addEventListener ? window.addEventListener("message", A, !1) : window.attachEvent("onmessage", A), e.exports = i = function(e, t, n) {
var i;
if (("" === (i = e) || i && i.charCodeAt && i.substr) && (e = document.getElementById(e)), ! function(e) {
return !(!e || 1 !== e.nodeType || "IFRAME" !== e.nodeName.toUpperCase())
}(e)) throw new Error("SC.Widget function should be given either iframe element or a string specifying id attribute of iframe element.");
t && (n = n || {}, e.src = O("http://wt.soundcloud.test:9200/", t, n));
var u, a, c = g(v(e));
return c && c.instance ? c.instance : (u = d.indexOf(v(e)) > -1, a = new r(e), f.push(new o(a, e, u)), a)
}, i.Events = s, window.SC = window.SC || {}, window.SC.Widget = i, o = function(e, t, n) {
this.instance = e, this.element = t, this.domain = function(e) {
var t, n, r, o = "";
"//" === e.substr(0, 2) && (e = window.location.protocol + e);
for (r = e.split("/"), t = 0, n = r.length; t < n && t < 3; t++) o += r[t], t < 2 && (o += "/");
return o
}(t.getAttribute("src")), this.isReady = !!n, this.callbacks = {}
}, (r = function() {}).prototype = {
constructor: r,
load: function(e, t) {
if (e) {
t = t || {};
var n = this,
r = b(this),
o = r.element,
i = o.src,
u = i.substr(0, i.indexOf("?"));
r.isReady = !1, r.playEventFired = !1, o.onload = function() {
n.bind(s.READY, (function() {
var e, n = r.callbacks;
for (e in n) n.hasOwnProperty(e) && e !== s.READY && y(l.ADD_LISTENER, e, r.element);
t.callback && t.callback()
}))
}, o.src = O(u, e, t)
}
},
bind: function(e, t) {
var n = this,
r = b(this);
return r && r.element && (e === s.READY && r.isReady ? setTimeout(t, 1) : r.isReady ? (S(e, t, r), y(l.ADD_LISTENER, e, r.element)) : S("__LATE_BINDING__", (function() {
n.bind(e, t)
}), r)), this
},
unbind: function(e) {
var t, n = b(this);
n && n.element && (t = h(e, n), e !== s.READY && t && y(l.REMOVE_LISTENER, e, n.element))
}
}, R(r.prototype, _(a)), R(r.prototype, _(c), !0)
}, function(e, t) {
t.api = {
LOAD_PROGRESS: "loadProgress",
PLAY_PROGRESS: "playProgress",
PLAY: "play",
PAUSE: "pause",
FINISH: "finish",
SEEK: "seek",
READY: "ready",
OPEN_SHARE_PANEL: "sharePanelOpened",
CLICK_DOWNLOAD: "downloadClicked",
CLICK_BUY: "buyClicked",
ERROR: "error"
}, t.bridge = {
REMOVE_LISTENER: "removeEventListener",
ADD_LISTENER: "addEventListener"
}
}, function(e, t) {
e.exports = {
GET_VOLUME: "getVolume",
GET_DURATION: "getDuration",
GET_POSITION: "getPosition",
GET_SOUNDS: "getSounds",
GET_CURRENT_SOUND: "getCurrentSound",
GET_CURRENT_SOUND_INDEX: "getCurrentSoundIndex",
IS_PAUSED: "isPaused"
}
}, function(e, t) {
e.exports = {
PLAY: "play",
PAUSE: "pause",
TOGGLE: "toggle",
SEEK_TO: "seekTo",
SET_VOLUME: "setVolume",
NEXT: "next",
PREV: "prev",
SKIP: "skip"
}
}]);
//# sourceMappingURL=http://ent/web-sourcemaps/api.js-27d0ec1de3c5.map
const widget = SC.Widget(document.getElementById('track'));
const playBtn = document.getElementById("playRadio");
playBtn.addEventListener('click', function(e) {
e.preventDefault();
widget.toggle();
});
function myFunction(x) {
x.classList.toggle("fa-stop");
}
widget.getCurrentSoundIndex(function(sound) {
console.log(sound.title);
});
#playRadio {
font-size: 72px;
width: 50%;
text-align: center;
padding: 40px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/0b1431f7fb.js" crossorigin="anonymous"></script>
</head>
<body>
<i id="playRadio" onclick="myFunction(this)" class="fas fa-play"></i>
<iframe id="track" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/249593158&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</body>
</html>

How to compare two routes by hand

How can I manually (programmatically) compare two routes and find out if they are same? (if router-link-active or router-link-exact-active would be present)
Generally i need this sort of a function
/*
#params route1, route2 : Route
*/
function isActivated(route1, route2) {
/* comparing them somehow */
return {
exactActive,
active
};
}
Use Case:
I have a NestedLink.vue component which is wrapper over router-link.
It takes to prop just as router-link (and passes it down to child router-link). If current route is active, nested links will apear nearby.
My approach:
function isActivated(route1, route2) {
if (
route1.matched.some(record =>
record.regex.test(route2.fullPath)
)
) {
return { exactActive: true };
}
return { exactActive: false };
}
It may tell when routes are exact-active but not for not-exact-active.

This is the code, used inside router-link component.
const START = '/';
const trailingSlashRE = /\/?$/;
function isObjectEqual (a, b) {
if ( a === void 0 ) a = {};
if ( b === void 0 ) b = {};
// handle null value #1566
if (!a || !b) { return a === b }
var aKeys = Object.keys(a);
var bKeys = Object.keys(b);
if (aKeys.length !== bKeys.length) {
return false
}
return aKeys.every(function (key) {
var aVal = a[key];
var bVal = b[key];
// check nested equality
if (typeof aVal === 'object' && typeof bVal === 'object') {
return isObjectEqual(aVal, bVal)
}
return String(aVal) === String(bVal)
})
}
function isSameRoute (a, b) {
if (b === START) {
return a === b
} else if (!b) {
return false
} else if (a.path && b.path) {
return (
a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
a.hash === b.hash &&
isObjectEqual(a.query, b.query)
)
} else if (a.name && b.name) {
return (
a.name === b.name &&
a.hash === b.hash &&
isObjectEqual(a.query, b.query) &&
isObjectEqual(a.params, b.params)
)
} else {
return false
}
}
So, here's how to use it inside component:
// OR JUST A STRING '/home'
let link = { name: 'home' }
// will return true of false
let result = isSameRoute(this.$router.resolve(link).resolved, this.$route)

It is corret usage to create a tab for mithril?

I want to create a simple Tab but I think it is strange for my using:
var root = document.body
var index = {
view: () => index.html,
html: m('div', { id: 'div1' }, [
[
(function () {
let value = ["A", "B", "C", "D"]
let output = []
for (let i = 0; i < 4; i++) {
output.push(m('input', {
class: (function () {
if (i == 0) return "onit"
})(),
type: 'button',
value: value[i],
onclick: function () {
let div1 = document.getElementById("div1")
let btn = div1.getElementsByTagName("input")
let div1_div = div1.getElementsByTagName("div")
let _this = this
let num = (function () {
for (let i = 0; i < btn.length; i++) {
if (btn[i] == _this) {
return i
}
}
})()
for (let i = 0; i < btn.length; i++) {
btn[i].className = ""
}
this.className = "onit"
for (let i = 0; i < div1_div.length; i++) {
div1_div[i].setAttribute("style", "dispaly:none")
}
div1_div[num].setAttribute("style", "display:block")
}
}))
}
return output
})()
],
[
(function () {
let arr = ["aaa", "bbb", "ccc", "ddd"]
let output = []
for (let i = 0; i < 4; i++) {
output.push(m("div", { style: (the => i == 0 ? "display:block" : undefined)() }, arr[i]))
}
return output
})()
]
])
}
m.route(root, "/index", {
"/index": index
})
Is there any other simple way to achieve this?
If I click the button, the style of button will change and the display of all "div" will be changed. Screenshot

In mithril.js views you can only use expressions, for-loops, ifs and so on are no expressions and only possible the way you did it. Nevertheless there are other ways to achieve this
Loops can be achieved using the functional counterparts
let values = ["A", "B", "C", "D"]
let output = []
function(){
for (let i = 0; i < 4; i++) {
output.push(m('span', value)
}
return output
}()
can be written as
values.map(value => m('span', value)
if-Statements can be written using the ternary expression
function() {
if (condition) {
return 'this'
} else {
return 'that'
}
}()
just use
condition ? 'this' : 'that'
You can also use view functions if your view code gets to deeply nested and you need custom logic:
function someOtherView(someData) {
if (someData.shouldBeShown) {
return someData.text
}
}
function someView() {
...
someOtherView(someData)
...
}
This also makes your views more readable.

increment/decrements events for dijit.form.NumberSpinner

Is there any way to catch the event if the value inside dijit.form.NumberSpinner widget gets incremented or decremented?
What I intent to do is whenever value goes below 0 set text inside NumberSpinner widget as "Never" and when user increments it from "Never" it should be again set to 0.

dojo.declare("MySpinner", [Spinner], {
zeroValue: 'Never',
adjust: function(/*Object*/ val, /*Number*/ delta){
arguments[0] = val && val > 0 ? val : 0;
return this.inherited(arguments);
},
_getValueAttr: function() {
var v = this.inherited(arguments);
return (!v || v <= 0) ? 0 : v;
},
format: function(/*Number*/ value, /*dojo.number.__FormatOptions*/ constraints){
var v = this.inherited(arguments);
if (v <= 0 || !v)
return this.zeroValue;
return v;
},
isValid: function(/*Boolean*/ isFocused){
var v = this.get('value');
if (!v) {
return true;
}
return this.inherited(arguments);
}
});
Here's the working example
http://jsfiddle.net/cswing/zDVep/