oroce/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
  <style>
    body {
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: 100%;
    }
    .col {
      float: left;
      width: 49.9%;
      min-height: 300px;
    }
    #left {
      no-background-color: blue;
    }
    #right {
      no-background-color: red;
    }
    #comments {
      list-style-type: none;
    }
    #comments li {
      border: solid 1px red;
      margin-bottom: 20px;

    }
    .marker.active, li.active {
      border: dotted !important;
    }
  </style>
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="left" class="col">
    <div id="content" contenteditable>
      My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?

      You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

      Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.
    </div>
  </div>
  <div id="right" class="col">
    <ul id="comments">

    </ul>
  </div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import { save, load } from 'save-range';
import wrap from 'wrap-range';
import uid from 'uid';
import currentRange from 'current-range';
import color from 'random-color';
const qs = (selector, node = document) => {
  return node.querySelector(selector);
};

const [
  left,
  right,
  editor,
  commentList
] = [
  qs('#left'),
  qs('#right'),
  qs('#content'),
  qs('#comments')
];


editor.addEventListener('mouseup', () => {
  var range = currentRange(editor);
  if (!range) {
    return;
  }
  if (range.startOffset === range.endOffset) {
    return;
  }
  var nodes = wrap(range, 'span');
  var id = uid();
  var rangeColor = color().hexString();
  nodes.forEach((span) => {
    span.setAttribute('data-id', id);
    span.style.backgroundColor = rangeColor;
    span.classList.add('marker');
  });
  saveContent();
  var comment = prompt(`Add comment to ${range.toString()}`) || 'no comment';
  var commentObj = {
    comment: comment,
    id: id,
    color: rangeColor
  };
  appendComment(commentObj);

  comments.push(commentObj);
  localStorage.comments = JSON.stringify(comments);
}, false);

editor.addEventListener('keyup', saveContent, false);

var comments = [];
try {
  comments = JSON.parse(localStorage.comments);
} catch(x) {}

if (comments.length) {
  comments.forEach(appendComment);
}

if (localStorage.content) {
  editor.innerHTML = localStorage.content;
}

function addSelectionComment(obj) {
  appendComment(obj);
}

function appendComment(obj) {
  const li = document.createElement('li');
  const id = obj.id;
  li.style.backgroundColor = obj.color;
  li.setAttribute('data-id', id);
  li.innerHTML = `<b>Robi commented just few moments ago</b>
  <p>${obj.comment}</p>`;
  li.onclick = () => {
    const isActive = li.classList.contains('active');

    [].forEach.call(editor.querySelectorAll('.marker.active'), (span) => {
      span.classList.remove('active');
    });
    if (isActive === true) {
      li.classList.remove('active');
      return;
    }
    li.classList.add('active');
    [].forEach.call(editor.querySelectorAll(`span.marker[data-id="${id}"]`), (span) => {
      span.classList.add('active');
    });
  };
  commentList.appendChild(li);
}

function saveContent(){
  localStorage.content = editor.innerHTML;
}

console.log('app is on');

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "save-range": "1.1.1",
    "wrap-range": "2.0.2",
    "uid": "0.0.2",
    "current-range": "1.1.1",
    "random-color": "1.0.1",
    "babel-runtime": "6.6.1"
  }
}

## transpiled.js
'use strict';

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _saveRange = require('save-range');

var _wrapRange = require('wrap-range');

var _wrapRange2 = _interopRequireDefault(_wrapRange);

var _uid = require('uid');

var _uid2 = _interopRequireDefault(_uid);

var _currentRange = require('current-range');

var _currentRange2 = _interopRequireDefault(_currentRange);

var _randomColor = require('random-color');

var _randomColor2 = _interopRequireDefault(_randomColor);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var qs = function qs(selector) {
  var node = arguments.length <= 1 || arguments[1] === undefined ? document : arguments[1];

  return node.querySelector(selector);
}; // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var left = qs('#left');
var right = qs('#right');
var editor = qs('#content');
var commentList = qs('#comments');

