I'm new with js classes and I think I'm not doing it right.
I want to achieve a simple thing here. On one card click I want to hide all other cards. But how can I reach other cards if event is triggered from inside of one of the cards?
class Cards {
constructor(args){
this.list = [];
this.amm = args.amm;
this.createCards();
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
document.body.appendChild(this.el);
}
addEvents(){
let _this = this;
this.el.onclick = function(){
_this.el.style.opacity = 0.7;
_this.hideOtherCards(_this.id);
};
}
hideOtherCards(id){
// how to hide other cards?
}
}
var myCards = new Cards({amm: 5});
It's good practice (encapsulation) to keep the scope of any component limited to itself. That is, a card shouldn't know that, or how many, other cards exist. To keep the cards decoupled, a common way to achieve that is to make use of custom events.
Imagine it like this: A card that is clicked shouts into the room "I was clicked" and relies upon someone hearing that and reacting to that and for that instance to know what to do. If noone reacts, your code still won't throw an error.
For this to work in your scenario, you'd need a host element for the cards as events bubble up the DOM, but don't bubble to siblings.
Long story short, this is what I'd do:
Edit: Actually, the myCards class should be responsible for creating the host element, and listening to card-clicked.
class Cards {
constructor(args){
this.list = [];
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});
Related
I have 5 objects (ie instances of a class), and I need to set an event listener on the "im" property, that runs the function "squash()".
I attempted to use this.im.click(squash()) in the class, but that did not work. How can I create the event listener?
let divs = $(".flies");
divs.each(function(i){
let img = $("<img/>");
img.attr({
"id": i,
"src": "http://clipart-library.com/images/8iznoLG8T.png"});
$(this).append(img)
});
class Fly {
constructor(div, im, alive){
this.div = div;
this.im = im;
this.alive = true;
}
squash(){
this.alive= false;
this.element.css("visibility", "hidden");
}
}
let fly1 = new Fly($('#fly1'), $('#0'), true);
let fly2 = new Fly($('#fly2'), $('#1'), true);
let fly3 = new Fly($('#fly3'), $('#2'), true);
let fly4 = new Fly($('#fly4'), $('#3'), true);
let fly5 = new Fly($('#fly5'), $('#4'), true);
Use im.click(this.squash.bind(this));
class Fly {
constructor(div, im, alive){
this.div = div;
this.im = im;
this.alive = true;
this.init()
}
init(){
this.im.click(this.squash.bind(this));
}
squash(){
this.alive= false;
// wasn't sure what `element` is supposed to be, used `div` instead
this.div.css("visibility", "hidden");
}
}
let fly1 = new Fly($('#fly1'), $('#0'), true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="0">Click to hide content</button>
<div id="fly1">Content 1</div>
Is it possible to hook into a Canvas animation that has already been drawn?
I'm trying to create 3 seperate tracks that must be controlled by a "Start" and "Stop" button, but when pressing the Start button of the first canvas , it makes the last canvas run.
See current codepen progress
This is what I have so far.
class Animation{
constructor(){
this.options = {
left : 0,
animate : false
}
let tracks = $('.line');
let self = this;
tracks.each(function(){
self.startbtn = $(this).find('button.start');
self.stopbtn = $(this).find('button.stop');
self.canvas = $(this).find('canvas').get(0);
self.canvas.width = 1000;
self.canvas.height = 30;
self.ctx = self.canvas.getContext('2d');
self.draw(self.canvas,self.ctx);
self.startbtn.bind('click',() => {
self.options.animate = true;
self.draw(self.canvas,self.ctx);
})
});
}
draw(c,ctx){
ctx.clearRect(0,0,c.height,c.width);
ctx.fillRect(this.options.left,0,1,30);
if(this.options.animate){
requestAnimationFrame(() => {
console.log('done');
this.options.left += 1;
console.log(this.options.left)
this.draw(c,ctx);
});
}
}
}
new Animation();
Your code has scope issues and you had to insure that each track is operating separate from its constructor.
This is where i'd made sure information is entirely independent for the given track/parent element.
this.options = *set*;//left and animate separate for own process
this.node = *set*;//nodes for each track
this.ctx = *set*;//draw command context set at the parent
this.draw = *set*;//draw function moved to track
Here is complete edit to your code:
class Animation{
constructor(){
var tracks = $('.line');
var self = this;
tracks.each(function () {
this.options = {//options seperate to parent track node
left: 0,
animate: false
};
this.node = {//store child nodes for access
startbtn: $(this).find('button.start'),
stopbtn: $(this).find('button.stop'),
canvas: $(this).find('canvas').get(0)
};
this.node.canvas.width = 1000;
this.node.canvas.height = 30;
this.ctx = this.node.canvas.getContext('2d');
this.node.startbtn.bind('click',() => {// () => parentNode instantiation
this.options.animate = true;
this.draw(this.node.canvas, this.ctx);
});
this.draw = self.draw;
});
}
draw(c,ctx){
parent = c.parentNode;
ctx.clearRect(0,0,c.height,c.width);
ctx.fillRect(parent.options.left,0,1,30);
if(parent.options.animate){
requestAnimationFrame(() => {
console.log('done');
parent.options.left += 1;
console.log(parent.options.left)
parent.draw(c,ctx);
});
}
}
}
new Animation();
Scope and object handling needed to be done.
http://codepen.io/anon/pen/JKzBLK
Edit: I am also open to other suggestions on what I could do.
How can I update my window with the onChange event? My solution works, but I need the groups to collapse when not visible.
w.DD.onChange = function() {
switch (this.selection.text){
case 'Headline':
if(w.visiblegroup)
w.visiblegroup.visible = false;
w.visiblegroup = w.texted;
w.texted.visible = true;
break;
}
}
I have tried to use w.show, w.update(with documentation, still not sure what .update actually does) after adding the elements in the case itself. But I can't figure this out.
w.DD.onChange = function() {
switch (this.selection.text){
case 'Headline':
w.add('checkbox', undefined, 'User-Color');
//w.show();
w.update();
break;
}
}
Does anyone have a clue how this might work?
I generally avoid using LayoutManager and do all teh maths by myself which I trust better but that's my humble opinion…
var w = new Window("dialog");
w.preferredSize = [200,200];
w.DD = w.add( 'dropdownlist', undefined, ["A","B"] );
w.DD.selection = 0;
w.DD.alignment = ["fill","top"];
//Setting a stacked group to items overlay
w.gp = w.add('group');
w.gp.orientation = 'stack';
w.gp.alignment = ["fill","top"];
w.gp.alignChildren = ["fill","top"];
w.gp.p1 = w.gp.add('panel',undefined, "A");
w.gp.p2 = w.gp.add('panel',undefined, "B");
//dummy text to show "collapsing"
w.st = w.add('statictext',undefined, "Collapse ?");
w.DD.onChange = function()Â {
w.gp.p1.visible = w.DD.selection==0;
w.gp.p2.visible = !w.gp.p1.visible;
w.gp.p2.size.height =100;
w.gp.size.height = w.gp.p1.visible? 50 : 100;
w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}
w.onShow = function() {
w.gp.p2.visible=false;
w.gp.size.height = w.gp.p1.size.height = 50;
w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}
w.show();
Loic
To collapse the groups and window you will need to use the layout() method of your window. This will load the LayoutManager that controls the automatic layout behavior for a window or container. The LayoutManager has a method called layout() too, this method invokes the automatic layout behaviour and invoked automatically the first time the window is displayed. Thereafter, the script must invoke it explicitly like so:
window.layout().layout();
An example of how to use the layout manager by Gerald Singelmann:
function main() {
var win = new Window("dialog");
var maingroup = win.add("panel");
maingroup.orientation = "column";
add_group( maingroup );
var show_btn = win.add("button", undefined, "show");
show_btn.onClick = function() {
var txt = "";
for (var n = 0; n < maingroup.children.length; n++) {
txt += maingroup.children[n].edit.text + "\n";
}
alert("Da steht: \n" + txt );
}
win.show();
function add_group( maingroup ) {
var group = maingroup.add( "group" );
group.edit = group.add("edittext", [undefined, undefined, 200, 20], maingroup.children.length );
group.plus = group.add("button", undefined, "+");
group.plus.onClick = add_btn;
group.minus = group.add("button", undefined, "-");
group.minus.onClick = minus_btn;
group.index = maingroup.children.length - 1;
win.layout.layout( true );
return group;
}
function add_btn ( e ) {
add_group( maingroup );
}
function minus_btn ( e ) {
var ix = this.parent.index;
maingroup.remove( maingroup.children[ix] );
win.layout.layout( true );
}
}
source
I have a class, that is supposed to display grey overlay over page and display text and loading gif. Code looks like this:
function LoadingIcon(imgSrc) {
var elem_loader = document.createElement('div'),
elem_messageSpan = document.createElement('span'),
loaderVisible = false;
elem_loader.style.position = 'absolute';
elem_loader.style.left = '0';
elem_loader.style.top = '0';
elem_loader.style.width = '100%';
elem_loader.style.height = '100%';
elem_loader.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
elem_loader.style.textAlign = 'center';
elem_loader.appendChild(elem_messageSpan);
elem_loader.innerHTML += '<br><img src="' + imgSrc + '">';
elem_messageSpan.style.backgroundColor = '#f00';
this.start = function () {
document.body.appendChild(elem_loader);
loaderVisible = true;
};
this.stop = function() {
if (loaderVisible) {
document.body.removeChild(elem_loader);
loaderVisible = false;
}
};
this.setText = function(text) {
elem_messageSpan.innerHTML = text;
};
this.getElems = function() {
return [elem_loader, elem_messageSpan];
};
}
Problem is, when I use setText method, it sets innerHTML of elem_messageSpan, but it doesn't reflect to the span, that was appended to elem_loader. You can use getElems method to find out what both elements contains.
Where is the problem? Because I don't see single reason why this shouldn't work.
EDIT:
I call it like this:
var xml = new CwgParser('cwg.geog.cz/cwg.xml'),
loader = new LoadingIcon('./ajax-loader.gif');
xml.ondataparse = function() {
loader.stop();
document.getElementById('cover').style.display = 'block';
};
loader.setText('Loading CWG list...');
loader.start();
xml.loadXML();
xml.loadXML() is function that usually takes 3 - 8 seconds to execute (based on download speed of client), thats why I'm displaying loading icon.
I am newbie to javascript objects and I have a problem. I am trying to make an image gallery but I keep getting an error that this.current, this.size & this.initial are undefined, and therefore, the script cannot work. Please help me resolve this error. the following is the full script.
function gallery()
{
this.image = new Array(10);
this.initial = 1;
this.current = 0;
this.size = 10;
this.frame_height = 400;
this.frame_width = 600;
this.initialize=function()
{
if(document.images)
{
var count = 1;
for(count=1;count<=this.size;count++)
{
this.image[count] = new Image();
this.image[count].src = 'images/'+count+'.jpg';
}
}
divImg.id = "divImg";
divImg.setAttribute("Width",this.frame_width);
divImg.setAttribute("align","center");
divImg.setAttribute("margin","0px auto");
divBtn.id = "divBtn";
divBtn.setAttribute("align","center");
divBtn.setAttribute("backgroung-color","Black");
divBtn.setAttribute("color","White");
divBtn.style.margin = "0px auto";
divBtn.className ="btn";
pictureFrame.src = this.image[this.initial].src;
pictureFrame.setAttribute('Width',this.frame_width);
pictureFrame.setAttribute('Height',this.frame_height);
pictureFrame.name = 'img';
btnNext.innerHTML='NEXT';
btnPrevious.innerHTML='PREVIOUS';
btnLast.innerHTML='LAST';
btnFirst.innerHTML='FIRST';
btnFirst.onclick=this.first;
btnLast.onclick=this.last;
btnPrevious.onclick=this.previous;
btnNext.onclick=this.next;
myForm.appendChild(pictureFrame);
divImg.appendChild(myForm);
divBtn.appendChild(btnFirst);
divBtn.appendChild(btnPrevious);
divBtn.appendChild(btnNext);
divBtn.appendChild(btnLast);
pageBody.appendChild(divImg);
pageBody.appendChild(divBtn);
headerTag.appendChild(pageBody);
}
this.next=function()
{
alert(this.size);
alert(this.current);
if (this.current < this.size)
{
this.current +=1;
pictureFrame.src = this.image[this.current].src;
}
else
{
alert("This is the last image");
}
}
this.previous=function()
{
alert(this.current);
alert(this.initial);
if (this.current > this.initial)
{
this.current = this.current-1;
pictureFrame.src = this.image[this.current].src;
}
else
{
alert("This is the first image");
}
}
this.first=function()
{
this.current=this.initial;
pictureFrame.src = this.image[this.current].src;
}
this.last=function()
{
alert(this.size);
this.current=this.size;
pictureFrame.src = this.image[this.current].src;
}
};
var divImg= document.createElement('div');
var divBtn = document.createElement('div');
var btnFirst= document.createElement('button');
var btnNext= document.createElement('button');
var btnPrevious= document.createElement('button');
var btnLast= document.createElement('button');
var divTop = document.createElement('div');
var headerTag = document.getElementsByTagName('html')[0];
var pageBody = document.createElement('body');
var myForm=document.createElement("form");
var pictureFrame = document.createElement('img');
var pics=new gallery();
window.onload=pics.initialize();
You're expierencing an out of scope failure which is very common to people who are new to ECMAscript.
Every function has it's own execution context and each context in ECMA-/Javascript has its own this context variable. To avoid this, the most common way is to store a reference to the "outer" this context-variable in a local variable:
function gallery()
{
this.image = new Array(10);
this.initial = 1;
this.current = 0;
this.size = 10;
this.frame_height = 400;
this.frame_width = 600;
var self = this;
//...
this.initialize=function()
{
if(document.images)
{
var count = 1;
for(count=1;count<=self.size;count++)
{
self.image[count] = new Image();
self.image[count].src = 'images/'+count+'.jpg';
}
}
// ...
This will work in like every Javascript environment. In the meantime, there are "better" (other) ways to avoid this problem in ECMA. For instance, ECMAscript Edition 5 introduces the .bind() method which let you "bind" the reference from the this context variable to an object of your choice. Lots of javascript frameworks offer a pretty similar way of binding this to an object, even Javascript itself lets you do it with a little effort.
What jAndy said is correct, when the window object calls pics.initialise, this refers to window (this refers to the caller of the function, unless the function is anonymous).
However there is a simpler solution that you may prefer:
Instead of
var pics = new gallery();
window.onload = pics.initialize;
You can do:
var pics = new gallery();
window.onload = function() {
pics.initialize();
};
Because it is wrapped in an anonymous function, this will refer to the gallery instance, instead of window.
jAndy's suggestions are definitely more robust, but may be a bit difficult for someone still grappling with Javascript.