Fil · February 1, 2018 16:05
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
  <meta charset="utf-8">
  <style>
    .slide {
      display: none;
      font-size: 180px;
    }
    .slide.slide--current {
      display: block;
    }
  </style>

 <head>
 <body>
  
  <div data-controller="slideshow">
  <button data-action="slideshow#previous">←</button>
  <button data-action="slideshow#next">→</button>

  <div data-target="slideshow.slide" class="slide slide--current">🐵</div>
  <div data-target="slideshow.slide" class="slide">🙈</div>
  <div data-target="slideshow.slide" class="slide">🙉</div>
  <div data-target="slideshow.slide" class="slide">🙊</div>
 </div>
  
  
  <div data-controller="hello">
  <input data-target="hello.name" type="text">
  <button data-action="click->hello#greet">Greet</button>
  </div>
  <p/>
  <div>Using <a href="https://github.com/stimulusjs/stimulus">stimulusjs</a></div>

  <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
  <script src="https://unpkg.com/d3"></script>
  <script>
 (function() {
  const application = Stimulus.Application.start();
  application.register(
    "hello",
    class extends Stimulus.Controller {
      greet() {
        d3.select("p").html(`Hello, ${this.name}!`);
      }

      get name() {
        return this.targets.find("name").value;
      }
    }
  );

  application.register(
    "slideshow",
    class extends Stimulus.Controller {
      initialize() {
        this.render();
      }

      next() {
        if (this.index < this.lastIndex) {
          this.index++;
        }
      }

      previous() {
        if (this.index > 0) {
          this.index--;
        }
      }

      render() {
        this.slideElements.forEach((element, index) => {
          element.classList.toggle("slide--current", index == this.index);
        });
      }

      get index() {
        if (this.data.has("index")) {
          return parseInt(this.data.get("index"));
        } else {
          return 0;
        }
      }

      set index(value) {
        this.data.set("index", value);
        this.render();
      }

      get lastIndex() {
        return this.slideElements.length - 1;
      }

      get slideElements() {
        return this.targets.findAll("slide");
      }
    }
  );
 })();

  </script>
  
  </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	.slide {
	display: none;
	font-size: 180px;
	}
	.slide.slide--current {
	display: block;
	}
	</style>

	<head>
	<body>

	<div data-controller="slideshow">
	<button data-action="slideshow#previous">←</button>
	<button data-action="slideshow#next">→</button>

	<div data-target="slideshow.slide" class="slide slide--current">🐵</div>
	<div data-target="slideshow.slide" class="slide">🙈</div>
	<div data-target="slideshow.slide" class="slide">🙉</div>
	<div data-target="slideshow.slide" class="slide">🙊</div>
	</div>


	<div data-controller="hello">
	<input data-target="hello.name" type="text">
	<button data-action="click->hello#greet">Greet</button>
	</div>
	<p/>
	<div>Using <a href="https://github.com/stimulusjs/stimulus">stimulusjs</a></div>

	<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
	<script src="https://unpkg.com/d3"></script>
	<script>
	(function() {
	const application = Stimulus.Application.start();
	application.register(
	"hello",
	class extends Stimulus.Controller {
	greet() {
	d3.select("p").html(`Hello, ${this.name}!`);
	}

	get name() {
	return this.targets.find("name").value;
	}
	}
	);

	application.register(
	"slideshow",
	class extends Stimulus.Controller {
	initialize() {
	this.render();
	}

	next() {
	if (this.index < this.lastIndex) {
	this.index++;
	}
	}

	previous() {
	if (this.index > 0) {
	this.index--;
	}
	}

	render() {
	this.slideElements.forEach((element, index) => {
	element.classList.toggle("slide--current", index == this.index);
	});
	}

	get index() {
	if (this.data.has("index")) {
	return parseInt(this.data.get("index"));
	} else {
	return 0;
	}
	}

	set index(value) {
	this.data.set("index", value);
	this.render();
	}

	get lastIndex() {
	return this.slideElements.length - 1;
	}

	get slideElements() {
	return this.targets.findAll("slide");
	}
	}
	);
	})();

	</script>

	</body>
	</html>