editor.addEventListener('mouseup', function () {
  var range = (0, _currentRange2.default)(editor);
  if (!range) {
    return;
  }
  if (range.startOffset === range.endOffset) {
    return;
  }
  var nodes = (0, _wrapRange2.default)(range, 'span');
  var id = (0, _uid2.default)();
  var rangeColor = (0, _randomColor2.default)().hexString();
  nodes.forEach(function (span) {
    span.setAttribute('data-id', id);
    span.style.backgroundColor = rangeColor;
    span.classList.add('marker');
  });
  saveContent();
  var comment = prompt('Add comment to ' + range.toString()) || 'no comment';
  var commentObj = {
    comment: comment,
    id: id,
    color: rangeColor
  };
  appendComment(commentObj);

  comments.push(commentObj);
  localStorage.comments = (0, _stringify2.default)(comments);
}, false);

editor.addEventListener('keyup', saveContent, false);

var comments = [];
try {
  comments = JSON.parse(localStorage.comments);
} catch (x) {}

if (comments.length) {
  comments.forEach(appendComment);
}

if (localStorage.content) {
  editor.innerHTML = localStorage.content;
}

function addSelectionComment(obj) {
  appendComment(obj);
}

function appendComment(obj) {
  var li = document.createElement('li');
  var id = obj.id;
  li.style.backgroundColor = obj.color;
  li.setAttribute('data-id', id);
  li.innerHTML = '<b>Robi commented just few moments ago</b>\n  <p>' + obj.comment + '</p>';
  li.onclick = function () {
    var isActive = li.classList.contains('active');

    [].forEach.call(editor.querySelectorAll('.marker.active'), function (span) {
      span.classList.remove('active');
    });
    if (isActive === true) {
      li.classList.remove('active');
      return;
    }
    li.classList.add('active');
    [].forEach.call(editor.querySelectorAll('span.marker[data-id="' + id + '"]'), function (span) {
      span.classList.add('active');
    });
  };
  commentList.appendChild(li);
}

function saveContent() {
  localStorage.content = editor.innerHTML;
}

