Skip to content

Instantly share code, notes, and snippets.

@sam016

sam016/index.html

Last active February 17, 2018 12:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sam016/8af14f3d476fea1b57287aa4b0910645 to your computer and use it in GitHub Desktop.
Save sam016/8af14f3d476fea1b57287aa4b0910645 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Grid based letter designs// source http://jsbin.com/jorijaf
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Grid Alphabets">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<style id="jsbin-css">
html, body{
padding:0;
margin:0;
font-family: arial;
}
table{
border-collapse:collapse;
}
.row{
margin: 0;
padding: 0;
line-height: 10px;
}
.cell{
margin: 0;
padding: 0;
border: 1px solid #BBB;
width: 10px;
height: 10px;
transition:200ms;
}
.cell:hover{
background: skyblue;
border:1px solid black;
}
.cell.selected{
background:dodgerblue;
}
.container-inline{
position: relative;
display:inline-block;
}
.container-inline>svg{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
}
.container+.container{
margin-top:10px;
}
</style>
</head>
<body ng-app="my-app">
<div ng-controller="grid-controller">
<div class="container info-bar">
<input type="checkbox" ng-model="debug">
<label for="">Debug</label>
</input>
<button ng-click="reset()">Reset</button>
<span>{{currentCol}},{{currentRow}}</span>
</div>
<div class="container">
<div class="container-inline">
<table>
<tr class="row" ng-repeat="indRow in rows track by $index">
<td class="cell" ng-class="{selected:mapSelected[(indCol)+','+(indRow)]}"
ng-repeat="indCol in columns track by $index"
ng-mouseover="cellHover(indCol, indRow, $event)"
ng-click="cellClick(indCol, indRow)"
></td>
</tr>
</table>
<svg></svg>
</div>
</div>
<div class="container" ng-if="debug">
{{mapSelected}}
</div>
</div>
<script id="jsbin-javascript">
console.clear();
function indFx(val, ind){
return ind;
}
// 16:9
var COLUMNS_COUNT = 27,
ROWS_COUNT = 48;
var myApp = angular.module('my-app', []);
myApp.controller('grid-controller', ['$scope', function($scope){
function reset() {
$scope.mapSelected = {};
}
function cellHover(indCol,indRow, $event){
$scope.currentRow = indRow;
$scope.currentCol = indCol;
if($event.buttons===1){
$scope.mapSelected[indCol+','+indRow] = !($scope.mapSelected[indCol+','+indRow]);
}
}
function cellClick(indCol, indRow){
return;
$scope.mapSelected[indCol+','+indRow] = !($scope.mapSelected[indCol+','+indRow]);
}
$scope.rows = Array.from({length: ROWS_COUNT}, indFx);
$scope.columns = Array.from({length:COLUMNS_COUNT}, indFx);
$scope.currentRow = -1;
$scope.currentCol = -1;
$scope.mapSelected = {};
$scope.debug = true;
$scope.reset = reset;
$scope.cellHover = cellHover;
$scope.cellClick = cellClick;
}]);
</script>
<script id="jsbin-source-css" type="text/css">html, body{
padding:0;
margin:0;
font-family: arial;
}
table{
border-collapse:collapse;
}
.row{
margin: 0;
padding: 0;
line-height: 10px;
}
.cell{
margin: 0;
padding: 0;
border: 1px solid #BBB;
width: 10px;
height: 10px;
transition:200ms;
}
.cell:hover{
background: skyblue;
border:1px solid black;
}
.cell.selected{
background:dodgerblue;
}
.container-inline{
position: relative;
display:inline-block;
}
.container-inline>svg{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
}
.container+.container{
margin-top:10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
function indFx(val, ind){
return ind;
}
// 16:9
var COLUMNS_COUNT = 27,
ROWS_COUNT = 48;
var myApp = angular.module('my-app', []);
myApp.controller('grid-controller', ['$scope', function($scope){
function reset() {
$scope.mapSelected = {};
}
function cellHover(indCol,indRow, $event){
$scope.currentRow = indRow;
$scope.currentCol = indCol;
if($event.buttons===1){
$scope.mapSelected[indCol+','+indRow] = !($scope.mapSelected[indCol+','+indRow]);
}
}
function cellClick(indCol, indRow){
return;
$scope.mapSelected[indCol+','+indRow] = !($scope.mapSelected[indCol+','+indRow]);
}
$scope.rows = Array.from({length: ROWS_COUNT}, indFx);
$scope.columns = Array.from({length:COLUMNS_COUNT}, indFx);
$scope.currentRow = -1;
$scope.currentCol = -1;
$scope.mapSelected = {};
$scope.debug = true;
$scope.reset = reset;
$scope.cellHover = cellHover;
$scope.cellClick = cellClick;
}]);</script></body>
</html>
Raw
jsbin.jorijaf.css
html, body{
padding:0;
margin:0;
font-family: arial;
}
table{
border-collapse:collapse;
}
.row{
margin: 0;
padding: 0;
line-height: 10px;
}
.cell{
margin: 0;
padding: 0;
border: 1px solid #BBB;
width: 10px;
height: 10px;
transition:200ms;
}
.cell:hover{
background: skyblue;
border:1px solid black;
}
.cell.selected{
background:dodgerblue;
}
.container-inline{
position: relative;
display:inline-block;
}
.container-inline>svg{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
}
.container+.container{
margin-top:10px;
}
Raw
jsbin.jorijaf.js
console.clear();
function indFx(val, ind){
return ind;
}
// 16:9
var COLUMNS_COUNT = 27,
ROWS_COUNT = 48;
var myApp = angular.module('my-app', []);
myApp.controller('grid-controller', ['$scope', function($scope){
function reset() {
$scope.mapSelected = {};
}
function cellHover(indCol,indRow, $event){
$scope.currentRow = indRow;
$scope.currentCol = indCol;
if($event.buttons===1){
$scope.mapSelected[indCol+','+indRow] = !($scope.mapSelected[indCol+','+indRow]);
}
}
function cellClick(indCol, indRow){
return;
$scope.mapSelected[indCol+','+indRow] = !($scope.mapSelected[indCol+','+indRow]);
}
$scope.rows = Array.from({length: ROWS_COUNT}, indFx);
$scope.columns = Array.from({length:COLUMNS_COUNT}, indFx);
$scope.currentRow = -1;
$scope.currentCol = -1;
$scope.mapSelected = {};
$scope.debug = true;
$scope.reset = reset;
$scope.cellHover = cellHover;
$scope.cellClick = cellClick;
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment