angular spreadsheet

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<div class="container">
    <div class="sheet">
        <table>
            <tr>
                <td>select all</td>
                <td col-handler><span class="handler"></span>
                </td>
                <td col-handler><span class="handler"></span>
                </td>
                <td col-handler><span class="handler"></span>
                </td>
                <td col-handler><span class="handler"></span>
                </td>
                <td col-handler><span class="handler"></span>
                </td>
                <td col-handler><span class="handler"></span>
                </td>
            </tr>
            <tr>
                <td row-handler><span class="row-handler">change row height</td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                    <td><input type="text"/></td>
                    <td><input type="text"/></td>
                    <td><input type="text"/></td>
                    <td><input type="text"/></td>
            </tr>  
            <tr>
                <td row-handler><span class="row-handler"></span>
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td row-handler><span class="row-handler"></span>
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>
             ...

CSS

.container {
    background : #ddd;
    padding : 20px;
    font-size : 10px;
}
.sheet {
    display : inline-block;
    background : pink;
}
table {
    border-collapse: collapse;
}
td {
    vertical-align: bottom;
    width : 100px;
    height : 50px;
    border-bottom : solid 1px cadetblue;
    border-right: solid 1px cadetblue;
    padding : 0;
}
td input {
    height : 100%;
    width : 100%;
    border : none;
    display : block;
}
.handler {
    display : inline-block;
    background : blue;
    width : 5px;
    height : 100%;
    float : right;
}
.row-handler {
    background : red;
    height : 5px;
    display : block;
    width : 100%;
}

JavaScript

angular.module('spreadsheet', [])
    .directive('rowHandler', ['$document', function ($document) {

    return {
        link: function (scope, el, attributes) {

            var startY, y, initialHeight;

            el.on('mousedown', function (event) {
                event.preventDefault();
                initialHeight = el[0].offsetHeight;
                startY = event.pageY;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);

            });

            function mousemove() {
                y = event.pageY - startY;

                var cellHeight = initialHeight + y + 'px';
                el.css({
                    height: cellHeight
                });
            }

            function mouseup() {
                $document.off('mousemove', mousemove);
                $document.off('mouseup', mouseup);

            }


        }
    };



}])
    .directive('colHandler', ['$document', function ($document) {

    return {

        link: function (scope, el, attributes) {
            var startX = 0,
                x = 0,
                y = 0,
                initialWidth;

            el.on('mousedown', function (event) {

                event.preventDefault();
                initialWidth = el[0].offsetWidth;
                startX = event.pageX;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
            });

            function mousemove(event) {

                x = event.pageX - startX;

                var cellWidth = initialWidth + x + 'px';
                el.css({
                    width: cellWidth
                });
            }

            function mouseup() {
                $document.off('mousemove', mousemove);
                $document.off('mouseup', mouseup);

            }
        }

    };
}]);



angular.bootstrap(document, ['spreadsheet']);