console.log('app is on');
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	<style>
	body {
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: 100%;
	}
	.col {
	float: left;
	width: 49.9%;
	min-height: 300px;
	}
	#left {
	no-background-color: blue;
	}
	#right {
	no-background-color: red;
	}
	#comments {
	list-style-type: none;
	}
	#comments li {
	border: solid 1px red;
	margin-bottom: 20px;

	}
	.marker.active, li.active {
	border: dotted !important;
	}
	</style>
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="left" class="col">
	<div id="content" contenteditable>
	My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?

	You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

	Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.
	</div>
	</div>
	<div id="right" class="col">
	<ul id="comments">

	</ul>
	</div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import { save, load } from 'save-range';
	import wrap from 'wrap-range';
	import uid from 'uid';
	import currentRange from 'current-range';
	import color from 'random-color';
	const qs = (selector, node = document) => {
	return node.querySelector(selector);
	};

	const [
	left,
	right,
	editor,
	commentList
	] = [
	qs('#left'),
	qs('#right'),
	qs('#content'),
	qs('#comments')
	];



	editor.addEventListener('mouseup', () => {
	var range = currentRange(editor);
	if (!range) {
	return;
	}
	if (range.startOffset === range.endOffset) {
	return;
	}
	var nodes = wrap(range, 'span');
	var id = uid();
	var rangeColor = color().hexString();
	nodes.forEach((span) => {
	span.setAttribute('data-id', id);
	span.style.backgroundColor = rangeColor;
	span.classList.add('marker');
	});
	saveContent();
	var comment = prompt(`Add comment to ${range.toString()}`) \|\| 'no comment';
	var commentObj = {
	comment: comment,
	id: id,
	color: rangeColor
	};
	appendComment(commentObj);

	comments.push(commentObj);
	localStorage.comments = JSON.stringify(comments);
	}, false);

	editor.addEventListener('keyup', saveContent, false);

	var comments = [];
	try {
	comments = JSON.parse(localStorage.comments);
	} catch(x) {}

	if (comments.length) {
	comments.forEach(appendComment);
	}

	if (localStorage.content) {
	editor.innerHTML = localStorage.content;
	}

	function addSelectionComment(obj) {
	appendComment(obj);
	}

	function appendComment(obj) {
	const li = document.createElement('li');
	const id = obj.id;
	li.style.backgroundColor = obj.color;
	li.setAttribute('data-id', id);
	li.innerHTML = `<b>Robi commented just few moments ago</b>
	<p>${obj.comment}</p>`;
	li.onclick = () => {
	const isActive = li.classList.contains('active');

	[].forEach.call(editor.querySelectorAll('.marker.active'), (span) => {
	span.classList.remove('active');
	});
	if (isActive === true) {
	li.classList.remove('active');
	return;
	}
	li.classList.add('active');
	[].forEach.call(editor.querySelectorAll(`span.marker[data-id="${id}"]`), (span) => {
	span.classList.add('active');
	});
	};
	commentList.appendChild(li);
	}

	function saveContent(){
	localStorage.content = editor.innerHTML;
	}

	console.log('app is on');
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"save-range": "1.1.1",
	"wrap-range": "2.0.2",
	"uid": "0.0.2",
	"current-range": "1.1.1",
	"random-color": "1.0.1",
	"babel-runtime": "6.6.1"
	}
	}
	'use strict';

	var _stringify = require('babel-runtime/core-js/json/stringify');

	var _stringify2 = _interopRequireDefault(_stringify);

	var _saveRange = require('save-range');

	var _wrapRange = require('wrap-range');

	var _wrapRange2 = _interopRequireDefault(_wrapRange);

	var _uid = require('uid');

	var _uid2 = _interopRequireDefault(_uid);

	var _currentRange = require('current-range');

	var _currentRange2 = _interopRequireDefault(_currentRange);

	var _randomColor = require('random-color');

	var _randomColor2 = _interopRequireDefault(_randomColor);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var qs = function qs(selector) {
	var node = arguments.length <= 1 \|\| arguments[1] === undefined ? document : arguments[1];

	return node.querySelector(selector);
	}; // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var left = qs('#left');
	var right = qs('#right');
	var editor = qs('#content');
	var commentList = qs('#comments');

	editor.addEventListener('mouseup', function () {
	var range = (0, _currentRange2.default)(editor);
	if (!range) {
	return;
	}
	if (range.startOffset === range.endOffset) {
	return;
	}
	var nodes = (0, _wrapRange2.default)(range, 'span');
	var id = (0, _uid2.default)();
	var rangeColor = (0, _randomColor2.default)().hexString();
	nodes.forEach(function (span) {
	span.setAttribute('data-id', id);
	span.style.backgroundColor = rangeColor;
	span.classList.add('marker');
	});
	saveContent();
	var comment = prompt('Add comment to ' + range.toString()) \|\| 'no comment';
	var commentObj = {
	comment: comment,
	id: id,
	color: rangeColor
	};
	appendComment(commentObj);

	comments.push(commentObj);
	localStorage.comments = (0, _stringify2.default)(comments);
	}, false);

	editor.addEventListener('keyup', saveContent, false);

	var comments = [];
	try {
	comments = JSON.parse(localStorage.comments);
	} catch (x) {}

	if (comments.length) {
	comments.forEach(appendComment);
	}

	if (localStorage.content) {
	editor.innerHTML = localStorage.content;
	}

	function addSelectionComment(obj) {
	appendComment(obj);
	}

	function appendComment(obj) {
	var li = document.createElement('li');
	var id = obj.id;
	li.style.backgroundColor = obj.color;
	li.setAttribute('data-id', id);
	li.innerHTML = '<b>Robi commented just few moments ago</b>\n <p>' + obj.comment + '</p>';
	li.onclick = function () {
	var isActive = li.classList.contains('active');

	[].forEach.call(editor.querySelectorAll('.marker.active'), function (span) {
	span.classList.remove('active');
	});
	if (isActive === true) {
	li.classList.remove('active');
	return;
	}
	li.classList.add('active');
	[].forEach.call(editor.querySelectorAll('span.marker[data-id="' + id + '"]'), function (span) {
	span.classList.add('active');
	});
	};
	commentList.appendChild(li);
	}

	function saveContent() {
	localStorage.content = editor.innerHTML;
	}

	console.log('app is on');