MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Making text etc clickable

    Scheduled Pinned Locked Moved Development
    14 Posts 3 Posters 10.6k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • brobergB Offline
      broberg Project Sponsor @strawberry 3.141
      last edited by

      @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.141S 1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @broberg
        last edited by

        @broberg what about this?

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

        Please create a github issue if you need help, so I can keep track

        brobergB 1 Reply Last reply Reply Quote 1
        • brobergB Offline
          broberg Project Sponsor @strawberry 3.141
          last edited by

          @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 :(

          1 Reply Last reply Reply Quote 0
          • brobergB Offline
            broberg Project Sponsor
            last edited by 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";
            				
            			};
            1 Reply Last reply Reply Quote 0
            • brobergB Offline
              broberg Project Sponsor
              last edited by 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();
              	},
              
              
              1 Reply Last reply Reply Quote 0
              • brobergB Offline
                broberg Project Sponsor
                last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • 1
                • 2
                • 2 / 2
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy