This is my code:
form.listPrice.map(list => {
if (list.id === listId) {
form.active = true
listPrice = parseInt(list.price)
if (list.offerPrice) {
listofferPrice = parseInt(list.offerPrice)
} else {
listofferPrice = null
}
}
})
And here:
n.listPrice.map(list => {
if (list.id === listPrice) {
valid = true;
n.active = true;
n.showPrice.price = list.price;
n.showPrice.offerPrice = list.offerPrice;
n.ladder = list.ladder;
}
And this output the same warning:
Expected to return a value in arrow function array-callback-return
You are using .map incorrectly. .map should be used only when you want to construct a new array from an old array, but your code is not doing that - you're only carrying out side-effects - the setting of form.active and listofferPrice.
The first step would be to use forEach or for..of instead, eg:
for (const list of form.listPrice) {
if (list.id === listId) {
form.active = true
listPrice = parseInt(list.price)
if (list.offerPrice) {
listofferPrice = parseInt(list.offerPrice)
} else {
listofferPrice = null
}
}
}
But since it looks like you're trying to find a possible single matching value in the array, .find would be more appropriate:
const found = form.listPrice.find(list => list.id === listId);
if (found) {
form.active = true
listPrice = parseInt(found.price)
if (found.offerPrice) {
listofferPrice = parseInt(found.offerPrice)
} else {
listofferPrice = null
}
}
const found = n.listPrice.find(list => list.id === listPrice);
if (found) {
valid = true;
n.active = true;
n.showPrice.price = found.price;
n.showPrice.offerPrice = found.offerPrice;
n.ladder = found.ladder;
}
I have created a JavaScript plugin, I'd like to have the potential to use this multiple times, however, having it called one the page twice like follows doesn't seem to make a new instance:
var lightbox = new MarvLightbox({
imagesContainer: 'detail-hdr__detail-images',
limit: 11
});
var lightbox2 = new MarvLightbox({
imagesContainer: 'image-grid-2',
galleryFolder: 2,
mobileFolder: 0
});
The following code seems to be returning the same values, so for example, if I click an image to set the c value within the state object then it's changed for instance lightbox2 AND lightbox.
MarvLightbox.prototype.current = function() {
console.log(state);
};
I have tried to remove any none required code from my plugin. But what I'm basically doing is:
1. Compile a list of the images within a container.
2. Generate HTML from a JSON string.
3. Assigning click events to the images, and then when clicked they open the lightbox and change the image etc.
(function() {
var instance = null,
container;
// Constructor
this.MarvLightbox = function() {
instance = this;
// Create global variables
this.images_count = -1;
this.active = false;
this.error = false;
this.debug = false;
// Define option defaults
var defaults = {
activeClass: 'marvLightbox',
appendTo: '#wrapper',
imagesContainer: null,
thumbClass: null,
lightboxId: 'marvLightbox',
galleryFolder: null,
mobileFolder: null,
showAlt: true,
showMax: true,
limit: null,
html: '{ "div": { "id": "{lightboxId}", "0": { "div": { "class": "{lightboxId}__container", "data-click": "EventClose", "0": { "div": { "class": "{lightboxId}__controls {lightboxId}__controls--top", "0": { "div": { "class": "{lightboxId}__eschint", "content": "Press <span>ESC</span> to close" } }, "1": { "div": { "class": "{lightboxId}__close", "data-click": "EventClose" } } } }, "1": { "div": { "class": "{lightboxId}__image", "0": { "img": { "src": "", "class": "responsive-img image", "data-click": "EventRight" } } } }, "2": { "div": { "class": "{lightboxId}__controls {lightboxId}__controls--bottom", "3": { "div": { "class": "{lightboxId}__left", "data-click": "EventLeft", "data-hover": "EventClass(#{lightboxId}, toggle: left)" } }, "4": { "div": { "class": "{lightboxId}__right", "data-click": "EventRight", "data-hover": "EventClass(#{lightboxId}, toggle: right)" } }, "5": { "div": { "class": "{lightboxId}__alt" } }, "6": { "div": { "class": "{lightboxId}__num" } } } } } } } }'
};
// Create options by extending defaults with the passed in arugments
if (arguments[0] && typeof arguments[0] === "object") {
this.options = extendDefaults(defaults, arguments[0]);
}
this.options.html = this.options.html.replace(/\{(lightboxId)}/g, this.options.lightboxId);
// this.options.limit = this.options.limit + 1;
// Check if debugging is enabled
(function() {
var args = document.querySelectorAll('[data-external-arg]');
if(args.length > 0 && args[0].src.indexOf('marv.lightbox') !== -1) {
if (args[0].dataset.externalArg === 'debug') instance.debug = true;
}
}());
// Initialise plugin
this.init();
};
// Debugging messages
var debug = function(code, arg) {
var args = function(n) {
if (arg === undefined) {
return '[arg undefined]';
}
if (arg[n] === undefined) {
return '[arg undefined]';
} else {
return arg[n];
}
};
var messages = function(code, argument) {
return [
'marv.lightbox(debug): Debugging mode is on, make sure you turn this off before you launch',
'marv.lightbox(debug): HTMLElement(' + args(0) + ') with the name of ' + args(1) + ' has been detected',
'marv.lightbox(debug): Found '+ arg + ' image/s within your Lightbox container ',
'marv.lightbox(debug): ' + args(0) + ' key pressed, changing current (' + args(1) + '), number of images (' + args(2) + ')',
'marv.lightbox(debug): Current is set to null, closing lightbox',
'marv.lightbox(debug): Inserting Lightbox within HTMLElement(' + args(1) + '), using ' + args(0),
'marv.lightbox(debug): 1 image found, don\'t add previous/next arrows, don\'t show numbers either',
'marv.lightbox(debug): showAlt set to false, don\'t display alt text',
'marv.lightbox(debug): showMax set to false, don\'t display numbers below alt text',
'marv.lightbox(debug): Reverting to mobile version (' + instance.options.mobileFolder + ') of images',
'marv.lightbox(debug): Over-riding to ' + instance.options.galleryFolder + ' version of images'
][code];
};
if (instance.debug === true)
console.log(messages(code, arg));
};
// Error messages
var error = function(code, arg) {
var args = function(n) {
if (arg === undefined) {
return '[arg undefined]';
}
if (arg[n] === undefined) {
return '[arg undefined]';
} else {
return arg[n];
}
};
var messages = function(code, argument) {
return [
'marv.lightbox(error): I need to know which images to use... add { imagesContainer: "id/class" } to the plugin initialization',
'marv.lightbox(error): The HTML structure provided appears to have an error: ' + arg,
'marv.lightbox(error): Issue compiling list of images, speak to Dev, error: ' + arg,
'marv.lightbox(error): Your going to need some images for this to work... make sure they have the class: ' + instance.options.thumbClass,
'marv.lightbox(error): I was unable to find an element which matches ' + instance.options.imagesContainer + ', please double check this',
'marv.lightbox(error): I was unable to find a container with the name of ' + args[0],
'marv.lightbox(error): EventListener with arguments passed, had an issue seperating arguments, check formatting',
'marv.lightbox(error): Unable to apply class event to element, please check your attribute',
'marv.lightbox(error): You have attempted to over-ride the images folder with a size that doesn\'t exist, please choose a size between 0 and ' + arg
][code];
};
console.log(messages(code, arg));
};
var imageSizes = function(e) {
var sizes = [ '344x258', 'full', 'large1' ];
if (sizes[e] !== undefined) {
return sizes[e];
}
error(8, sizes.length);
};
// Initilise the plugin
MarvLightbox.prototype.init = function() {
if (this.options.imagesContainer === null) {
error(0);
return;
}
container = (instance.options.imagesContainer).objectType();
if (container === null || container === undefined) {
error(4);
return;
}
debug(0);
setupLightbox();
};
// Generate HTML from JSON
function buildHTML(json) {
"use strict";
var handleAttribute = function(element, attribute, value) {
if (value instanceof HTMLElement) {
return element.appendChild(value);
}
switch (attribute) {
case 'class':
case 'src':
case 'id':
case 'data-click':
case 'data-hover':
return element.setAttribute(attribute, value);
case 'content':
element.innerHTML = value;
return;
// other keys...
default:
console.log(element.tagName, attribute, value);
}
};
var htmlReviver = function(key, value) {
// parse as element
if (isNaN(key) && typeof value === 'object') {
var element = document.createElement(key);
var subValue;
for (var attribute in value) {
handleAttribute(element, attribute, value[attribute]);
}
return element;
// move element from { index: { tagName: Element } } to { index: Element }
} else if (!isNaN(key)) {
return value[Object.keys(value)[0]];
// leave property alone
} else {
return value;
}
};
try {
var htmlObject = JSON.parse(json, htmlReviver);
return htmlObject;
} catch (e) {
error(1, e);
}
}
// Manage item change
var images_compiled;
var state = {
c: null,
altValue: null,
maxValue: null,
get current() { return this.c; },
get max() { return this.maxValue; },
get alt() { return this.altValue; },
set max(e) { this.maxValue = e; },
set alt(e) { this.altValue = e; },
set current(e) {
if (this.c !== null) {
// Remove class from current
(images_compiled[this.c].target).classList.remove('expand');
}
if (e === null) {
debug(4);
// Collapse Lightbox
if (document.getElementById(instance.options.lightboxId)) {
(images_compiled[this.c].target).classList.remove('expand');
document.getElementsByTagName('body')[0].classList.remove(instance.options.activeClass);
(document.getElementById(instance.options.lightboxId).parentNode).removeChild(document.getElementById(instance.options.lightboxId));
}
this.c = e;
return;
}
// Change current element, update lightbox
this.c = e;
var lightbox = document.getElementById(instance.options.lightboxId),
res;
// Check lightbox exists, if so change the image src
if (lightbox) {
var image = images_compiled[e].image.src;
if (instance.options.galleryFolder !== null) {
var filter = image.match(/([^\/]*)/g).filter(Boolean);
image = image.replace(filter[filter.length - 2], imageSizes(instance.options.galleryFolder));
}
lightbox.getElementsByTagName('img')[0].src = image;
if (instance.options.showAlt) {
debug(7);
lightbox.getElementsByClassName(instance.options.lightboxId + '__alt')[0].innerHTML = images_compiled[e].alt;
}
if (instance.options.showMax && this.max > 1) {
debug(8);
lightbox.getElementsByClassName(instance.options.lightboxId + '__num')[0].innerHTML = (images_compiled[e].index + 1) + '/' + this.max;
}
} else {
res = generateExpand(images_compiled[e]);
}
// Add active class
if (res) {
(images_compiled[e].target).classList.add('expand');
document.getElementsByTagName('body')[0].classList.add(instance.options.lightboxId);
}
}
};
// Setup light box
function setupLightbox() {
var images;
images = container.getElementsByTagName('img');
if (instance.options.limit !== null) {
var tmp = [];
for (var i = 0, length = images.length; i < length; i++) {
if (i < instance.options.limit) {
tmp.push(images[i]);
}
}
images = tmp;
}
if (images.length < 1 || images === undefined) {
error(3);
return;
}
try {
images_compiled = Array.from(images, function(el) {
// Generate array of objects containing image information
instance.images_count++;
return {
target: function() {
if (el.parentElement.nodeName === 'A') {
return el.parentElement;
}
return el;
}(),
index: instance.images_count,
alt: ((el.alt) ? el.alt : ''),
image: function() {
// If class put on an A link then find the image
if (el.tagName === 'A') {
return el.getElementsByTagName('img')[0];
} else {
return el;
}
}()
};
});
} catch(e) {
// Issue with generating array
error(2, e);
}
debug(2, images_compiled.length);
// Add image click event
images_compiled.forEach(function(el) {
if (el !== null) {
var elm = el.target;
elm.addEventListener('click', function(e) {
if (elm.nodeName === 'A') {
e.preventDefault();
}
instance.active = true;
if (state.current === el.index) {
state.current = null;
return;
}
state.current = el.index;
state.alt = el.alt;
});
}
});
state.max = images_compiled.length;
}
function generateExpand(img) {
// Generate lightbox HTML and append
var html = buildHTML(instance.options.html);
instance.events = {
EventClose: function(evt) {
if (evt !== undefined) {
evt.stopPropagation();
}
instance.active = false;
state.current = null;
},
EventLeft: function(evt) {
if (evt !== undefined) {
evt.stopPropagation();
}
if (state.current !== 0 && state.max > 1) {
state.current = state.current - 1;
} else {
state.current = instance.images_count;
}
},
EventRight: function(evt) {
if (evt !== undefined) {
evt.stopPropagation();
}
if (state.current !== instance.images_count && state.max > 1) {
state.current = state.current + 1;
} else {
state.current = 0;
}
},
EventClass: function(evt) {
var arg = (evt.dataset.hover).replace(/ /g,''),
args = (arg.match(/[^(]*/g).filter(Boolean))[1].match(/(?:([^,()]+)?)+/g).filter(Boolean),
target = args[0].objectType(),
action = args[1].match(/^(.*):(.*)/).filter(Boolean);
switch(action[1]) {
case 'add':
// Add class
target.classList.add(action[2]);
break;
case 'remove':
// Remove class
target.classList.remove(action[2]);
break;
case 'toggle':
target.classList.add(action[2]);
evt.addEventListener('mouseout', function() {
target.classList.remove(action[2]);
});
break;
default:
// Error
error(7);
break;
}
}
};
// Lightbox is active
instance.active = true;
// Assign event listeners
Array.prototype.forEach.call(html.querySelectorAll('[data-click]'), function (e) {
e.addEventListener('click', instance.events[eventName(e.dataset.click)]);
});
Array.prototype.forEach.call(html.querySelectorAll('[data-hover]'), function (e) {
e.addEventListener('mouseover', function() { instance.events[eventName(e.dataset.hover)](e); });
});
// Insert lightbox into website
var appendTo = (instance.options.appendTo).objectType();
if (appendTo === null || (instance.options.appendTo).objectType() === undefined) {
error(5, [instance.options.appendTo]);
return false;
}
debug(5, ['id', instance.options.imagesContainer]);
appendTo.insertBefore(html, appendTo.firstChild);
return true;
}
MarvLightbox.prototype.current = function() {
console.log(state);
};
}());
As I said above though the state object appears to be shared between both instances, it should be unique.
The problem lies at instance i think:
var instance = null;
MarvLightbox = function() {
instance = this;
So whenever a new Lightbox is created, instance points to it. This also applies to asynchronous callback functions which will all point to the last instead of the current instance. You may scope instance locally:
var instance=this;
Same applies to state:
MarvLightbox.prototype.current = function() {
console.log(this.state); //make it an objects property, not global
};
I'd like to create a recursive function to parse json-like data as below. When key is xtype, a new class will be created. In particular, when xtype = gridpanel/treepanel, all the properties have to be its constructor argument, otherwise, properties will be added after class has been created.
My recursive function as below, I got an error 'too much recursion' at line 21 in ext-all.js.
Please take a look, how am I able to solve this problem?
codes in main program:
me.recursiveParser(null, data.json);
Ext.apply(me.root, me.parent);
me.desktopCfg = me.root;
recursiveParser function:
recursiveParser: function(nodeName, jsonData) {
var properties = {};
var isSpecial = false;
var isLeaf = true;
var parent, child, special;
//Base factor
for (var key in jsonData) {
var value = jsonData[key];
//To collect all the properties that is only initialized with '#'.
if (key.toString().indexOf("#") === 0) {
key = key.replace("#", "");
if(typeof(value) === "string"){
properties[key] = "'"+value+"'";
}else{
//Later, should have to deal with the empty value or array with no keys and only elements.
properties[key] = value;
}
if(key === "xtype"){
//To initialize the root
if(nodeName === null){
this.root = this.createNewObject(value, null);
}
if(value === "gridpanel" || value === "treepanel"){
isSpecial = true;
special = value;
}else{
child = this.createNewObject(value, null);
}
}
}else {
isLeaf = false;
}
}
if(isSpecial){
child = this.createNewObject(special, properties);
}
//To add the subnode and its properties to its parent object.
if (nodeName !== null && typeof(nodeName) === "string") {
if(child === null){
Ext.apply(parent, properties);
}else{
Ext.apply(parent, child);
}
}
if(isLeaf){
return;
}
for (var key in jsonData) {
var value = jsonData[key];
if (key.toString().indexOf("#") === 0) {
continue;
}else{
if(value === "[object Object]"){
for(var index in value){
this.recursiveParser(key, value[index]);
}
}else{
this.recursiveParser(key, value);
}
Ext.apply(this.root, parent);
}
}
}
createNewObject function:
createNewObject: function(objType, properties){
if(objType){
switch (objType){
case "gridpanel":
return new MyProg.base.GridPanel(properties);
break;
case "treepanel":
return new MyProg.base.TreePanel(properties);
break;
case "tabpanel":
return new MyProg.base.TabPanel();
break;
case "tab":
return new MyProg.base.Tabs();
break;
case "formpanel":
return new MyProg.base.Accordion();
break;
case "fieldset":
return new MyProg.base.FieldSet();
break;
case "textfield":
return new MyProg.base.Fields();
break;
case "panel":
return new MyProg.base.Accordion();
break;
default:
return new MyProg.base.Accordion();
};
};
}
data.json:
var data = {
"json": {
"#title": "BusinessIntelligence",
"#xtype": "tab",
"#layout": "accordion",
"items": [
{
"#title": "SalesReport",
"#ctitle": "SalesReport",
"#layout": "column",
"items": [
{}
]
},
{
"#title": "ContentPlayingReport",
"#ctitle": "ContentPlayingReport",
"#layout": "column",
"items": [
{}
]
},
{
"#title": "BusinessIntelligence",
"#ctitle": "BusinessIntelligence",
"#layout": "column",
"items": [
{}
]
}
]
}
}
I modified the recursion part, it looks more elegant now. All the xtype works just fine, except gridpanel, I've check DOM, everything is in there, but still got error message:
TypeError: c is undefined
...+g.extraBaseCls);delete g.autoScroll;if(!g.hasView){if(c.buffered&&!c.remoteSort...
ext-all.js (line 21, col 1184416)
I suspect it's an ExtJS bug. I'll try to find another way out.
recursion program:
recursiveParser: function (jsonData) {
var me = this;
var properties = {};
for ( var key in jsonData ){
var value = jsonData[key];
var items = (value.constructor === Array) ? [] : {};
if (value instanceof Object) {
if (isNaN(key)){
if (items.constructor === Array) {
for (var node in value){
items.push(me.recursiveParser(value[node]));
}
properties[key] = items;
} else {
properties[key] = me.recursiveParser(value);
}
} else {
return me.recursiveParser(value);
}
} else {
if (key.toString().indexOf('#') === 0){
key = key.replace('#', '');
properties[key] = value;
}
}
}
return properties;
}
Writing Javascript, I have an object/class with the following attributes:
this.option1Active = null;
this.option2Active = null;
this.option3Active = null;
this.option4Active = null;
I would like to set one of those attributes to true based on the parameter genre
function selectGenre (genre) {
if (genre === 'option1') {
this.option1Active = true;
}
else if (genre === 'option2') {
this.option2Active = true;
}
else if (genre === 'option3') {
this.option3Active = true;
}
else if (genre === 'option4') {
this.option4Active = true;
}
}
Though writing if statements is not a sustainable solution.
I'd like to do something like this:
function selectGenre (genre) {
var options = {
'option1': this.option1Active,
'option2': this.option2Active,
'option3': this.option3Active,
'option4': this.option4Active
};
options[genre] = true;
}
But that only set options[index] to true, not e.g. this.option1Active.
Is there a way to change the reference a key of an object points to?
If not, other ways of refactoring the if statements is greatly appreciated.
You can use a string for the property name to set on this.
var genreOptions = {
'option1': 'option1Active',
'option2': 'option2Active',
'option3': 'option3Active',
'option4': 'option4Active'
};
function selectGenre (genre) {
this[genreOptions[genre]] = true;
}
It seems you can just append "Active" to genre to get the property itself:
function selectGenre (genre)
{
var prop = genre + 'Active';
if (typeof this[prop] != 'undefined') {
this[prop] = true;
}
}
Though, it would be easier if you could use an array as your property instead, i.e. this.optionActive[3] vs. this.option3Active.
Is this what you want ?
var obj = {};
obj.option1Active = null;
obj.option2Active = null;
obj.option3Active = null;
obj.option4Active = null;
var options = {
option1: 'option1Active',
option2: 'option2Active',
option3: 'option3Active',
option4: 'option4Active'
};
function selectGenre(genre) {
obj[options[genre]] = true;
}
console.log(obj);
selectGenre('option2');
console.log(obj);
ı want to use this http://www.jstree.com/documentation/contextmenu
ı can create , delete ,edit nodes but my question is,
how can ı get created node's value or id
how can ı get deleted node's value or id
because i will insert into database.
and here javascript codes
http://static.jstree.com/v.1.0pre/jquery.jstree.js
For Create Process i found this code probably this code belongs to create process under.
// Basic operations: create
create_node: function (obj, position, js, callback, is_loaded) {
obj = this._get_node(obj);
position = typeof position === "undefined" ? "last" : position;
var d = $("<li />"),
s = this._get_settings().core,
tmp;
if (obj !== -1 && !obj.length) { return false; }
if (!is_loaded && !this._is_loaded(obj)) { this.load_node(obj, function () { this.create_node(obj, position, js, callback, true); }); return false; }
this.__rollback();
if (typeof js === "string") { js = { "data": js }; }
if (!js) { js = {}; }
if (js.attr) { d.attr(js.attr); }
if (js.metadata) { d.data(js.metadata); }
if (js.state) { d.addClass("jstree-" + js.state); }
if (!js.data) { js.data = this._get_string("new_node"); }
if (!$.isArray(js.data)) { tmp = js.data; js.data = []; js.data.push(tmp); }
$.each(js.data, function (i, m) {
tmp = $("<a />");
if ($.isFunction(m)) { m = m.call(this, js); }
if (typeof m == "string") { tmp.attr('href', '#')[s.html_titles ? "html" : "text"](m); }
else {
if (!m.attr) { m.attr = {}; }
if (!m.attr.href) { m.attr.href = '#'; }
tmp.attr(m.attr)[s.html_titles ? "html" : "text"](m.title);
if (m.language) { tmp.addClass(m.language); }
}
tmp.prepend("<ins class='jstree-icon'> </ins>");
if (!m.icon && js.icon) { m.icon = js.icon; }
if (m.icon) {
if (m.icon.indexOf("/") === -1) { tmp.children("ins").addClass(m.icon); }
else { tmp.children("ins").css("background", "url('" + m.icon + "') center center no-repeat"); }
}
d.append(tmp);
});
d.prepend("<ins class='jstree-icon'> </ins>");
if (obj === -1) {
obj = this.get_container();
if (position === "before") { position = "first"; }
if (position === "after") { position = "last"; }
}
switch (position) {
case "before": obj.before(d); tmp = this._get_parent(obj); break;
case "after": obj.after(d); tmp = this._get_parent(obj); break;
case "inside":
case "first":
if (!obj.children("ul").length) { obj.append("<ul />"); }
obj.children("ul").prepend(d);
tmp = obj;
break;
case "last":
if (!obj.children("ul").length) { obj.append("<ul />"); }
obj.children("ul").append(d);
tmp = obj;
break;
default:
if (!obj.children("ul").length) { obj.append("<ul />"); }
if (!position) { position = 0; }
tmp = obj.children("ul").children("li").eq(position);
if (tmp.length) { tmp.before(d); }
else { obj.children("ul").append(d); }
tmp = obj;
break;
}
if (tmp === -1 || tmp.get(0) === this.get_container().get(0)) { tmp = -1; }
this.clean_node(tmp);
this.__callback({ "obj": d, "parent": tmp });
if (callback) { callback.call(this, d); }
return d;