layout.html | searchcode

/views/layout.html

https://bitbucket.org/mpuckett/iostudio-whiteboard
HTML | 191 lines | 169 code | 22 blank | 0 comment | 0 complexity | aaf94895b7c0c09b68ec9f6ec4222910 MD5 | raw file
Possible License(s): Apache-2.0, BSD-3-Clause, MIT

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>iostudio Whiteboard</title>

    <style type="text/css" media="screen">
        * {
            box-sizing: border;
            margin: 0;
            padding: 0;
        }
        html,
        body {
            font-family: Helvetica, sans-serif;
            height: 100%;
            margin: 50px auto 0;
            padding: 20px;
            text-align: center;
            width: 100%;
        }
        #dropzone {
            border:4px dashed red;
        }

        .dragover {
          background-color: orange;  
        }
    </style>

</head>
<body>
    <div id="dashboard">Drag files here.</div>
    <div id="files-list"></div>
    <script src="http://d3js.org/d3.v2.js"></script>
    <svg id="main"></svg>

    <script type="text/javascript">
        var svg = d3.select("#main");
    var line = d3.svg.line()
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1] + 200; })
    .interpolate('cardinal');
    function init(){
        randData = [];
        for (var i = 0; i < 7; i++){
            randData.push([i*50, Math.random() * 100]);
        }
         svg.data([randData])
            .append("svg:path")
            .attr("d", line)
            .attr("fill", "#444")
            .attr("stroke", "#aaa")
            .attr("stroke-width", 7);
        setInterval(refresh, 500);
    }        
              
    function refresh(){
       //var randData = [];
        for (var i = 0; i < 1; i++){
            randData.push([Math.random() * 200, Math.random() * 200]);
        }
        
        svg.data([randData])
            .select("path")
            .transition()
            .duration(500)
            .attr("d", line);
    }
    init();
    </script>



    <script id="template-file" type="text/handlebars">
        <li><a href="{{name}}" download="{{data}}">{{name}} ({{author}} at {{timestamp}})</a></li>
    </script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.5.0-dev/mustache.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js"></script>
    <script>

        var socket = io.connect('http://localhost:8080');

        var AppModel = Backbone.Model.extend({
            initialize: function () {
                this.on('change', function () {
                    appController.trigger('change', {
                        model: this,
                        changes: arguments[1].changes
                    });
                });
            }
        });

        var FileModel = Backbone.Model.extend({
            defaults: {
                'name': 'file.txt',
                'data': 'data:',
                'author': 'New Author',
                'timestamp': 'New Date',
                'location': {
                    'offsetX': 0,
                    'offsetY': 0
                }
            }
        });

        var FilesCollection = Backbone.Collection.extend({
            model: FileModel,
            initialize: function () {
                this.on('add', function (file) {
                    appController.trigger('newFileAdded', file);
                });
            }
        });

        var FilesListView = Backbone.View.extend({
            el: '#files-list',
            //template: (function () { return Handlebars.compile( $('#template-file').html() ) }()),
            template: (function () { return $('#template-file').html() }()),
            initialize: function () {
                this.on('add', this.add);
            },
            render: function (file) {
                console.log(this.template, file);
                return Mustache.render(this.template, file);
            },
            add: function (file) {
                var html = this.render(file);
                console.log(html);
                this.$el.append(html);
            }
        });

        var DashboardView = Backbone.View.extend({
            el: 'body',
            events: {
                'dragover': function () {
                    //this.trigger('stateChange', 'dragover');
                    console.log('dragover');
                },
                'dragleave': function () {
                    //this.trigger('stateChange', 'dragleave');
                    console.log('dragleave');
                },
                'drop': function (e) {
                    e.preventDefault();
                    appController.trigger('newFileDropped', e.originalEvent.dataTransfer.files[0]);
                }
            }
        });

        var AppController = Backbone.View.extend({
            initialize: function () {
                var appModel = new AppModel();
                var dashboardView = new DashboardView();
                var filesCollection = new FilesCollection();
                var filesListView = new FilesListView();

                this.on('newFileDropped', function (file) {
                    var reader = new FileReader();
                    reader.onload = function () {
                        socket.emit('newFile', { name: file.name, timestamp: new Date().getTime(), data: this.result });
                    };
                    reader.readAsDataURL(file);
                });
                this.on('newFileFromServer', function (file) {
                    filesCollection.add(file);
                });
                this.on('newFileAdded', function (file) {
                    filesListView.trigger('add', file.toJSON() );
                });
            }
        });

        appController = new AppController();

        socket.on('_sendFile', function (data) {
            console.log(data);
            appController.trigger('newFileFromServer', data);
        });


    </script>
</body>
</html>