evolutionxbox/object-composition.html

## object-composition.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Object Composition</title>
  </head>
  <body>
    <h1>
      <a class="first" href="#">First</a>
      <a class="second" href="#">Second</a>
    </h1>
    <script src="object-composition.js"></script>
  </body>
</html>

## object-composition.js
var Openable = function Openable() {
  var isOpen = false;

  function open(callback) {
    isOpen = true;
    callback && callback();
  }

  function close(callback) {
    isOpen = false;
    callback && callback();
  }

  function toggle(callback) {
    isOpen ? close(callback) : open(callback);
  }

  return {
    get isOpen() {
      return isOpen;
    },
    open: open,
    close: close,
    toggle: toggle
  };
};


var Thing = function Thing(dom) {
  var openable = Openable();

  dom.addEventListener('click', function(event) {
    event.preventDefault();
    openable.toggle(clickCallback)
  });

  function clickCallback() {
    console.log(dom.textContent + openable.isOpen);
  }

  return {
    target: dom,
    get isOpen() {
      return openable.isOpen;
    },
    close: openable.close,
    open: openable.open,
    toggle: openable.toggle
  };
};

var first = Thing(document.querySelector('.first'));
var second = Thing(document.querySelector('.second'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Object Composition</title>
	</head>
	<body>
	<h1>
	<a class="first" href="#">First</a>
	<a class="second" href="#">Second</a>
	</h1>
	<script src="object-composition.js"></script>
	</body>
	</html>
	var Openable = function Openable() {
	var isOpen = false;

	function open(callback) {
	isOpen = true;
	callback && callback();
	}

	function close(callback) {
	isOpen = false;
	callback && callback();
	}

	function toggle(callback) {
	isOpen ? close(callback) : open(callback);
	}

	return {
	get isOpen() {
	return isOpen;
	},
	open: open,
	close: close,
	toggle: toggle
	};
	};



	var Thing = function Thing(dom) {
	var openable = Openable();

	dom.addEventListener('click', function(event) {
	event.preventDefault();
	openable.toggle(clickCallback)
	});

	function clickCallback() {
	console.log(dom.textContent + openable.isOpen);
	}

	return {
	target: dom,
	get isOpen() {
	return openable.isOpen;
	},
	close: openable.close,
	open: openable.open,
	toggle: openable.toggle
	};
	};

	var first = Thing(document.querySelector('.first'));
	var second = Thing(document.querySelector('.second'));