This may seem like a bit of a newbie question, but I’ve just started a new job and am trying to understand more about and roughly how the following javascript code works:
app.placementOptions["cycleslideshow"] = {
".cycle-slideshow" : {
speed: 500
, timeout: 8000
, fx: "fade"
, pager: ".decoration-right"
},
".regen-slideshow .cycle-slideshow" : {
speed: 800
, timeout: 12000
, fx: "scrollHorz"
, pager: ".decoration-right"
}
};
Note that this above code apparently styles the slideshow buttons to be the small circles at the bottom right of the area above the fold on this site: https://www.ccht.org.uk
And the full JS for that is here: https://www.ccht.org.uk/js/plugins.js
Can someone explain what the snippet code roughly does? What is it? Is it JavaScript OOP with key value pairs? Can someone link to an article to help me read up about it? My employer may use BX Slider: https://bxslider.com
I was told that this part of the code is key: pager: ".decoration-right" - the company uses the LESS CSS preprocessor if that makes a difference.
And is Stack Overflow the right place to put this kind of question that has no actual solution (not that I won't accept any answer)? Hopefully it won't get closed as being broad. Thanks for any advice here.
I haven't looked at your full code yet, but this code is essentially just setting the cycleslideshow property of the placementOptions object (which is itself a property of the app object) to be equal to everything to the right of the = sign.
So basically, you have an object app which could be intialized like this:
const app = {
placementOptions: {}
}
Then with the snippet above, you're creating a new key on the placementOptions object, which could have also just been written as app.placementOptions.cycleslideshow in this case (in other words, the bracket notation wasn't needed).
The cycle slideshow object has two keys, which are both JavaScript objects representing collections of CSS rules, so this object is likely referenced when styling some DOM element, as you said, and can easily be accessed by the class names. In this case, wrapping the property names in quotes is required, because valid property names can't begin with . or have spaces in them unless they're wrapped as strings like this.
The pager line may have particular significance to the CSS, but has no particular JavaScript significance. Each of these CSS properties are just keys on their respective objects.
The following code is equivalent to your original snippet (not taking into account any additional keys/values that app or placementOptions may have:
const app = {
placementOptions: {
cylceslideshow: {}
}
}
app.placementOptions.cycleslideshow['.cycle-slideshow'] = {
speed: 500
, timeout: 8000
, fx: "fade"
, pager: ".decoration-right"
};
app.placementOptions.cycleslideshow['.regen-slideshow .cycle-slideshow'] = {
speed: 800
, timeout: 12000
, fx: "scrollHorz"
, pager: ".decoration-right"
};
Note that in this case, where bracket notation is used, it is required, for the same reason I mentioned above. You wouldn't neccessarily write the code this way, the way it is written is already fine, but this is just breaking it down into smaller parts for you and showing you they're the same.
In either case, you could access the object like this:
console.log(app.placementOptions.cycleslideshow['.cycle-slideshow']);
// logs:
/*
{
speed: 500,
timeout: 8000,
fx: "fade",
pager: ".decoration-right"
}
*/
Or access part of the object:
console.log(app.placementOptions.cycleslideshow['.cycle-slideshow'].speed);
// logs: 500
Overall the question is a bit broad, but hopefully this helps.
EDIT: not sure how beginner or basic you're looking for, but here's an article that goes over some of the basics about working with JS Objects: https://medium.freecodecamp.org/lets-explore-objects-in-javascript-4a4ad76af798.
freeCodeCamp itself has plenty of beginner resources (articles, challenges, videos, etc.) for learning JS.
The snippet you have provided seems to be simply specifying the configurations for the classes in the HTML, such as ".cycle-slideshow" and ".regen-slideshow .cycle-slideshow".
I'm not sure what the plugin code is doing exactly behind the scenes, but those configuration values specified in the snippet will be read by the plugin by the key "cycleslideshow". The value is the collection of settings specified. This is using the JavaScript object format, similar to JSON.
To find out exactly what each entry from the configuration mean and what the expected values are, you can search their github page since it seems to be open source.
Related
I'm new to JavaScript (and most coding concepts in general) and this feels like there must be some simple solution that I just haven't found yet. I need information from a property of an object (not totally sure if I'm using those terms correctly). The object is created using ArcGIS API for Javascript.
console.log(view.popup);
console.log(view.popup.id);
console.log(view.popup.title);
By logging to the console (using the lines of code shown above) I can see that the properties exist because the below lines are logged to the console (from Line 1).
id: "17e2bf83e50-widget-1"
title: "k0"
I then log just the id property (Line 2) and it prints just the id property. However, if I try to log view.popup.title (Line 3), it logs 'null' to the console. Anything else I try to print out using console.log prints the same value found within view.popup. I just need to be able to use that value stored within view.popup.title and for some reason it seems like the only one where I can see that it's there but can't access it directly?
Edit: This does certainly seem to be the issue commented on by folks below, thanks for those links! I've been trying to do stringify (as suggested in Is Chrome’s JavaScript console lazy about evaluating objects?) but finding that it only finds some of the properties. I also made an attempt at making it wait to try to find it until the property is no longer null, but it's definitely somehow later in the code where that happens (the code just enters an infinite loop until there's a call error).
View is generated using https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#popup (which is why I don't have a full understanding of what goes into it/when and how it makes that view.popup.title property)
view = new SceneView({
viewingMode: "local",
map: scene,
container,
camera,
spatialReference: {
wkid:3089
}
});
After learning here that it's related to view.popup.title not existing yet at the point of logging it, I moved over to the ArcGIS forum to ask about how view is generated and I got an answer that lets me access it! https://community.esri.com/t5/arcgis-api-for-javascript-questions/accessing-title-of-default-popup-created-for-a/m-p/1131210#M75813
view.popup.watch("title", () => {
console.log(view.popup.title);
});
First of all, what does the { } do, why is it needed and what exactly is it called when it does this? Why can't I just use "top:+=10px" for my css, why do I need { }.
second, why do I need only one comma on each side of +=10px, what do the commas do and why can't I use 'top:+=10px instead of top:'+=10px'?
I don't know what this is called so I don't know how to properly look up the terminology of what I am asking.
('div').animate({top:'+=10px'},500);
The { } denotes an Object in JavaScript. By setting {top: '+=10px'}, 500 you are setting a property top and telling jQuery you want it to animate X amount from the top over the course of 500 milliseconds.
You can find documentation on this here
You need to remember that you are writing jQuery, which is JavaScript, and therefore the syntax will be different compared with the CSS you are used to writing.
Currently I am working on an plugin for jQuery. In some jQuery functions you can pass an duration (e.g. '500ms', '1s', 'fast') parameter in.
I suppose there is a function within jQuery which pares that value and returns a value in ms? (so 1s would return 1000 or something).
Which method would this be, and is it possible to use this in my own plugin? So I can fire an callback after '1s' or 'fast' like some other methods as animate currently does.
You can always have a look at the source code. There you can see that .animate() calls a method jQuery.speed which uses jQuery.fx.speeds:
speeds: {
slow: 600,
fast: 200,
// Default speed
_default: 400
},
jQuery.speed seems to be useful in this regard, though I don't see any code which converts '1s' into 1000. Are you sure jQuery is doing this?
let's take a look at jquery source :
speeds: {
slow: 600,
fast: 200,
// Default speed
_default: 400
},
So, how about slow fadeOut ? let's take a peek into the source again. It looks like 'fadeOut' is just a shortcut for custom animation. There is a nice generic block of logic that jQuery re-uses for that purpose. There's no point in pasting the whole source in here :) you can easily go to your project a see for your self.
You could implement this very easily on your own
function ms(s){
return parseInt(s) *1000;
}
alert(ms("20s")); #=> 20000
Aside from that, using 1000 compared to '1s' is hardly an inconvenience. The integer has additional benefits as it's easier to modify in a programmatic way using simple arithmetic.
I've got this page I'm doing some tests in Javascript and jQuery: JS Tests
I've got a few questions on how to create, not sure if this is right term, but compound controls via Javascript. In something like Flash, you'd create the Object class, have the getters and setters, draw your images, etc. In JS, it seems to be a very different thought process. My main question is How do you create multiple elements with getters and setters to be rendered, filtered, and interacted with in Javascript?
The main code regarding this example sits with:
var html = (function(){
// var FRAG = $(document.createDocumentFragment());
htmlBox = $(document.createElement("div"));
var eTitle = $(document.createElement("h4"));
var ePrice = $(document.createElement("p"));
// set class first
htmlBox.addClass("box")
htmlBox.css({
backgroundColor : color
})
// set text values
eTitle.text(title);
ePrice.text("$" + price);
htmlBox.append(eTitle)
htmlBox.append(ePrice)
return htmlBox;
})();
... inside the Box() class. If someone could take a look at the source and let me know what isn't quite right, that'd be great.
EDIT
Here's the final result for this example. Some logistics to work out, but what I'm after.
http://geerswitch.in/tests/obj/
As for the jQuery creating nodes, the built in JS version works fine for this, and some research on Google shows that the non-jquery way is faster in most cases anyway (and looks worse, imo)
You're doing it almost right. You've created a Box class to represent your higher-order UI element, you're instantiating it for each element, and your main program is manipulating the elements through its interface. The only thing you're missing is the split between the public interface and the private implementation. There's nothing to prevent me from doing myBox.price += 10 right now, even though the Box interface clearly implies that price should be set at construction and never modified.
JavaScript doesn't have visibility modifiers like "private" and "public", but you can create the same effect yourself. Check out Douglas Crockford's explanation for the details. Crockford is an opinionated genius when it comes to JavaScript, and he's the brains behind JSLint and JSON.
I am using Jquery autocomplete with local array of size ~5000, every word is ~10 chars.
I am initializing the object like this:
.autocomplete({matchContains: true, minLength: 3, delay: 700, source: array1, max: 10, highlight: true })
The problem is, that when I start to type, it takes a lot of time (sometime crashes the browser) until the result is displayed.
What can I do?
Thanks
You could use AJAX to fetch the array instead of putting it into the HTML, increase the delay and the required minLength before querying the server in order to reduce the matches.
I would do like Darin Dimitrov said, but I would also do a .Take(10) (or some arbitrary number that sounds good to you) in a quick linq statement on the server side. This would lessen the result set and would still become more accurate as the user continues to type.
Are you using the standard jQuery autocomplete plugin? If so, I'm unfamiliar with the option parameter "source" that you used.
The proper syntax for that plugin is: autocomplete( url or data, [options] ). It sounds like your version works with the 'source' option parameter,(although while crashing the browser) so I'm confused. If the browser is crashing, I'd expect the problem to be related to the javascript.
I recommend trying:
$('whatever').autocomplete(array1,{
matchContains: true,
minLength: 3,
delay: 700,
max: 10,
highlight: true
});