metaist/index.html

## index.html
<!DOCTYPE html>
<html><head>
<title>wordeck - words in a deck</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet/less" href="wordeck.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
</head><body class="mode-edit">
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">wordeck</a>
  </div>
  <div class="navbar-form navbar-left">
    <div class="form-group">
      <button id="btn-edit" class="btn btn-default"><i class="glyphicon glyphicon-pencil"></i></button>
      <button id="btn-view" class="btn btn-default"><i class="glyphicon glyphicon-play"></i></button>
    </div>
    <div class="form-group">
      <label><input id="chk-shuffle" type="checkbox" /> Shuffle</label>
    </div>

  </div>
  <p id="idx" class="navbar-text"></p>
</nav>
<div id="app">
  <div id="words">
    <textarea>wordeck
is
a
deck
of
words</textarea>
  </div>
  <div id="deck"></div>
</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" >
/*jslint indent: 2 */
/*global jQuery:false */
(function ($) {
  'use strict';
  var $body = $('body'),
    $app = $('#app'),
    $deck = $('#deck'),
    app = { idx: -1, words: [] },
    shuffle = function (array) {
      var i, t, m = array.length;
      while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m], array[m] = array[i], array[i] = t;
      }//end while
      return array;
    };

  app.edit = function () {
    $body.removeClass('mode-view').addClass('mode-edit');
    $app.find('textarea').focus();
    return app;
  };

  app.view = function () {
    $body.removeClass('mode-edit').addClass('mode-view');
    app.words = $app.find('textarea').val().split('\n');
    if ($('#chk-shuffle').is(':checked')) { app.words = shuffle(app.words); }
    app.next();
    return app;
  };

  app.pos = function () {
    $deck.text(' ');
    if (app.idx < 0) { app.idx = app.words.length - 1; }
    if (app.idx >= app.words.length) { app.idx = 0; }
    if (app.idx < app.words.length) { $deck.text(app.words[app.idx]); }
    $('#idx').text((app.idx + 1) + ' / ' + app.words.length);
    return app;
  };

  app.prev = function () {
    app.idx -= 1;
    return app.pos();
  };

  app.next = function () {
    app.idx += 1;
    return app.pos();
  };

  // Handlers

  $('#btn-edit').click(app.edit);
  $('#btn-view').click(app.view);
  $('#chk-shuffle').click(app.view);

  $(window).on('keydown', function (e) {
    var handlers = {
      8: app.prev, // backspace
      13: app.next, // enter
      32: app.next, // space
      37: app.prev, // left
      38: app.prev, // up
      39: app.next, // right
      40: app.next // down
    }, fn = handlers[e.which];

    if (fn) { fn.call(); }
  });

  $('textarea')
    .keydown(function (e) { e.stopPropagation(); })
    .change(function () {
      app.idx = -1;
      app.next();
    });

  $(function () { app.edit(); });
  window.app = app;
}(jQuery));
</script>
</body></html>

## wordeck.less
#app, #words, #deck { position: absolute; }

#app {
  top: 52px;
  bottom: 0;
  left: 0;
  right: 0;
}

#words {
  top: 0;
  bottom: 0;
  left: -25%;
  right: 100%;
  border-right: 2px solid #e7e7e7;
  padding: 0.5rem;

  textarea {
    width: 100%;
    height: 100%;
    font-size: 16pt;
    border: none;
    resize: none;
    font-family: serif;
  }
}

#deck {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  font-size: 30rem;
  font-family: serif;
  text-align: center;
}

.mode-view {
  #btn-view { display: none; }
  #btn-edit { display: block; }
}

.mode-edit {
  #btn-view { display: block; }
  #btn-edit { display: none; }

  #words {
    left: 0;
    right: 80%;
  }

  #deck { left: 20%; }
}
	<!DOCTYPE html>
	<html><head>
	<title>wordeck - words in a deck</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
	<link rel="stylesheet/less" href="wordeck.less" />
	<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
	</head><body class="mode-edit">
	<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
	<a class="navbar-brand" href="#">wordeck</a>
	</div>
	<div class="navbar-form navbar-left">
	<div class="form-group">
	<button id="btn-edit" class="btn btn-default"><i class="glyphicon glyphicon-pencil"></i></button>
	<button id="btn-view" class="btn btn-default"><i class="glyphicon glyphicon-play"></i></button>
	</div>
	<div class="form-group">
	<label><input id="chk-shuffle" type="checkbox" /> Shuffle</label>
	</div>

	</div>
	<p id="idx" class="navbar-text"></p>
	</nav>
	<div id="app">
	<div id="words">
	<textarea>wordeck
	is
	a
	deck
	of
	words</textarea>
	</div>
	<div id="deck"></div>
	</div>

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" >
	/jslint indent: 2 /
	/global jQuery:false /
	(function ($) {
	'use strict';
	var $body = $('body'),
	$app = $('#app'),
	$deck = $('#deck'),
	app = { idx: -1, words: [] },
	shuffle = function (array) {
	var i, t, m = array.length;
	while (m) {
	i = Math.floor(Math.random() * m--);
	t = array[m], array[m] = array[i], array[i] = t;
	}//end while
	return array;
	};

	app.edit = function () {
	$body.removeClass('mode-view').addClass('mode-edit');
	$app.find('textarea').focus();
	return app;
	};

	app.view = function () {
	$body.removeClass('mode-edit').addClass('mode-view');
	app.words = $app.find('textarea').val().split('\n');
	if ($('#chk-shuffle').is(':checked')) { app.words = shuffle(app.words); }
	app.next();
	return app;
	};

	app.pos = function () {
	$deck.text(' ');
	if (app.idx < 0) { app.idx = app.words.length - 1; }
	if (app.idx >= app.words.length) { app.idx = 0; }
	if (app.idx < app.words.length) { $deck.text(app.words[app.idx]); }
	$('#idx').text((app.idx + 1) + ' / ' + app.words.length);
	return app;
	};

	app.prev = function () {
	app.idx -= 1;
	return app.pos();
	};

	app.next = function () {
	app.idx += 1;
	return app.pos();
	};

	// Handlers

	$('#btn-edit').click(app.edit);
	$('#btn-view').click(app.view);
	$('#chk-shuffle').click(app.view);

	$(window).on('keydown', function (e) {
	var handlers = {
	8: app.prev, // backspace
	13: app.next, // enter
	32: app.next, // space
	37: app.prev, // left
	38: app.prev, // up
	39: app.next, // right
	40: app.next // down
	}, fn = handlers[e.which];

	if (fn) { fn.call(); }
	});

	$('textarea')
	.keydown(function (e) { e.stopPropagation(); })
	.change(function () {
	app.idx = -1;
	app.next();
	});

	$(function () { app.edit(); });
	window.app = app;
	}(jQuery));
	</script>
	</body></html>
	#app, #words, #deck { position: absolute; }

	#app {
	top: 52px;
	bottom: 0;
	left: 0;
	right: 0;
	}

	#words {
	top: 0;
	bottom: 0;
	left: -25%;
	right: 100%;
	border-right: 2px solid #e7e7e7;
	padding: 0.5rem;

	textarea {
	width: 100%;
	height: 100%;
	font-size: 16pt;
	border: none;
	resize: none;
	font-family: serif;
	}
	}

	#deck {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	font-size: 30rem;
	font-family: serif;
	text-align: center;
	}

	.mode-view {
	#btn-view { display: none; }
	#btn-edit { display: block; }
	}

	.mode-edit {
	#btn-view { display: block; }
	#btn-edit { display: none; }

	#words {
	left: 0;
	right: 80%;
	}

	#deck { left: 20%; }
	}