We Keep Coding

Custom range slider does not work on mobile phone

I have a webpage with a custom price slider. For desktop it works just fine and when I check it in google developer tools for mobile, it works too, but when I open the webpage with my phone, slider stops working properly, it does not change the plan column. How can I debug something like that?
http://sagemailer-17.eugeneskom.com/
that's the code being used for the slider
window.onload = () => {
const init = function() {
const breakpoints = [{
value: 0,
step: 12.5,
stepsSoFar: 0
},
{
value: 200,
step: 50,
stepsSoFar: 16
},
{
value: 1000,
step: 50,
stepsSoFar: 32
},
{
value: 2000,
step: 500,
stepsSoFar: 52
},
{
value: 10000,
step: 1000,
stepsSoFar: 68
},
{
value: 30000,
step: 5000,
stepsSoFar: 88
},
{
value: 100000,
step: 10000,
stepsSoFar: 102
},
{
value: 300000,
step: 50000,
stepsSoFar: 122
},
{
value: 1000000,
stepsSoFar: 136,
step: 1
}
];
const pricing = [
[200, 4, 0.2],
[500, 10, 0.01],
[1000, 15, 0.01],
[2000, 20, 0.005],
[7000, 50, 0.005],
[10000, 65, 0.0025],
[16000, 80, 0.0022],
[25000, 100, 0.006],
[30000, 130, 0.002],
[65000, 200, 0.002],
[100000, 270, 0.0015],
[200000, 420, 0.0015],
[300000, 570, 0.0006],
[600000, 750, 0.0006],
[700000, 810, 0.0006],
[800000, 870, 0.0006],
[900000, 930, 0.0006],
[1000000, 990, 0.001]
];
const planBgs = document.querySelectorAll(".StepRangeSlider__trackHeadItem");
const media = window.matchMedia("(max-width: 1024px)");
const minValue = 200;
const maxStep = breakpoints[breakpoints.length - 1].stepsSoFar;
const slider = document.getElementById("stepRangeSliderWrap");
const handle = document.getElementById("rangeSliderHandle");
const tooltip = document.getElementById("rangeSliderTooltip");
const plans = document.querySelectorAll(".plan-content .right .content");
let plansBreakPoints;
let valueBlock;
let emailsBlock;
let isHorizontal;
let value = 200;
let step = 18;
let pressed = false;
const checkRangeSliderVersion = () => {
if (media.matches) {
valueBlock = document.querySelectorAll(".display-price-mob");
emailsBlock = document.querySelectorAll(".emails-count");
isHorizontal = false;
} else {
valueBlock = document.querySelectorAll(".display-price");
emailsBlock = document.querySelectorAll(".emails-count");
isHorizontal = true;
}
plansBreakPoints = [
planBgs[1].getBoundingClientRect()[isHorizontal ? "left" : "top"],
planBgs[2].getBoundingClientRect()[isHorizontal ? "left" : "top"]
];
};
checkRangeSliderVersion();
media.addListener(checkRangeSliderVersion);
const getPriceForEmailsCount = emails => {
for (let i = pricing.length - 1; i >= 0; i--) {
if (emails === pricing[i][0]) {
return pricing[i][1];
}
if (emails > pricing[i][0]) {
return (emails - pricing[i][0]) * pricing[i + 1][2] + pricing[i][1];
}
}
return null;
};
const getValueForStep = step => {
const nearest = breakpoints.reduce((prev, curr) =>
curr.stepsSoFar < step && curr.stepsSoFar > prev.stepsSoFar ?
curr :
prev
);
const additionalValue = (step - nearest.stepsSoFar) * nearest.step;
return nearest.value + additionalValue;
};
const handleChange = () => {
const offset = (step / maxStep) * 100;
handle.style[isHorizontal ? "left" : "top"] = offset + "%";
tooltip.textContent = Math.floor(value);
valueBlock.forEach(e => {
e.textContent = getPriceForEmailsCount(value) + "$";
});
emailsBlock.forEach(e => {
e.textContent = Math.floor(value);
});
};
const handleMove = e => {
const client = isHorizontal ? e.clientX : e.clientY;
const sliderRect = slider.getBoundingClientRect();
let startPosition = isHorizontal ? sliderRect.left : sliderRect.top;
let endPosition = isHorizontal ? sliderRect.right : sliderRect.bottom;
if (client <= plansBreakPoints[0]) {
plans.forEach(e => {
e.style.display = "none";
});
plans[0].style.display = "block";
} else if (
client >= plansBreakPoints[0] &&
client <= plansBreakPoints[1]
) {
plans.forEach(e => {
e.style.display = "none";
});
plans[1].style.display = "block";
} else if (client >= plansBreakPoints[1]) {
plans.forEach(e => {
e.style.display = "none";
});
plans[2].style.display = "block";
}
if (!client) return;
let position;
if (client < startPosition) {
position = 0;
} else if (client > endPosition) {
position = endPosition - startPosition;
} else {
position = client - startPosition;
}
const currentStep = Math.round(
(position / (isHorizontal ? sliderRect.width : sliderRect.height)) *
maxStep
);
const currentStepValue = getValueForStep(currentStep);
if (
currentStepValue >= minValue &&
(currentStepValue !== value || currentStep !== step)
) {
value = currentStepValue;
step = currentStep;
handleChange();
}
};
const handleTouchMove = e => {
if (pressed) {
handleMouseMove(e.touches[0]);
}
};
const handleMouseUp = e => {
if (pressed) {
pressed = false;
}
};
const handleMouseMove = e => {
if (pressed) {
handleMove(e);
}
};
window.addEventListener("touchmove", handleTouchMove);
window.addEventListener("touchend", handleMouseUp);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
slider.addEventListener("mousedown", function(e) {
e.preventDefault();
pressed = true;
handleMove(e);
});
slider.addEventListener("touchmove", e => {
e.preventDefault();
pressed = true;
handleMove(e.touches[0]);
});
handle.addEventListener("mousedown", function(e) {
e.preventDefault();
pressed = true;
handleMove(e);
});
handle.addEventListener("ontouchstart", function(e) {
e.preventDefault();
pressed = true;
handleMove(e.touches[0]);
});
};
init();
};

