Commit cae427d3de486c17cae6d0cb6c54a2d9bac98990

Add localStorage saving of iframe dimensions for lti plugin.
timApp/modules/lti/js/lti.js
(37 / 17)
  
8989 '<p ng-if="stem" class="stem" >{{stem}}</p>' +
9090
9191 '<iframe ng-if="iframe.src" src="{{::iframe.src}}" class="lti" id="{{::iframe.id}}" name="{{::iframe.name}}" ' +
92 'style="width:{{::iframe_size[0]}}; height: {{::iframe_size[1]}};">' +
92 'style="width:{{::iframe.size[0]}}; height: {{::iframe.size[1]}};">' +
9393 '</iframe>' +
9494
9595 '<div class="lti lti-text">' +
105105 '<pre ng-if="use_js && use_lti" class="lti">Pisteesi tehtävästä: {{grade}}</pre>' +
106106 '</div>' +
107107
108 '<form novalidate ng-show="iframeControls" ng-submit="resizeIframe()" class="lti lti-resizing">' +
108 '<form novalidate ng-show="iframeControls" ng-submit="resizeIframe([iframe_width, iframe_height])" class="lti lti-resizing">' +
109109 '<label for="iframe_width">Leveys:</label>' +
110110 '<input type="text" name="iframe_width" id="iframe_width" ng-model="iframe_width">' +
111111 '<label for="iframe_height">Korkeus:</label>' +
194194 }
195195};
196196
197ltiApp.Controller = function($scope, $http, $transclude, $interval, $sce, $anchorScroll) {
197ltiApp.Controller = function($scope, $http, $transclude, $interval, $sce, $anchorScroll, $window) {
198198"use strict";
199199 // Tätä kutsutaan kerran jokaiselle pluginin esiintymälle.
200200 // Angular kutsuu tätä koska se on sanottu direktiivifunktiossa Controlleriksi.
213213 $scope.muokattu = false;
214214 $scope.result = "";
215215
216 $scope.iframe = { // TODO: use view_url and launch_url params here
216 // <iframe> related attributes and CSS styling
217 $scope.iframe = {
217218 'src': '',
218219 'id': '',
219220 'name': '',
220 'size': '[]'
221 'size': []
221222 };
222 $scope.disableSaving = true;
223 $scope.lastSaved = undefined;
224 $scope.iframeControls = false;
225 $scope.parentId = "";
226 $scope.inactiveText = "";
223 $scope.disableSaving = true; // allow saving?
224 $scope.lastSaved = undefined; // last saved grade value
225 $scope.iframeControls = false; // show <iframe> controls panel
226 $scope.parentId = ""; // parent <div> id
227 $scope.inactiveText = ""; // what text to display if <iframe> is inactive
227228
228229 // whether to display iframe options to user
229230 $scope.resizingButtonsDiv = function() {
230231 return $scope.iframe.src !== '';
231232 };
232233
234 // Toggle hide/show for iframe settings panel
233235 $scope.toggleIframeControls = function() {
234236 $scope.iframeControls = !$scope.iframeControls;
235 $scope.iframe_width = $scope.iframe_size[0] || "";
236 $scope.iframe_height = $scope.iframe_size[1] || "";
237 $scope.iframe.size = $scope.iframe_size || [];
238 var local_iframe_size = $window.localStorage.getItem("local_iframe_size").split(',');
239 // These are the ng-model versions for the settings form (yes, it's hacky)
240 // It will display default values for easier editing.
241 $scope.iframe_width = local_iframe_size[0] || $scope.iframe.size[0] || "";
242 $scope.iframe_height = local_iframe_size[1] || $scope.iframe.size[1] || "";
237243 };
238244
239 $scope.resizeIframe = function() {
240 $scope.iframe_size[0] = $scope.iframe_width;
241 $scope.iframe_size[1] = $scope.iframe_height;
245 // Handle <iframe> resizing via the settings panel
246 $scope.resizeIframe = function(dimensions) {
247 $scope.iframe.size = dimensions || $scope.iframe.size;
242248 var iframeInScope = document.getElementById($scope.iframe.id);
249 // If <iframe> is currently in scope and therefore visible
243250 if (iframeInScope) {
244 iframeInScope.style.width = $scope.iframe_size[0];
245 iframeInScope.style.height = $scope.iframe_size[1];
251 iframeInScope.style.width = $scope.iframe.size[0];
252 iframeInScope.style.height = $scope.iframe.size[1];
246253 }
254 $window.localStorage.setItem("local_iframe_size", $scope.iframe.size);
247255 };
248256
257 // Scroll the user's browser to the location of the active iframe
249258 $scope.goBack = function() {
250259 var active = ltiApp.container.getActiveState();
251260 var active_markup = active.attrs.markup || active;
299299 ltiApp.container.update($scope, 'active');
300300 };
301301
302 // Open Moodle login page in <iframe>
302303 $scope.openLoginPage = function() {
303304 var url = $sce.trustAsResourceUrl('../lti/getlink?page=' + $scope.login_url);
304305 if (!$scope.iframe.src) {
309309 }
310310 };
311311
312 // Handle <iframe> closing
312313 $scope.close = function() {
313314 var is_sure = confirm("Menetät työsi lopettamalla tehtävän. Oletko varma?");
314315 if (is_sure) {
319319 return is_sure;
320320 };
321321
322 // Handle <iframe> "reloading"
322323 $scope.reload = function(url, confirmation) {
323324 url = url || $scope.iframe.src;
324325 if (confirmation === true || confirmation === undefined) {
332332 }
333333 };
334334
335 // Forcibly open $scope's <iframe> (typically called via the ltiApp.container)
335336 $scope.forceOpen = function() {
336337 if (ltiApp.container.forceCloseActive()) {
337338 $scope.run();
338339 }
339340 };
340341
342 // Is $scope's <iframe> inactive?
341343 $scope.isInactive = function() {
342344 if ($scope.state === 'active' || $scope.state === 'default') {
343345 $scope.inactiveText = "";
349349 "Voit sulkea sen ja aloittaa uuden tai palata aiempaan.";
350350 return true;
351351 };
352
353 // Handle localStorage saving of <iframe> dimensions
354 // localStorage doesn't store it as an array (instead as a string), so we use split
355 var local_iframe_size = $window.localStorage.getItem("local_iframe_size").split(',');
356 $scope.iframe.size = local_iframe_size || [];
357 $scope.resizeIframe();
352358
353359 // Register scope with global container object
354360 // Must be done last since we need to use the various $scope methods and variables.