index.html | searchcode

/views/index.html

https://bitbucket.org/mpuckett/iostudio-whiteboard
HTML | 339 lines | 282 code | 45 blank | 12 comment | 0 complexity | dd795700fdc696557d6680ca5a489502 MD5 | raw file
Possible License(s): Apache-2.0, BSD-3-Clause, MIT

<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>Welcome to Foundation</title>

    <!-- Included CSS Files -->
    <link rel="stylesheet" href="/stylesheets/app.css">

    <script src="/scripts/foundation/modernizr.foundation.js"></script>

    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<nav class="top-bar fixed">
    <ul>
        <ul>
            <li class="name"><h1><a href="#">whiteboard!</a></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
        </ul>  
    </ul>
</nav>
    <div class="row">
        <div class="twelve columns">

            <div class="row">
                <div class="three columns">
                    <div class="row">
                        <div class="twelve columns">
                            <h2>Users</h2>
                            <ul id="users-list"></ul>
                            <h2>Files</h2>
                            <ul id="files-list"></ul>
                        </div>
                    </div>    
                </div>
                <div class="nine columns">
                        <video class="th" autoplay="true" id="webcam">
                        </video>
                        <canvas id="webcam-feed"></canvas>
                        <form id="chat">
                            <h2>Chat <a id="request-chat-notifications-permission" class="hide" href="#">(Click for Growl-like Notifications!)</a></h2>
                            <ul id="chat-messages-list"></ul>
                            <div class="chat-box">
                                <input type="text" placeholder="Message Here...">
                            </div>
                        </form>
                </div>
            </div>
        </div>
    </div>
    

    <!--<script src="http://d3js.org/d3.v2.js"></script>
    <svg id="main" draggable="true"></svg>-->




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

    <script id="template-user" type="text/handlebars">
        <li id="user-{{id}}" data-id="{{id}}" class="user {{#self}}self{{/self}}">
        <div class="{{#self}}callout{{/self}}">
            {{#image}}
                <a class="th">
                    <img src="{{image.data}}">
                </a>
            {{/image}}
            <span class="name">{{name}}</span></div>
        </li>

    </script>

    <script id="template-chat-message" type="text/handlebars">
        <li id="message-{{id}}" data-id="{{id}}" class="{{#user.self}}self{{/user.self}}"><img src="{{user.image.data}}"></img><span class="user">{{#user.self}}You{{/user.self}}{{^user.self}}{{user.name}}{{/user.self}}</span> {{#file}}<audio controls="controls"><source src="{{file}}" type="audio/mpeg"></source></audio>{{/file}} <p>{{message}}</p></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>
        $(document).tooltips();
    </script>

    <script>
        Backbone.Controller = Backbone.View;

        Backbone.Collection.prototype.update = function (model, params) {
            var t = this;
            this.where({id:model.id})[0].edit(model, params);
        };

        Backbone.Model.prototype.update = function(model, params){  
            var t = this;
            // update or add all new values
            _.each(model, function (value, attribute) {
                t.set(attribute, value);
            });
            if (!params || (params && !params.soft) ) {
                // if new value is missing, delete old value
                _.each(this.attributes, function (value, attribute) {
                    if (!model[attribute]) {
                        t.unset(attribute);
                    }
                }); 
            }
            this.trigger('update', model);      
        };

        var MediaCaptureView = Backbone.View.extend({
            el: '#webcam',
            elements: {
                feed: $('#webcam-feed').get(0)
            },
            events: {
                'click': function (e) {
                    e.preventDefault();
                    this.trigger('_mediaCaptured', this.takePhoto() );
                }
            },
            takePhoto: function () {
                var canvas = this.elements.feed.getContext('2d');

                var videoWidth = this.$el.get(0).videoWidth;
                var videoHeight = this.$el.get(0).videoHeight;

                $(this.elements.feed).width( videoWidth );
                $(this.elements.feed).height( videoWidth );
                this.elements.feed.setAttribute( 'width', videoWidth );
                this.elements.feed.setAttribute( 'height', videoWidth );

                canvas.drawImage( this.$el.get(0), 0, 0 );

                return this.elements.feed.toDataURL();
            },
            requestCapturePermission: function (callback) {
                var t = this;
                navigator.webkitGetUserMedia({video:true,audio:true}, function (stream) {
                    t.startStream(stream);
                });
            },
            startStream: function (stream) {
                this.$el.get(0).src = window.webkitURL.createObjectURL(stream);
                this.show();
            },
            stopStream: function (stream) {
                this.$el.get(0).src = window.webkitURL.createObjectURL(null);
            },
            show: function () {
                this.$el.addClass('open');
            },
            hide: function () {
                var t = this;
                this.$el.removeClass('open');
                navigator.webkitGetUserMedia({video:true,audio:true}, function (stream) {
                    t.stopStream(stream);
                });
            }
        });

        var MediaController = Backbone.Controller.extend({
            initialize: function () {
                var t = this;
                var mediaCaptureView = this.mediaCaptureView = new MediaCaptureView();

                mediaCaptureView.on('_mediaCaptured', function (media) {   
                    t.trigger('_mediaCaptured', { data: media });
                    mediaCaptureView.hide();
                });

            },
            capture: function () {
                this.mediaCaptureView.requestCapturePermission();
            }
        });

    </script>


    <script>//drawing backbone models/controller/view
        (function ($) {
            var LineModel = Backbone.Model.extend({
                defaults: {
                    // socketID: 'meep',
                    // //lineId: lineCollection.length-1,
                    coordinates: [{'x':null,'y':null}]
                },
                initialize: function(){
                    if (this.get('id')) {

                    }
                }
            });
            var LineCollection = Backbone.Collection.extend({
                model: LineModel
            });
            var LineView = Backbone.View.extend({
                offset: $('#main').offset(),
                el:     "#main",
                events :{
                    'dragstart': function(e){
                        var posX = e.pageX - this.offset.left,
                            posY = e.pageY - this.offset.top - 100,
                            lineModel = new LineModel({coordinates:[{'x':posX,'y':posY}]});
                        lineCollection.add(lineModel);
                        console.log('new line model!', lineModel);
                        console.log('line collection!', lineCollection.length, lineCollection);
                    },
                    'drag': function(e){
                        // var parentOffset = $(e.target).offset();
                        var coordinate = {
                            x : e.pageX - this.offset.left,
                            y : e.pageY - this.offset.top - 100
                        }
                        this.trigger('_newPointsAdded', coordinate);                       
                    }
                },
                renderCollection : function(){
                    var svg = d3.select("#main");
                    //console.log('beep!', lineCollection);
                    
                    _.each(lineCollection.models, function(obj){

                        var d3line2 = d3.svg.line()
                            .x(function(d){return d.x;})
                            .y(function(d){return d.y;})
                            .interpolate("cardinal");

                        svg.append("svg:path")
                            .attr("d", d3line2(obj.attributes.coordinates))
                            .attr("fill", "transparent")
                            .attr("stroke", "#aaa")
                            .attr("stroke-width", 7);
                    });
                },
                renderModel : function(model){
                    var svg = d3.select("#main");

                    var d3line2 = d3.svg.line()
                            .x(function(d){return d.x;})
                            .y(function(d){return d.y;})
                            .interpolate("cardinal");

                        svg.append("svg:path")
                            .attr("d", d3line2(model.attributes.coordinates))
                            .attr("fill", "transparent")
                            .attr("stroke", "#aaa")
                            .attr("stroke-width", 7);
                }
            });
            var LineController = Backbone.View.extend({
                initialize : function(){
                    
                    var lineView = new LineView();
                    var that = this;
       
                    lineView.on('_newPointsAdded', function(newCoordinate){
                        console.log('line collection', lineCollection);
                        var currentLineId = lineCollection.length - 1,
                            currentLine = lineCollection.at(currentLineId),
                            coordinates = currentLine.get('coordinates'),
                            lastCoordinate = _.last(coordinates);
                        
                        if (!that.isWithinThreshold(newCoordinate, lastCoordinate)){
                            coordinates.push({
                                'x': newCoordinate.x, 
                                'y' : newCoordinate.y
                            });
                            currentLine.set('coordinates', coordinates);
                            socket.emit('modelUpdate', currentLine, currentLineId);
                            currentLine.trigger('change:coordinates', currentLine);
                            //console.log('current line', currentLine);
                        }
                    });
                    lineCollection.on('change:coordinates', function(model){                     
                        lineView.renderModel(model);
                    });

                    lineCollection.on('add', function (model) {
                        //socket.emit('newLine', model.toJSON() );
                        //lineView.render();
                    });
                    /*lineCollection.on('change:coordinates', function(model){
                        console.log('change', model.toJSON());
                        socket.emit('newLineCoordinate', model.toJSON());
                        //lineView.render();
                    });*/
                },
                isWithinThreshold : function(newCoordinate, lastCoordinate){
                    var threshold = 2;

                    if ((newCoordinate.x < lastCoordinate.x+threshold && newCoordinate.x > lastCoordinate.x-threshold) || (newCoordinate.y < lastCoordinate.y+threshold && newCoordinate.y > lastCoordinate.y-threshold))
                    {
                        return true;
                    }
                    else{
                        return false;
                    }
                }
            });
            //offset = $('#main').offset();
            lineCollection = new LineCollection();
            var lineController = new LineController();
                
        })(jQuery);

    </script>
    
    <script src="/scripts/drag.js"></script>
    <script src="/scripts/chat.js"></script>
    <script src="/scripts/files.js"></script>
    <script src="/scripts/users.js"></script>
    <script src="/scripts/app.js"></script>
</body>
</html>