Configurable product using javascript / jquery

Configurable Product
Hi,
I'm trying to generate configurable products for the selected attributes using JavaScript.
I want to generate 3.0_Aluminium_1219, 3.0_Amber_1219, 3.8_Aluminium_1219 and 3.8_Amber_1219.
I have used the following script to store the option value in array
$('.complexSel').on('select2:select', function (e) {
var obj = {}
var keysArray = new Array();
var price = $('.complexSel').find(':selected');
$.each(price, function(index){
keysArray.push($(this).attr('data-mst-id'));
if($(this).attr('data-mst-id') in obj ) {
obj[$(this).attr('data-mst-id')].push({id:$(this).val(),text:$(this).text()});
}else{
obj[$(this).attr('data-mst-id')] = new Array();
obj[$(this).attr('data-mst-id')].push({id:$(this).val(),text:$(this).text()});
}
});
var unique = keysArray.filter(function(itm, i, keysArray) {
return i == keysArray.indexOf(itm);
});
console.log(obj);
});
Please help me to achieve the result

used the following function to solve this issue.
$('.complexSel').on('change', function (e) {
var obj = {}
//var obj = new Array();
var price = $('.complexSel').find(':selected');
$.each(price, function(index){
if($(this).attr('data-mst-val') in obj ) {
obj[$(this).attr('data-mst-val')].push($(this).text());
}else{
obj[$(this).attr('data-mst-val')] = new Array();
obj[$(this).attr('data-mst-val')].push($(this).text());
}
});
var cartesianRes = getCartesian(obj);
console.log(cartesianRes);
/* OUTPUT AS FOLLOWS*/
/*
[
{
"Size": "3.0",
"Color": "Aluminum"
},
{
"Size": "3.0",
"Color": "Amber"
},
{
"Size": "3.8",
"Color": "Aluminum"
},
{
"Size": "3.8",
"Color": "Amber"
}
]
*/
});
function getCartesian(object) {
return Object.entries(object).reduce((r, [k, v]) => {
var temp = [];
r.forEach(s =>
(Array.isArray(v) ? v : [v]).forEach(w =>
(w && typeof w === 'object' ? getCartesian(w) : [w]).forEach(x =>
temp.push(Object.assign({}, s, { [k]: x }))
)
)
);
return temp;
}, [{}]);
}

Failed to load resource:server responded with a status of 500 (Internal Server Error)

