caius · February 28, 2020 12:26
diff --git a/stimulus-inactivity.html b/stimulus-inactivity.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
  <script>
    (() => {
      const inactivityController = class extends Stimulus.Controller {
        connect() {
          this.timeoutInterval = parseInt(this.data.get("timeout"))
          this.redirectDestination = this.data.get("destination")
          console.log(this.redirectDestination)

          // Start inactivity timeout
          this.activityOccurred()
        }

        disconnect() {
          // Stop the timeout
          this.removeTimeout()
        }

        // Something happened to reset the time, clear the old one and start a new one
        activityOccurred() {
          this.removeTimeout()
          this.timeoutChecker = setTimeout(this.inactivityRedirect, this.timeoutInterval * 1000, this.redirectDestination)
        }

        // Same logic called in activityOccurred and disconnect
        removeTimeout() {
          if (this.timeoutChecker != null) {
            clearTimeout(this.timeoutChecker)
          }
        }

        // Redirect away due to inactivity
        inactivityRedirect(destination) {
          console.log(`Inactive too long, would've gone to ${destination}`)
        }
      }

      const application = Stimulus.Application.start()
      application.register("inactivity", inactivityController)
    })()
  </script>
 </head>
 <body>
  <div data-controller="inactivity" data-inactivity-timeout="2" data-inactivity-destination="#logout"></div>

  <div data-controller="counter">
    <p>
      <label for="name">Name</label>:<input type="text" name="name" value="" id="name">
    </p>

    <p>
      <textarea name="Docs" rows="8" cols="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
    </p>

    <p>
      <button>Click me!</button>
    </p>
  </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
	<script>
	(() => {
	const inactivityController = class extends Stimulus.Controller {
	connect() {
	this.timeoutInterval = parseInt(this.data.get("timeout"))
	this.redirectDestination = this.data.get("destination")
	console.log(this.redirectDestination)

	// Start inactivity timeout
	this.activityOccurred()
	}

	disconnect() {
	// Stop the timeout
	this.removeTimeout()
	}

	// Something happened to reset the time, clear the old one and start a new one
	activityOccurred() {
	this.removeTimeout()
	this.timeoutChecker = setTimeout(this.inactivityRedirect, this.timeoutInterval * 1000, this.redirectDestination)
	}

	// Same logic called in activityOccurred and disconnect
	removeTimeout() {
	if (this.timeoutChecker != null) {
	clearTimeout(this.timeoutChecker)
	}
	}

	// Redirect away due to inactivity
	inactivityRedirect(destination) {
	console.log(`Inactive too long, would've gone to ${destination}`)
	}
	}

	const application = Stimulus.Application.start()
	application.register("inactivity", inactivityController)
	})()
	</script>
	</head>
	<body>
	<div data-controller="inactivity" data-inactivity-timeout="2" data-inactivity-destination="#logout"></div>

	<div data-controller="counter">
	<p>
	<label for="name">Name</label>:<input type="text" name="name" value="" id="name">
	</p>

	<p>
	<textarea name="Docs" rows="8" cols="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
	</p>

	<p>
	<button>Click me!</button>
	</p>
	</div>

	</body>
	</html>