Source

ekkli-maps / templates / map.html

Full commit
{% extends 'admin/base_site.html' %}
{% load i18n %}
{% block title %}{% trans "Ekkli Maps" %}{% endblock %}

{% block content %}
    <script src="/static/js/libs/jquery.min.js"></script>
    <!-- Templates -->
    <link href="/static/css/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <script src="/static/js/libs/jquery-ui.min.js"></script>


    <script type="text/template" id="user-template">
        <div class="user_avatar">
            <img src="/user_picture/<%= user_id %>/" width="60px" height="90px">
            <br/>
            <span class="username_label"><%= username %></span>
        </div>
    </script>



<!-- The hangout API JavaScript. Always include this first -->
{#<script src="//hangoutsapi.talkgadget.google.com/hangouts/api/hangout.js?v=0.1"></script>#}
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
{% if user.is_authenticated %}
    <script>

        var channel = new goog.appengine.Channel('{{ request.token }}');
        var socket = channel.open();
        onOpened = function() {
            var connected = true;
            var payload = {'type':'join','pathname':location.pathname};
            $.ajax({
                type: "POST",
                url:'{% url client_connected %}',
                data: payload,
                dataType:'json',
                success:function(data){
                    json = data;
                    if(data.resultStatus == 'OK'){
                    }
                    else{
                        $('#error_msg').html(data.localMessage);
                    }

                }
            });
        };
        socket.onopen = onOpened;

        onError = function(error) {
            console.log(error);
        };
        socket.onerror = onError;
        onClose = function() {
            alert('closed');
        };
        socket.onclose = onClose;
        onMessage = function(m) {
            var entity = JSON.parse(m.data);

            switch (entity["entity_type"]) {
                case "map":
                    if (entity["method"] == "delete") {
                    {% if not is_initiator %}
                        alert("The map creator has decided to delete this map, sorry. You'll be now redirected to the dashboard.");
                    {% endif %}
                        document.location = "/";
                    }
                    if (entity["method"] == "update") {
                        window.map.set({title: entity["title"]});
                    }
                    break;
                case "story":
                    try {
                        var story = window.stories.get(entity.id);
                        if (story) {
                            if (entity["method"] == "delete") {
                                window.stories.remove(story);
                                story.destroy();
                            }
                            else {
                                story.set(entity);
                            }
                        }
                        else if (entity["method"] != "delete") {
//                            if (!window.stories.getByCid(entity["cid"])) {
                                window.stories.add(entity);
//                            }
                        }
                    } catch (e) {
                        console.log(e);
                    }
                    break;
                case "answer":
                    try {
                        if (!window.answers.search_by("text", entity.text))
                            window.answers.add(entity);
                    } catch (e) {
                        console.log(e);
                    }
                    break;
                case "check_online_users":
                    window.online_users.poll();
                    break;
            }

        };
        socket.onmessage = onMessage;

    </script>
{% endif %}


<!-- The JavaScript for this app. This must always be a full URL not a
     relative path.
     Tip: You can load it from a local web server such as
     http://localhost/app.js for faster single user development -->

<link href="/static/css/ekkli-maps.css" media="all" rel="stylesheet" type="text/css"/>
{#<script src="/static/js/libs/json2.js"></script>#}
<script src="/static/js/libs/underscore.js"></script>
<script src="/static/js/libs/backbone.js"></script>

<script src="/static/js/mylibs/utils.js"></script>
<script src="/static/js/mylibs/maps-models.js"></script>
<script src="/static/js/mylibs/maps-widgets.js"></script>
<script src="/static/js/mylibs/maps-controller-channelapi.js"></script>
<script src="/static/js/mylibs/maps-rendering.js"></script>

<script type="text/javascript">
$(document).ready( function() {
    var options = {
        map_id: {{ map.id }}
    };
    init(options);
    window.user_id = {{ request.user.id }};

    $("#rename_map_link").click(rename_map);
    $("#delete_map_link").click(delete_map);
});

var svg_zoom_in_func,
    svg_zoom_out_func;

function register_zoom_functions(zoom_in_func, zoom_out_func) {
    svg_zoom_in_func = zoom_in_func;
    svg_zoom_out_func = zoom_out_func;
}
function zoom_in() {
    if (typeof(svg_zoom_in_func) == "function") {
        var el = $("#mapsvg");
        var offset = el.offset();
        //var x = offset.left + el.width()/2,
        //    y = offset.top + el.height()/2;
        var x = el.width()/2,
            y = el.height()/2;
        console.log("(" + x + "," + y + ")");
        svg_zoom_in_func(x, y);
    }
}
function zoom_out() {
    if (typeof(svg_zoom_out_func) == "function") {
        var el = $("#mapsvg");
        var offset = el.offset();
        //var x = offset.left + el.width()/2,
        //    y = offset.top + el.height()/2;
        var x = el.width()/2,
            y = el.height()/2;
        console.log("(" + x + "," + y + ")");
        svg_zoom_out_func(x, y);
    }
}

function invite_participants() {
    var email = prompt("{% trans "Enter email address" %}:");
    if (email) {
        $.ajax({
            url: "/invite/{{ map_id }}",
            type:"POST",
            data: { email: email },
            success: function() {
                alert("{% trans "Invited" %} " + email + " {% trans "to the map" %}");
            }
        })
    }
}

function rename_map() {
    var current_name = window.map.get("title");
    var new_name = prompt("{% trans "Enter a new name" %}", current_name);
    if (new_name != "" && new_name != current_name) {
        window.map.set({title: new_name});
        window.map.save();
    }
}

function delete_map() {
    if (confirm("{% trans "Are you sure you want to delete this map?" %}")) {
        window.map.destroy();
    }
}


function extract_story_data_from_dialog() {
    var new_story_data = {title:"Untitled"};
    if ($("#id_title").val()) new_story_data["title"] = $("#id_title").val();
    if ($("#id_story_type").val()) new_story_data["story_type"] = $("#id_story_type").val();
    if ($("#id_content").val()) new_story_data["content"] = $("#id_content").val();
    if ($("#id_image_url").val()) new_story_data["image_url"] = $("#id_image_url").val();
    if ($("#id_schedule_date").val()) new_story_data["schedule_date"] = $("#id_schedule_date").val();
    return new_story_data;
}

function open_story_dialog(story_id) {
    var url = "/map/{{ map.id }}/story/",
//    var url = "/upload/?model_name=Story",
        title = "{% trans "Add Story" %}",
        buttons = {
            "OK": function() {
                var new_story_data = extract_story_data_from_dialog();
                var story = new window.Story();
                story.set(new_story_data);
                story.save();
                $( this ).dialog( "close" );
            }
        };

    if (story_id) {
//        url += "&model_id=" + story_id;
        url += story_id + "/";
        title = "{% trans "Edit Story" %}";
        buttons["OK"] = function() {
            var new_story_data = extract_story_data_from_dialog();
            var old_story = window.stories.get(story_id);
            var story = new window.Story({id: story_id, is_approved: old_story.get("is_approved"), ordinal: old_story.get("ordinal")});
            story.set(new_story_data);
            story.save();
            $( this ).dialog( "close" );
        };
        buttons["Delete"] = function() {
            var story = window.stories.get(story_id);
            if (confirm("Are you sure you want to delete: " + story.get("title") + "?")) {
                if (confirm("The topic and all of its contents will be forever gone (there's no Undo), continue with Delete?")) {
                    window.stories.remove(story);
                    story.destroy();
                    $( this ).dialog( "close" );
                }
            }
        }
    }
    $("#dialog").load(url).dialog({
        modal:true,
        width:680,
        position: 'top',
        title: title,
        closeOnEscape: true,
        buttons: buttons,
        close: function() {
            // handle close
        }
    });
}

function open_opinion_dialog(story_id, opinion_id) {
{#    var url = "/map/{{ map.id }}/story/",#}
{#//    var url = "/upload/?model_name=Story",#}
{#            title = "{% trans "Add Story" %}",#}
{#            buttons = {#}
{#                "OK": function() {#}
{#                    var new_story_data = extract_story_data_from_dialog();#}
{#                    var story = new window.Story();#}
{#                    story.set(new_story_data);#}
{#                    story.save();#}
{#                    $( this ).dialog( "close" );#}
{#                }#}
{#            };#}
{##}
{#    if (story_id) {#}
{#//        url += "&model_id=" + story_id;#}
{#        url += story_id + "/";#}
{#        title = "{% trans "Edit Story" %}";#}
{#        buttons["OK"] = function() {#}
{#            var new_story_data = extract_story_data_from_dialog();#}
{#            var old_story = window.stories.get(story_id);#}
{#            var story = new window.Story({id: story_id, is_approved: old_story.get("is_approved"), ordinal: old_story.get("ordinal")});#}
{#            story.set(new_story_data);#}
{#            story.save();#}
{#            $( this ).dialog( "close" );#}
{#        };#}
{#        buttons["Delete"] = function() {#}
{#            var story = window.stories.get(story_id);#}
{#            if (confirm("Are you sure you want to delete: " + story.get("title") + "?")) {#}
{#                if (confirm("The topic and all of its contents will be forever gone (there's no Undo), continue with Delete?")) {#}
{#                    window.stories.remove(story);#}
{#                    story.destroy();#}
{#                    $( this ).dialog( "close" );#}
{#                }#}
{#            }#}
{#        }#}
{#    }#}
{#    $("#dialog").load(url).dialog({#}
{#        modal:true,#}
{#        width:600,#}
{#        title: title,#}
{#        closeOnEscape: true,#}
{#        buttons: buttons,#}
{#        close: function() {#}
{#            // handle close#}
{#        }#}
{#    });#}
}

</script>

<div style="padding: 0 10px; border-right: 1px solid #EEE">


    <div id="mapapp" style="float: left">


        <div class="content">

            <div id="mapdetails" style="float: left;">
                <div id="zoom-buttons" style="position:absolute; top: 120px; left: 50px; background-color: white;">
                    <img src="/static/img/magnifier_zoom_in.png" id="zoom_in_btn" alt="+" onclick="zoom_in()"/>
                    <br/>
                    <img src="/static/img/magnifier_zoom_out.png" id="zoom_out_btn" alt="-" onclick="zoom_out()"/>
                </div>
                <embed id="mapsvg" src="/static/svg/map-template.svg" width="1000" height="500"></embed>

            </div>

<!--
            <input id="show_story_list_button" type="button" value="+" style="font-size: 22px">
            <div id="story-list-container" style="display: none;">
                <div id="create-story">
                    <input id="new-story" placeholder="Enter a title to start a new story" type="text"/>
                    <span class="ui-tooltip-top" style="display:none;">Press Enter to save this item</span>
                </div>

                <div id="stories-list-widget">
                    <ul id="story-list"></ul>
                </div>

                <div id="map-stats"></div>
            </div>
-->
        </div>
        <div style="align: right; font-size: 10px"><strong style="color: #3387a2">Double-click</strong> to edit or delete | <strong style="color: #3387a2">Scroll with 2 fingers or mouse-wheel</strong> to zoom | <strong style="color: #3387a2">Drag the map</strong> to move around</div>
    </div>


    <div id="online_users_bar">
        <div id="online_users_list"></div>
    </div>

    <p>
        <input type="button" value="{% trans "Invite more..." %}" onclick="invite_participants()"/>
    </p>

</div>

<div id="dialog">
</div>

{% endblock %}