I'm trying to send a call using ajax but I got this error.
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
The error is in jquery.min.js file
send # jquery.min.js:4
ajax # jquery.min.js:4
(anonymous) # upload_excel:534
dispatch # jquery.min.js:3
r.handle # jquery.min.js:3
try {
h.send(b.hasContent && b.data || null)
} catch (i) {
if (c) throw i
}
}, abort: function() {
c && c()
}
}: void 0
}), n.ajaxSetup({
accepts: {
script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
},
contents: {
script: /\b(?:java|ecma)script\b/
},
converters: {
"text script": function(a) {
return n.globalEval(a), a
}
}
}), n.ajaxPrefilter("script", function(a) {
void 0 === a.cache && (a.cache = !1), a.crossDomain && (a.type = "GET")
}), n.ajaxTransport("script", function(a) {
if (a.crossDomain) {
var b, c;
return {
send: function(e, f) {
b = n("<script>").prop({
charset: a.scriptCharset,
src: a.url
}).on("load error", c = function(a) {
b.remove(), c = null, a && f("error" === a.type ? 404 : 200, a.type)
}), d.head.appendChild(b[0])
},
abort: function() {
c && c()
}
}
}
});
var Jb = [],
Kb = /(=)\?(?=&|$)|\?\?/;
n.ajaxSetup({
jsonp: "callback",
jsonpCallback: function() {
var a = Jb.pop() || n.expando + "_" + kb++;
return this[a] = !0, a
}
}), n.ajaxPrefilter("json jsonp", function(b, c, d) {
var e, f, g, h = b.jsonp !== !1 && (Kb.test(b.url) ? "url" : "string" == typeof b.data && 0 === (b.contentType || "").indexOf("application/x-www-form-urlencoded") && Kb.test(b.data) && "data");
return h || "jsonp" === b.dataTypes[0] ? (e = b.jsonpCallback = n.isFunction(b.jsonpCallback) ? b.jsonpCallback() : b.jsonpCallback, h ? b[h] = b[h].replace(Kb, "$1" + e) : b.jsonp !== !1 && (b.url += (lb.test(b.url) ? "&" : "?") + b.jsonp + "=" + e), b.converters["script json"] = function() {
return g || n.error(e + " was not called"), g[0]
}, b.dataTypes[0] = "json", f = a[e], a[e] = function() {
g = arguments
}, d.always(function() {
void 0 === f ? n(a).removeProp(e) : a[e] = f, b[e] && (b.jsonpCallback = c.jsonpCallback, Jb.push(e)), g && n.isFunction(f) && f(g[0]), g = f = void 0
}), "script") : void 0
}), n.parseHTML = function(a, b, c) {
if (!a || "string" != typeof a) return null;
"boolean" == typeof b && (c = b, b = !1), b = b || d;
var e = x.exec(a),
f = !c && [];
return e ? [b.createElement(e[1])] : (e = ca([a], b, f), f && f.length && n(f).remove(), n.merge([], e.childNodes))
};
var Lb = n.fn.load;
n.fn.load = function(a, b, c) {
if ("string" != typeof a && Lb) return Lb.apply(this, arguments);
var d, e, f, g = this,
h = a.indexOf(" ");
return h > -1 && (d = n.trim(a.slice(h)), a = a.slice(0, h)), n.isFunction(b) ? (c = b, b = void 0) : b && "object" == typeof b && (e = "POST"), g.length > 0 && n.ajax({
url: a,
type: e || "GET",
dataType: "html",
data: b
}).done(function(a) {
f = arguments, g.html(d ? n("<div>").append(n.parseHTML(a)).find(d) : a)
}).always(c && function(a, b) {
g.each(function() {
c.apply(this, f || [a.responseText, b, a])
})
}), this
}, n.each(["ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend"], function(a, b) {
n.fn[b] = function(a) {
return this.on(b, a)
}
}), n.expr.filters.animated = function(a) {
return n.grep(n.timers, function(b) {
return a === b.elem
}).length
};
function Mb(a) {
return n.isWindow(a) ? a : 9 === a.nodeType && a.defaultView
}
n.offset = {
setOffset: function(a, b, c) {
var d, e, f, g, h, i, j, k = n.css(a, "position"),
l = n(a),
m = {};
"static" === k && (a.style.position = "relative"), h = l.offset(), f = n.css(a, "top"), i = n.css(a, "left"), j = ("absolute" === k || "fixed" === k) && (f + i).indexOf("auto") > -1, j ? (d = l.position(), g = d.top, e = d.left) : (g = parseFloat(f) || 0, e = parseFloat(i) || 0), n.isFunction(b) && (b = b.call(a, c, n.extend({}, h))), null != b.top && (m.top = b.top - h.top + g), null != b.left && (m.left = b.left - h.left + e), "using" in b ? b.using.call(a, m) : l.css(m)
}
}, n.fn.extend({
offset: function(a) {
if (arguments.length) return void 0 === a ? this : this.each(function(b) {
n.offset.setOffset(this, a, b)
});
var b, c, d = this[0],
e = {
top: 0,
left: 0
},
f = d && d.ownerDocument;
if (f) return b = f.documentElement, n.contains(b, d) ? (e = d.getBoundingClientRect(), c = Mb(f), {
top: e.top + c.pageYOffset - b.clientTop,
left: e.left + c.pageXOffset - b.clientLeft
}) : e
},
position: function() {
if (this[0]) {
var a, b, c = this[0],
d = {
top: 0,
left: 0
};
return "fixed" === n.css(c, "position") ? b = c.getBoundingClientRect() : (a = this.offsetParent(), b = this.offset(), n.nodeName(a[0], "html") || (d = a.offset()), d.top += n.css(a[0], "borderTopWidth", !0), d.left += n.css(a[0], "borderLeftWidth", !0)), {
top: b.top - d.top - n.css(c, "marginTop", !0),
left: b.left - d.left - n.css(c, "marginLeft", !0)
}
}
},
offsetParent: function() {
return this.map(function() {
var a = this.offsetParent;
while (a && "static" === n.css(a, "position")) a = a.offsetParent;
return a || Ea
})
}
}), n.each({
scrollLeft: "pageXOffset",
scrollTop: "pageYOffset"
}, function(a, b) {
var c = "pageYOffset" === b;
n.fn[a] = function(d) {
return K(this, function(a, d, e) {
var f = Mb(a);
return void 0 === e ? f ? f[b] : a[d] : void(f ? f.scrollTo(c ? f.pageXOffset : e, c ? e : f.pageYOffset) : a[d] = e)
}, a, d, arguments.length)
}
}), n.each(["top", "left"], function(a, b) {
n.cssHooks[b] = Ga(l.pixelPosition, function(a, c) {
return c ? (c = Fa(a, b), Ba.test(c) ? n(a).position()[b] + "px" : c) : void 0
})
}), n.each({
Height: "height",
Width: "width"
}, function(a, b) {
n.each({
padding: "inner" + a,
content: b,
"": "outer" + a
}, function(c, d) {
n.fn[d] = function(d, e) {
var f = arguments.length && (c || "boolean" != typeof d),
g = c || (d === !0 || e === !0 ? "margin" : "border");
return K(this, function(b, c, d) {
var e;
return n.isWindow(b) ? b.document.documentElement["client" + a] : 9 === b.nodeType ? (e = b.documentElement, Math.max(b.body["scroll" + a], e["scroll" + a], b.body["offset" + a], e["offset" + a], e["client" + a])) : void 0 === d ? n.css(b, c, g) : n.style(b, c, d, g)
}, b, f ? d : void 0, f, null)
}
})
}), n.fn.extend({
bind: function(a, b, c) {
return this.on(a, null, b, c)
},
unbind: function(a, b) {
return this.off(a, null, b)
},
delegate: function(a, b, c, d) {
return this.on(b, a, c, d)
},
undelegate: function(a, b, c) {
return 1 === arguments.length ? this.off(a, "**") : this.off(b, a || "**", c)
},
size: function() {
return this.length
}
}), n.fn.andSelf = n.fn.addBack, "function" == typeof define && define.amd && define("jquery", [], function() {
return n
});
var Nb = a.jQuery,
Ob = a.$;
return n.noConflict = function(b) {
return a.$ === n && (a.$ = Ob), b && a.jQuery === n && (a.jQuery = Nb), n
}, b || (a.jQuery = a.$ = n), n
});
When I checked the error in phpmyadmin, I got this error. Any Ideas how I can solve it.
{
"pma_version": "4.4.15.2",
"browser_name": "CHROME",
"browser_version": "79.0.3945.79",
"user_os": "Win",
"server_software": "Apache/2.2.15 (CentOS)",
"user_agent_string": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36",
"locale": "en",
"configuration_storage": "enabled",
"php_version": "5.6.40",
"exception_type": "js",
"exception": {
"mode": "stack",
"name": "TypeError",
"message": "Cannot read property '0' of null",
"stack": [
{
"line": 235,
"func": "",
"context": [
" lastException = null;",
" notifyHandlers.apply(null, [stack, null].concat(args));",
" }",
" }, (stack.incomplete ? 2000 : 0));",
"",
" throw ex; // re-throw to propagate to the top level (and cause wind//...",
" }",
"",
" report.subscribe = subscribe;",
" report.unsubscribe = unsubscribe;",
" return report;"
],
"column": "",
"filename": "tracekit/tracekit.js"
},
{
"func": "getFieldValidators",
"line": 302,
"column": "40",
"context": [
" * #return array of [function, parameters to be passed to function]",
" */",
"function getFieldValidators(field_id, onKeyUpOnly)",
"{",
" // look for field bound validator",
" var name = field_id.match(/[^-]+$/)[0];",
" if (typeof validators._field[name] != 'undefined') {",
" return [[validators._field[name], null]];",
" }",
"",
" // look for registered validators"
],
"filename": "config.js"
},
{
"func": "validate_field",
"line": 418,
"column": "21",
"context": [
"{",
" var args, result;",
" var $field = $(field);",
" var field_id = $field.attr('id');",
" errors[field_id] = [];",
" var functions = getFieldValidators(field_id, isKeyUp);",
" for (var i = 0; i < functions.length; i++) {",
" if (typeof functions[i][1] !== 'undefined' && functions[i][1] !== n//...",
" args = functions[i][1].slice(0);",
" } else {",
" args = [];"
],
"filename": "config.js"
},
{
"func": "HTMLDocument.<anonymous>",
"line": 511,
"column": "13",
"context": [
" var $check_page_refresh = $('#check_page_refresh');",
" if ($check_page_refresh.length === 0 || $check_page_refresh.val() == '1') {",
" // run all field validators",
" var errors = {};",
" for (var i = 0; i < $elements.length; i++) {",
" validate_field($elements[i], false, errors);",
" }",
" // run all fieldset validators",
" $('fieldset').each(function () {",
" validate_fieldset(this, false, errors);",
" });"
],
"filename": "config.js"
},
{
"func": "HTMLDocument.new_func",
"line": 279,
"column": "33",
"context": [
" */",
" wrap_function: function (func) {",
" if (!func.wrapped) {",
" var new_func = function () {",
" try {",
" return func.apply(this, arguments);",
" } catch (x) {",
" TraceKit.report(x);",
" }",
" };",
" new_func.wrapped = true;"
],
"filename": "error_report.js"
},
{
"func": "HTMLDocument.dispatch",
"line": 3,
"column": "8436",
"context": [
"/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/li//...",
"!function(a,b){\"object\"==typeof module&&\"object\"==typeof module.exports?mod//...",
"if(k&&j[k]&&(e||j[k].data)||void 0!==d||\"string\"!=typeof b)return k||(k=i?a//...",
"},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(this)://...",
";",
"",
"function sprintf() {",
"/*"
],
"filename": "jquery/jquery-1.11.1.min.js"
},
{
"func": "HTMLDocument.$event.dispatch",
"line": 374,
"column": "19",
"context": [
"$event.dispatch = function( event ){",
"\tif ( $.data( this, \"suppress.\"+ event.type ) - new Date().getTime() > 0 ){",
"\t\t$.removeData( this, \"suppress.\"+ event.type );",
"\t\treturn;",
"\t}",
"\treturn $dispatch.apply( this, arguments );",
"};",
"",
"// event fix hooks for touch events...",
"var touchHooks = ",
"$event.fixHooks.touchstart = "
],
"filename": "jquery/jquery.event.drag-2.2.js"
},
{
"func": "HTMLDocument.r.handle",
"line": 3,
"column": "5139",
"context": [
"/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/li//...",
"!function(a,b){\"object\"==typeof module&&\"object\"==typeof module.exports?mod//...",
"if(k&&j[k]&&(e||j[k].data)||void 0!==d||\"string\"!=typeof b)return k||(k=i?a//...",
"},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(this)://...",
";",
"",
"function sprintf() {",
"/*"
],
"filename": "jquery/jquery-1.11.1.min.js"
},
{
"func": "Object.trigger",
"line": 3,
"column": "7537",
"context": [
"/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/li//...",
"!function(a,b){\"object\"==typeof module&&\"object\"==typeof module.exports?mod//...",
"if(k&&j[k]&&(e||j[k].data)||void 0!==d||\"string\"!=typeof b)return k||(k=i?a//...",
"},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(this)://...",
";",
"",
"function sprintf() {",
"/*"
],
"filename": "jquery/jquery-1.11.1.min.js"
},
{
"func": "HTMLDocument.<anonymous>",
"line": 3,
"column": "15404",
"context": [
"/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/li//...",
"!function(a,b){\"object\"==typeof module&&\"object\"==typeof module.exports?mod//...",
"if(k&&j[k]&&(e||j[k].data)||void 0!==d||\"string\"!=typeof b)return k||(k=i?a//...",
"},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(this)://...",
";",
"",
"function sprintf() {",
"/*"
],
"filename": "jquery/jquery-1.11.1.min.js"
},
{
"func": "Function.each",
"line": 2,
"column": "2973",
"context": [
"/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/li//...",
"!function(a,b){\"object\"==typeof module&&\"object\"==typeof module.exports?mod//...",
"if(k&&j[k]&&(e||j[k].data)||void 0!==d||\"string\"!=typeof b)return k||(k=i?a//...",
"},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(this)://...",
";",
"",
"function sprintf() {"
],
"filename": "jquery/jquery-1.11.1.min.js"
}
],
"useragent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36",
"incomplete": "false",
"partial": "true",
"uri": "sql.php?target="
},
"script_name": "sql.php",
"microhistory": {
"current_index": "0"
}
}
Also, I have this notification in my PHPMyAdmin is it possible this could be the cause?
Your PHP MySQL library version 5.1.69 differs from your MySQL server version 5.5.57. This may cause unpredictable behavior.

