imageannotation.html

<%! from django.utils.translation import ugettext as _ %>

<style type="text/css">
    .openseadragon1{
        width: 100%;
        height: 600px;
        cursor: all-scroll;
    }
</style>

<div class="annotatable-wrapper">
    <div class="annotatable-header">
        % if display_name is not UNDEFINED and display_name is not None:
            <div class="annotatable-title">${display_name}</div>
        % endif
    </div>
    % if instructions_html is not UNDEFINED and instructions_html is not None:
    <div class="annotatable-section shaded">
        <div class="annotatable-section-title">
            ${_('Instructions')}
            <a class="annotatable-toggle annotatable-toggle-instructions expanded" href="javascript:void(0)">${_('Collapse Instructions')}</a>
        </div>
        <div class="annotatable-section-body annotatable-instructions">
            ${instructions_html}
        </div>
    </div>
    % endif
    <div class="annotatable-section">
        <div class="annotatable-content">
            <div id="imageHolder" class="openseadragon1"> 
                <%namespace name='static' file='/static_content.html'/>
                ${static.css(group='style-vendor-tinymce-content', raw=True)}
                ${static.css(group='style-vendor-tinymce-skin', raw=True)}
                ${static.css(group='style-xmodule-annotations', raw=True)}
            </div> 
            <div id="catchDIV">
                <div class="annotationListContainer">${_('Note: only instructors may annotate.')}</div>
            </div>
        </div>
    </div>
</div>

<script>
// TODO: Fix indentation in the following block
(function (require) {
    var init = function() {
    function onClickHideInstructions(){
        //Reset function if there is more than one event handler
        $(this).off();
        $(this).on('click',onClickHideInstructions);
        var hide = $(this).html()=='Collapse Instructions'?true:false,
            cls, txt,slideMethod;
        txt = (hide ? 'Expand' : 'Collapse') + ' Instructions';
        cls = (hide ? ['expanded', 'collapsed'] : ['collapsed', 'expanded']);
        slideMethod = (hide ? 'slideUp' : 'slideDown');
        $(this).text(txt).removeClass(cls[0]).addClass(cls[1]);
        $(this).parents('.annotatable-section:first').find('.annotatable-instructions')[slideMethod]();
    }
    $('.annotatable-toggle-instructions').on('click', onClickHideInstructions);
    
    //Grab uri of the course
    var parts = window.location.href.split("/"), 
        uri = '',
    courseid;
    for (var index = 0; index <= 9; index += 1) uri += parts[index]+"/"; //Get the unit url
    courseid = parts[4] + "/" + parts[5] + "/" + parts[6];
    //Change uri in cms
    var lms_location = $('.sidebar .preview-button').attr('href');
    if (typeof lms_location!='undefined'){
        courseid = parts[4].split(".").join("/");
        uri = window.location.protocol;
        for (var index = 0; index <= 9; index += 1) uri += lms_location.split("/")[index]+"/"; //Get the unit url
    }
    var unit_id = $('#sequence-list').find('.active').attr("data-element");
        uri += unit_id;
    var pagination = 100,
     is_staff = '${is_course_staff}' === 'True',
        options = {
        optionsAnnotator: {
            permissions:{
                user: {
                    id:"${user.email}", 
                    name:"${user.username}"
                },
                userString: function (user) {
                    if (user && user.name) 
                        return user.name;
                    return user;
                },
                userId: function (user) {
                    if (user && user.id) 
                        return user.id;
                    return user;
                },
                permissions: {
                        'read':   [],
                        'update': ["${user.email}"],
                        'delete': ["${user.email}"],
                        'admin':  ["${user.email}"]
                },
                showViewPermissionsCheckbox: false,
                showEditPermissionsCheckbox: false,
                userAuthorize: function(action, annotation, user) {
                    var token, tokens, _i, _len;
                    if (annotation.permissions) {
                      tokens = annotation.permissions[action] || [];
                      if (is_staff){
                          return true;
                      }
                      if (tokens.length === 0) {
                        return true;
                      }
                      for (_i = 0, _len = tokens.length; _i < _len; _i++) {
                        token = tokens[_i];
                        
                        if (this.userId(user) === token) {

                          return true;
                        }
                      }

                      return false;
                    } else if (annotation.user) {
                      if (user) {
                        return this.userId(user) === this.userId(annotation.user);
                      } else {
                        return false;
                      }
                    }
                    return true;
                  },
            },
            auth: {
                token: "${token}"
            },
            store: {
                // The endpoint of the store on your server.
                prefix: "${annotation_storage}",

                annotationData: {
                    uri: uri,
                },

                urls: {
                    // These are the default URLs.
                    create:  '/create',
                    read:    '/read/:id',
                    update:  '/update/:id',
                    destroy: '/delete/:id',
                    search:  '/search'
                },

                loadFromSearch:{
                    limit:pagination,
                    offset:0,
                    uri:uri,
                    media:'image',
                    userid:'${user.email}',
                }
            },
            highlightTags:{
                tag: "${tag}",
            },
            richText: {
                tinymce:{
                    selector: "li.annotator-item textarea",
                    plugins: "image link codemirror media",
                    menubar: false,
                    toolbar_items_size: 'small',
                    extended_valid_elements : "iframe[src|frameborder|style|scrolling|class|width|height|name|align|id]",
                    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | code ",
                    resize: "both",
                }
            },
        },
        optionsOpenSeadragon:{
            id:                 "imageHolder",
            annotation_mode: "${annotation_mode}",
            flags: is_staff,
            prefixUrl:           "${settings.STATIC_URL}" + "js/vendor/ova/images/",
            ${openseadragonjson}
        },
        optionsOSDA:{},

    };
    var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
    var osda, annotator, catchOptions, Catch;
    var startosda = function() {
        //remove old instances
        if (Annotator._instances.length !== 0) {
          $('#imageHolder').annotator("destroy");
        }
        delete osda;
        //Load the plugin Image/Text Annotation
        osda = new OpenSeadragonAnnotation($('#imageHolder'),options);

        // TODO: Fix to avoid using global scope!
        window.options = options;
        window.osda = osda;
        // END TODO

        var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
            '${instructor_email}':
            '${user.email}';

        //Catch
        annotator = osda.annotator;
        catchOptions = {
            media:'image',
            externalLink:false,
            imageUrlRoot:imgURLRoot,
            showMediaSelector: false,
            showPublicPrivate: true,
            userId:userId,
            pagination:pagination,//Number of Annotations per load in the pagination,
            flags:is_staff,
            default_tab: "${default_tab}",
            instructor_email: "${instructor_email}",
            annotation_mode: "${annotation_mode}",
        };

        // if annotations are opened to everyone (2) or if they want to create no annotations (1 with no instructor)
        // then the table at the bottom of the source should be displayed
        if ("${annotation_mode}" == "everyone" || ("${annotation_mode}" == "instructor" && "${instructor_email}" != "")) {
            Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
            // TODO: Fix to avoid using global scope!
            window.Catch = Catch;
            // END TODO
        }

        // if it is in instructor mode only (1), the annotator should be destroyed for all except the instructor
        if ("${annotation_mode}" == "instructor" && "${instructor_email}" == "" && !is_staff)
            osda.annotator.destroy();
    }

    startosda();
    };
    try {
        require(["osda"], init);
    } catch(error) {
        console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
    }
}).call(this, require || RequireJS.require);
</script>