spreadsheet directive

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="https://acadmin.vizu.com/admin/assets/lib/normalize.css/normalize.css">
<link rel="stylesheet" href="https://acadmin.vizu.com/admin/assets/css/_type.css">
<link rel="stylesheet" href="https://acadmin.vizu.com/admin/assets/css/_tables.css">
<link rel="stylesheet" href="https://acadmin.vizu.com/admin/assets/css/_forms.css">
<h1>Editable Text Area w/ auto height</h1>

<div ng-controller="MyCtrl">
    <div class="scrollable">
        <!-- 
        <div class="table-div" style="width:100%">
            <div class="tr-div" ng-repeat="item in data">
                <div class="td-div">
                    <textarea onkeyup="resize(this)"></textarea>
                </div>
                <div class="td-div">
                    <textarea onkeyup="resize(this)"></textarea>
                </div>
                <div class="td-div">
                    <textarea onkeyup="resize(this)"></textarea>
                </div>
            </div>
        </div>
        -->
        <ul>
        <li ng-repeat="item in data">
            <textarea onkeyup="resize(this)" ></textarea> 
            | <textarea onkeyup="resize(this)" ></textarea>
            | <textarea onkeyup="resize(this)" ></textarea>
        </li>
    </ul>
    </div>
    <!-- <div class="scrollable">
        
        <table class="sheet header">
            <thead>
                <tr>
                    <th></th>
                    <th>Name1</th>
                    <th>Name2</th>
                    <th>Name3</th>
                </tr>
                <thead>
                    <tr ng-repeat="item in data">
                        <td>{{$index+1}}</td>
                        <td>
                            <textarea onkeyup="resize(this)" ></textarea>
                        </td>
                        <td>
                            <textarea onkeyup="resize(this)" ></textarea>
            ...

CSS

.table-div {
    display:table;
}
.tr-div {
    display:table-row
}
.td-div {
    display:table-cell;
    border:1px solid silver
}
.edit-in-place {
}
.edit-in-place textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    resize: none;
    outline: none;
    height: 21px;
    min-height: 21px;
    z-index: 99999999;
}
.edit-in-place textarea.off {
    border: 1px solid transparent;
}
/* Excel Like Spread Sheet Table*/
 table.sheet {
    table-layout: fixed;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    width: 100%;
    margin: 0;
}
div.scrollable {
    border-right:1px solid #ccc;
    max-height: 305px;
    overflow-x:hidden;
    overflow-y: scroll;
    width:100%;
}
/*div.scrollable table.sheet {
    border-top: none;
}
table.sheet.header th  {
}

table.sheet.footer {

}
*/
 div.scrollable table {
    border-top: 1px solid transparent;
}
table.sheet th:nth-child(1), table.sheet td:nth-child(1) {
    text-align: center;
    width: 39px;
}
table.sheet th:nth-child(2), table.sheet td:nth-child(2) {
    width: 250px;
}
table.sheet th:nth-child(3), table.sheet td:nth-child(3) {
    width: auto;
}
table.sheet th:nth-child(4), table.sheet td:nth-child(4) {
    width: 250px;
}
table.sheet th:nth-child(5) {
    width: 81px;
}
table.sheet td:nth-child(5) {
    width: 65px;
}
table.sheet th, table.sheet td {
    border-bottom:none;
    border: 1px solid #ccc;
    box-sizing: border-box;
    empty-cells: show;
    line-height: 14px;
    padding: 0 0;
    vertical-align: middle;
}
table.sheet tbody tr td {
    min-height:28px;
    vertical-align: middle;
    position: relative;
    background-clip: padding-box;
}
table.sheet tbody tr:first-child td {
    border-top: none;
}
table.sheet tbody tr:last-child td {
    border-bottom: none;
}
table.sheet th {
    text-align: left;
    padding: 7px 5px;
}
table.sheet th, table.sheet tr td:first-child {
    background-color: #eee;
   ...

JavaScript

function resize(el) {
    //e.preventDefault();
    el.style.height = 0;
    el.style.height = el.scrollHeight + 'px';
}

var app = angular.module('myApp', []);

function MyCtrl($scope) {

    // Load up 1000
    var temp = [];
    for (var i = 0; i < 1000; i++) {
        temp.push({
            id: 'Moe',
            friendlyName: 'Curly',
            groupName: 'Larry'
        })
    }
    $scope.data = temp;
}

/////////////
/*
app.directive('editInPlace', function () {
    return {
        restrict: 'E',
        scope: {
            value: '='
        },
        template: '<textarea onkeyup="resize(this)" ></textarea>',
        link: function ($scope, element, attrs) {

            
            // This directive should have a set class so we can style it.
            element.addClass('edit-in-place');
            var $element = element;

            // Initially, we're not editing.
            $scope.editing = false;
            $scope.resize = function(el){
                console.log('resize');
                //el.style.height = 0;
                //el.style.height = el.scrollHeight + 'px';
            }
        }
    };
});
*/