My Vue chrome extension not working in production mode. The error is: "Could not establish connection. Receiving end does not exist"

I am using vue-cli 3.5.1 for my chrome extension. Here is my vue.config.js file:
const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
function setWebpack() {
let config = {}
config.plugins = [
new ChromeExtensionReloader({
entries: {
background: 'background.js'
}
})
]
config.entry = {
background: './src/background.js',
inpage: './src/inpage.js'
}
if (process.env.NODE_ENV === 'development') {
config.output = {
filename: 'js/[name].js',
chunkFilename: 'js/[name].js'
}
}
return config
}
module.exports = {
configureWebpack: setWebpack(),
filenameHashing: process.env.NODE_ENV === 'development',
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
notification: {
entry: 'src/main.js',
template: 'public/notification.html',
filename: 'notification.html'
}
},
css: {
loaderOptions: {
sass: {
data: `#import "#/styles/index.scss";`
}
}
}
}
Everything works in 'development' mode, but not in 'production' mode.
I think the problem is in the background.js file. It is not executing correctly. You can look at the file below.
The fe77 method seems to be never executed. I put a console log inside it, and there was nothing in my browser console. Also I replaced the content of compiled background.js with the raw code from my src folder and everything worked. No errors. I have tried to google this problem, but it no luck, since it's not that much about writing chrome extensions with vue cli 3... Any help would be much appreciated.
My background.js output in production mode ():
(function (e) {
function r(r) {
for (var n, c, i = r[0], a = r[1], s = r[2], l = 0, p = []; l < i.length; l++) c = i[l], o[c] && p.push(o[c][0]), o[c] = 0;
for (n in a) Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]);
f && f(r);
while (p.length) p.shift()();
return u.push.apply(u, s || []), t()
}
function t() {
for (var e, r = 0; r < u.length; r++) {
for (var t = u[r], n = !0, i = 1; i < t.length; i++) {
var a = t[i];
0 !== o[a] && (n = !1)
}
n && (u.splice(r--, 1), e = c(c.s = t[0]))
}
return e
}
var n = {}, o = {background: 0}, u = [];
function c(r) {
if (n[r]) return n[r].exports;
var t = n[r] = {i: r, l: !1, exports: {}};
return e[r].call(t.exports, t, t.exports, c), t.l = !0, t.exports
}
c.e = function () {
return Promise.resolve()
}, c.m = e, c.c = n, c.d = function (e, r, t) {
c.o(e, r) || Object.defineProperty(e, r, {enumerable: !0, get: t})
}, c.r = function (e) {
"undefined" !== typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
}, c.t = function (e, r) {
if (1 & r && (e = c(e)), 8 & r) return e;
if (4 & r && "object" === typeof e && e && e.__esModule) return e;
var t = Object.create(null);
if (c.r(t), Object.defineProperty(t, "default", {
enumerable: !0,
value: e
}), 2 & r && "string" != typeof e) for (var n in e) c.d(t, n, function (r) {
return e[r]
}.bind(null, n));
return t
}, c.n = function (e) {
var r = e && e.__esModule ? function () {
return e["default"]
} : function () {
return e
};
return c.d(r, "a", r), r
}, c.o = function (e, r) {
return Object.prototype.hasOwnProperty.call(e, r)
}, c.p = "/";
var i = window["webpackJsonp"] = window["webpackJsonp"] || [], a = i.push.bind(i);
i.push = r, i = i.slice();
for (var s = 0; s < i.length; s++) r(i[s]);
var f = a;
u.push(["fe77", "chunk-vendors", "chunk-common"]), t()
})({
fe77: function (e, r, t) {
"use strict";
t.r(r);
t("cadf"), t("551c"), t("f751"), t("097d");
var n = {pass: "123123"};
chrome.runtime.onMessage.addListener(function (e, r, t) {
var o = r.url || r.tab.url, u = /^chrome-extension/.test(o);
if (!u) return "getNetAddress" === e.type ? (chrome.storage.local.get("currentNet", function (e) {
var r = e.currentNet;
t({type: "netAddress", address: r})
}), !0) : (chrome.tabs.create({url: chrome.extension.getURL("notification.html"), active: !1}, function (n) {
chrome.windows.create({tabId: n.id, type: "popup", focused: !0, width: 400, height: 600}, function () {
e.sender = r, console.log(e), setTimeout(function () {
chrome.runtime.sendMessage(e, function (e) {
if (chrome.runtime.lastError) return console.error(chrome.runtime.lastError.message);
t(e)
})
}, 1e3)
})
}), !0);
switch (e.type) {
case"setState":
return void (n[e.prop] = e.data);
case"getState":
return void t(n[e.prop]);
default:
return
}
})
}
});
//# sourceMappingURL=background.js.map
expected: background.js should work in both development and production modes.
actual: background.js works only in development mode
UPD1 This is my manifest.json:
{
"name": "web-wallet",
"version": "0.1.0",
"description": "Nerthus web wallet extension",
"background": {
"scripts": ["js/background.js"],
"persistent": false
},
"permissions": [
"activeTab",
"storage",
"*://*/",
"notifications",
"tabs"
],
"content_security_policy": "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'",
"browser_action": {
"default_popup": "index.html",
"default_icon": {
"16": "logo/16.png",
"32": "logo/32.png",
"48": "logo/48.png",
"128": "logo/128.png"
}
},
"content_scripts": [
{
"matches": [
"file://*/*",
"http://*/*",
"https://*/*"
],
"js": [
"content.js"
],
"run_at": "document_end"
}
],
"web_accessible_resources": [
"js/inpage.js",
"backend.js"
],
"manifest_version": 2
}

What is the initialize function of this code below?

I have this code from an old website. I want to initialize this function in my custom js file. But I can't understand how to call this function in my custom.js file. Actually, This code performs as like as a scrollable slider which behaves that when I scroll to down than previous & next scroll step will be opacity 0 and current step opacity will be 1.
(window.webpackJsonpOdmans = window.webpackJsonpOdmans || []).push([
[64], {
433: function(t, e, i) {},
435: function(t, e, i) {
var n = {
"./oddmans-cross-grey.svg": 436,
"./global-scroll.svg": 437
};
function s(t) {
var e = o(t);
return i(e)
}
function o(t) {
var e = n[t];
if (!(e + 1)) {
var i = new Error("Cannot find module '" + t + "'");
throw i.code = "MODULE_NOT_FOUND", i
}
return e
}
s.keys = function() {
return Object.keys(n)
}, s.resolve = o, t.exports = s, s.id = 435
},
436: function(t, e, i) {
"use strict";
i.r(e), e.default = {
id: "icon-oddmans-cross-grey-usage",
viewBox: "33 -33 88 88",
url: i.p + "scroll-steps.svg#icon-oddmans-cross-grey",
toString: function() {
return this.url
}
}
},
437: function(t, e, i) {
"use strict";
i.r(e), e.default = {
id: "icon-global-scroll-usage",
viewBox: "0 0 14 22",
url: i.p + "scroll-steps.svg#icon-global-scroll",
toString: function() {
return this.url
}
}
},
482: function(t, e, i) {
"use strict";
i.r(e), i(16), i(11), i(12), i(433);
var n = i(1),
s = (i(28), i(34), i(35), i(36), i(5), i(6), i(29), i(3), i(8), i(9), i(10), i(0)),
o = i(4),
r = i.n(o),
a = i(2);
function l(t) {
return (l = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
return typeof t
} : function(t) {
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
})(t)
}
function h(t) {
return (h = Object.setPrototypeOf ? Object.getPrototypeOf : function(t) {
return t.__proto__ || Object.getPrototypeOf(t)
})(t)
}
function u(t, e) {
return (u = Object.setPrototypeOf || function(t, e) {
return t.__proto__ = e, t
})(t, e)
}
function c(t) {
if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return t
}
var d = function(t) {
function e() {
var t, i, n;
! function(t, i) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
}(this);
for (var s = arguments.length, o = new Array(s), r = 0; r < s; r++) o[r] = arguments[r];
return (i = !(n = (t = h(e)).call.apply(t, [this].concat(o))) || "object" !== l(n) && "function" != typeof n ? c(this) : n).setBinds = i.setBinds.bind(c(c(i))), a.f.isTouch && !a.f.deviceTypeByViewport !== a.c ? i.onTouchDetect() : (i.setBinds(), i.initContent()), i
}
var i;
return function(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: !0,
configurable: !0
}
}), e && u(t, e)
}(e, s.a), (i = [{
key: "setBinds",
value: function() {
this.showNextStep = this.showNextStep.bind(this), this.initContent = this.initContent.bind(this), this.onScroll = this.onScroll.bind(this), this.setIndex = this.setIndex.bind(this), this.change = this.change.bind(this), this.setHiddens = this.setHiddens.bind(this), this.addListeners = this.addListeners.bind(this), this.goScroll = this.goScroll.bind(this)
}
}, {
key: "onTouchDetect",
value: function() {
this.element.classList.add("scroll-steps--second-style")
}
}, {
key: "initContent",
value: function() {
this.steps = this.refs.steps, this.btn = this.refs.btn, this.cross = this.refs.cross, this.scrollIcon = this.refs.scrollIcon, this.toDown = !0, this.blockEvent = !1, this.duration = 600, this.index = 0, this.height = this.element.getBoundingClientRect().height;
for (var t = 0; t < this.steps.length; t++) this.steps[t].style.visibility = "hidden", this.steps[t].style.opacity = 0, this.steps[t].hiddenElements = function(t) {
if (Array.isArray(t)) {
for (var e = 0, i = new Array(t.length); e < t.length; e++) i[e] = t[e];
return i
}
}(e = this.steps[t].querySelectorAll(".hidden")) || function(t) {
if (Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t)) return Array.from(t)
}(e) || function() {
throw new TypeError("Invalid attempt to spread non-iterable instance")
}(), this.steps[t].header = this.steps[t].querySelector(".scroll-steps__title");
var e;
this.setIndex(), this.currentStep.style.visibility = "", this.currentStep.style.opacity = 1, this.setHiddens(this.currentStep, "remove"), this.addListeners()
}
}, {
key: "addListeners",
value: function() {
var t = this;
this.btn.addEventListener("click", function() {
t.toDown = !0, t.goScroll(t.height)
}), document.body.addEventListener("wheel", this.onScroll)
}
}, {
key: "goScroll",
value: function(t) {
r()({
targets: "body, html",
duration: 500,
scrollTop: t,
easing: "easeInOutQuart"
})
}
}, {
key: "setHiddens",
value: function(t, e) {
for (var i = 0; i < t.hiddenElements.length; i++) t.hiddenElements[i].classList[e]("hidden")
}
}, {
key: "onScroll",
value: function(t) {
this.blockEvent && t.preventDefault();
var e = window.pageYOffset < .6 * this.height;
if (!this.blockEvent && e) {
var i = t.deltaY;
i > 0 && this.nextStep ? (t.preventDefault(), this.toDown = !0, this.change()) : i < 0 && this.previousStep && (t.preventDefault(), this.toDown = !1, window.pageYOffset > 0 && e && this.goScroll(0), this.change())
}
}
}, {
key: "change",
value: function() {
this.index >= 0 && this.index < this.steps.length && (this.blockEvent = !0, 0 === this.index && (this.scrollIcon.classList.add("hidden"), console.log("hided")), this.setHiddens(this.currentStep, "add"), r()({
targets: this.currentStep.header,
opacity: 0,
translateY: this.toDown ? "-50px" : "50px",
duration: .7 * this.duration,
easing: "easeInSine"
}), r()({
targets: this.currentStep,
opacity: 0,
translateY: [{
value: "-50%",
duration: 0
}, {
value: this.toDown ? "-90%" : "-10%",
duration: this.duration
}],
duration: this.duration,
easing: "easeInSine",
complete: this.showNextStep
}))
}
}, {
key: "showNextStep",
value: function() {
var t = this;
this.currentStep.style.visibility = "hidden";
var e = this.toDown ? this.nextStep : this.previousStep;
e.style.visibility = "", this.toDown ? this.index++ : this.index--, this.setIndex(), 0 === this.index && this.scrollIcon.classList.remove("hidden"), r()({
targets: this.cross,
rotate: [{
value: 0,
duration: 0
}, {
value: this.toDown ? 90 : -90,
duration: .7 * this.duration
}],
easing: "easeInOutSine"
}), r()({
targets: e.header,
opacity: [{
value: 0,
duration: 0
}, {
value: 1,
duration: .7 * this.duration
}],
translateY: [{
value: this.toDown ? "-50px" : "50px",
duration: 0
}, {
value: 0,
duration: .7 * this.duration
}],
easing: "easeOutSine"
}), r()({
targets: e,
opacity: [{
value: 0,
duration: 0
}, {
value: 1,
duration: this.duration
}],
translateY: [{
value: this.toDown ? "-10%" : "-90%",
duration: 0
}, {
value: "-50%",
duration: this.duration
}],
easing: "easeOutSine",
complete: function() {
t.blockEvent = !1, t.setHiddens(e, "remove")
}
})
}
}, {
key: "setIndex",
value: function() {
this.previousStep = this.steps[this.index - 1] || null, this.currentStep = this.steps[this.index], this.nextStep = this.steps[this.index + 1] || null
}
}]) && function(t, e) {
for (var i = 0; i < e.length; i++) {
var n = e[i];
n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n)
}
}(e.prototype, i), e
}(),
p = i(435);
p.keys().forEach(p), n.a.getInstance().define("scroll-steps", d)
}
},
[
[482, 0]
]
]);