textannotation.html 6.81 KB
Newer Older
daniel cebrian committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
<%! from django.utils.translation import ugettext as _ %>

<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="textHolder">${content_html}</div>
			<div id="sourceCitation">${_('Source:')} ${source}</div>
			<div id="catchDIV">
				<div class="annotationListContainer">${_('You do not have any notes.')}</div>
			</div>
		</div>
	</div>
</div>


<script>
	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 pagination = 100,
		is_staff = !('${user.is_staff}'=='False'),
        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: true,
                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: {
                tokenUrl: location.protocol+'//'+location.host+"/token?course_id="+courseid
            },
            store: {
                // The endpoint of the store on your server.
                prefix: "${annotation_storage}",

                annotationData: {
                    uri: uri,
                    citation: "${source}"
                },

                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:'text',
		    userid:'${user.email}',
                }
            },
            highlightTags:{
                tag: "${tag}",
            }
        },
        optionsVideoJS: {techOrder: ["html5","flash","youtube"]},
        optionsRS: {},
        optionsOVA: {posBigNew:'none'},
        optionsRichText: {
            tinymce:{
                selector: "li.annotator-item textarea",
                plugins: "media image insertdatetime link code",
                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 rubric | code ",
            }
        },
    };
	
daniel cebrian committed
165 166 167

	var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
	tinyMCE.baseURL = "${settings.STATIC_URL}" + "js/vendor/ova";
daniel cebrian committed
168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
	
	//remove old instances
    if (Annotator._instances.length !== 0) {
      $('#textHolder').annotator("destroy");
    }
    delete ova;
    //Load the plugin Video/Text Annotation
    var ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
    
    
    //Catch
    var annotator = ova.annotator,
        catchOptions = {
            media:'text',
            externalLink:false,
            imageUrlRoot:imgURLRoot,
            showMediaSelector: false,
            showPublicPrivate: true,
	    userId:'${user.email}',
            pagination:pagination,//Number of Annotations per load in the pagination,
            flags:is_staff
        },
        Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
</script>