Making text etc clickable

[broberg]

Hi,

Since I’ve only graced the surface of Javascripting and it was at least 7 years since I last actively worked with html/css and php I find it a little bit frustrating trying to make something clickable.

Whats the most basic way to make a block of text clickable within the MM2 borders?
I guess it really doesn’t work as a normal browser since I can’t even click on links?

My aim is to modify the Newsfeed module to display the description when the title is clicked and then hide the description again when you click on the description.

and in the long run I will probably need to modify more modules to be clickable, but first things first, learning basics.

[bhepler]

You’ll probably want to create a customized version of the Newsfeed module. The part of the code that actually puts the text on the screen is in the newsfeed.js file, specifically in the getDom: function() {...} portion of the code.

If you look at it, it’s already creating a <DIV> element and changing the innerHTML to the value of the title from the newsfeed (line 149) title.innerHTML = this.newsItems[this.activeItem].title; It should be relatively easy to modify this area of the code to add the anchor tag & url.

[broberg]

@bhepler said in Making text etc clickable:

If you look at it, it’s already creating a <DIV> element and changing the innerHTML to the value of the title from the newsfeed (line 149) title.innerHTML = this.newsItems[this.activeItem].title; It should be relatively easy to modify this area of the code to add the anchor tag & url.

I’ve found the part where it creates the actual content, I’ve tried adding onclick to text, to buttons, tried making functions to act on the onclick event etc. maybe it’s a z-index issue and something is in the way. because it doesn’t react at all to any clicks. I tried the anchor tag just to see if it would react, but no. Something is blocking the “clickability” of the MM module

[broberg]

I can report yes, it was a z-index issue.
setting the region.fullscreen to z-index -1 made everything clickable.

But I’ll probably just change the newsfeed to z-index 1
I used a eventlistener to register the click and change the contents of this.innerhtml from title to description.

Next up, make it draw a new div and pause the timer for the headlines.

[broberg]

Any suggestions on how I pause the updateInterval ?

I’ve tried just to change the var to another value when clicked, but it doesn’t change the current item interval.

[strawberry 3.141]

@broberg when you save the interval into a variabke you can stop/clear the interval

this.interval = setInterval(...);

clearInterval(this.interval);

[broberg]

@strawberry-3.141 Sorry to bother you with the poking stick, but, I’m having no luck in getting it to work.

this is the code that updates the newsfeed item

	scheduleUpdateInterval: function() {
		var self = this;

		self.updateDom(self.config.animationSpeed);

		setInterval(function() {
			self.activeItem++;
			self.updateDom(self.config.animationSpeed);
		}, this.config.updateInterval);
	},

This also loads the first feed item when the page loads for the first time.

how should I implement this in another function to pause/reset the scheduleUpdateInterval function?

[strawberry 3.141]

@broberg

scheduleUpdateInterval: function() {
  var self = this;

  self.updateDom(self.config.animationSpeed);

  self.interval = setInterval(function() {
    self.activeItem++;
    self.updateDom(self.config.animationSpeed);
  }, this.config.updateInterval);
},

pause: function(){
  clearInterval(this.interval);
},

resume: function(){
  this.scheduleUpdateInterval();
},

[broberg]

@strawberry-3.141

No go on that either, this.interval is undefined it says.
I have to research this some more, it’s giving me a headache.

Could it have something to do with the fact that the interval is set in the scheduleUpdateInterval function and it can’t be reached from another function outside that?

this.scheduleUpdateInterval(); works, I think. (I get more updates on top of each other if I click several times)

[strawberry 3.141]

@broberg what about this?

this.interval = setInterval(function() {
    self.activeItem++;
    self.updateDom(self.config.animationSpeed);
  }, this.config.updateInterval);

[broberg]

@strawberry-3.141

using that code snippet in the pause function just adds a new item with the updateInterval time,

So I can change the interval on the next loaded news item, but not the current :(

[broberg]

so after strawberry-pi explained the last snippet of code I got it to work,
Big thanks for the patience!

These are the changes I’ve made so far, please consider that the code is probably not optimal, at all.

 			var title = document.createElement("div");
			title.className = "bright medium regular fed";
			title.innerHTML = this.newsItems[this.activeItem].title;
			title.addEventListener("click", () => showdesc(this)); //Show description on click
			wrapper.appendChild(title);
			

			//below is the function to show description and hide title
			function showdesc(thisdesc) {
				
				thisdesc.intpause();	//pause the interval			
				title.style.display="none";
				description = document.createElement("div");
				description.className = "medium light infoCenter";
				description.innerHTML = thisdesc.newsItems[thisdesc.activeItem].description;
				description.addEventListener("click", () => hidedesc(thisdesc));  //Hide description on click 
				wrapper.appendChild(description);
			};

			//and to close the description and return to title
			function hidedesc(thisdesc) {
				thisdesc.intresume();	//resume the interval
				description.style.display="none";
				title.style.display="block";
				
			};

[broberg]

Changes to the scheduleUpdateInterval

	scheduleUpdateInterval: function() {
		var self = this;

		self.updateDom(self.config.animationSpeed);

		// setInterval placed within a variable so you can clear it
		this.interval = setInterval(function() {
			self.activeItem++;
			self.updateDom(self.config.animationSpeed);
		}, this.config.updateInterval);
	},

And some functions to start and stop the interval

	intpause: function(){
		clearInterval(this.interval);

	},

	intresume: function(){
		this.scheduleUpdateInterval();
	},

[broberg]

Next up, adding a timer to the description that doesn’t mess with the news items that is next in line,
Tried one version, but it couldn’t handle multiple start/stop clicks.