Merge pull request #11 from redmatrix/dev

Dev

6 files changed, 172 insertions, 153 deletions

diff --git a/view/js/main.js b/view/js/main.js
index 034a520e7..00c536243 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -23,6 +23,17 @@ var mediaPlaying = false;
 var contentHeightDiff = 0;
 var liveRecurse = 0;
 var savedTitle = '';
+var initialLoad = true;
+
+// Clear the session storage if we switch channel or log out
+var cache_uid = '';
+if(sessionStorage.getItem('uid') !== null) {
+	cache_uid = sessionStorage.getItem('uid');
+}
+if(cache_uid !== localUser.toString()) {
+	sessionStorage.clear();
+	sessionStorage.setItem('uid', localUser.toString());
+}
 
 $.ajaxSetup({cache: false});
 
@@ -54,9 +65,17 @@ $(document).ready(function() {
 
 	updateInit();
 
-	$('a[rel^="#"]').click(function(e){
-		manage_popup_menu(this, e);
-		return;
+	$('a.notification-link').click(function(e){
+		var notifyType = $(this).data('type');
+
+		if (!$(this).data('clicked') && (sessionStorage.getItem(notifyType + '_notifications_cache') !== null)) {
+			var cached_data = JSON.parse(sessionStorage.getItem(notifyType + '_notifications_cache'));
+			loadNotificationItems(notifyType, cached_data);
+			$(this).data('clicked', true);
+		}
+		else {
+			loadNotificationItems(notifyType);
+		}
 	});
 
 	// Allow folks to stop the ajax page updates with the pause/break key
@@ -88,7 +107,9 @@ $(document).ready(function() {
 
 	var e = document.getElementById('content-complete');
 	if(e)
-		pageHasMoreContent = false;	
+		pageHasMoreContent = false;
+
+	initialLoad = false;
 
 });
 
@@ -340,73 +361,108 @@ function markItemRead(itemId) {
 	$('.unseen-wall-indicator-'+itemId).hide();
 }
 
-function manage_popup_menu(w,e) {
-	menu = $( $(w).attr('rel') );
+function notificationsUpdate(cached_data) {
+	var pingCmd = 'ping' + ((localUser != 0) ? '?f=&uid=' + localUser : '');
+
+	if(cached_data !== undefined) {
+		handleNotifications(cached_data);
+	}
+	else {
+		$.get(pingCmd,function(data) {
+
+			// Put the object into storage
+			sessionStorage.setItem('notifications_cache', JSON.stringify(data));
+
+			if(data.invalid == 1) {
+				window.location.href=window.location.href;
+			}
+
+			handleNotifications(data);
 
-	/* notification menus are loaded dynamically 
-	 * - here we find a rel tag to figure out what type of notification to load */
+			$.jGrowl.defaults.closerTemplate = '<div>[ ' + aStr.closeAll + ']</div>';
 
-	var loader_source = $(menu).attr('rel');
+			$(data.notice).each(function() {
+				$.jGrowl(this.message, { sticky: true, theme: 'notice' });
+			});
 
-	if(typeof(loader_source) != 'undefined' && loader_source.length) {	
-		notify_popup_loader(loader_source);
+			$(data.info).each(function(){
+				$.jGrowl(this.message, { sticky: false, theme: 'info', life: 10000 });
+			});
+		});
 	}
+
+	if(timer) clearTimeout(timer);
+	timer = setTimeout(updateInit,updateInterval);
 }
 
-function notificationsUpdate() {
-	var pingCmd = 'ping' + ((localUser != 0) ? '?f=&uid=' + localUser : '');
+function handleNotifications(data) {
+	if(data.network || data.home || data.intros || data.register || data.mail || data.all_events || data.notify || data.files || data.pubs) {
+		$('.notifications-btn').css('opacity', 1);
+		$('#no_notifications').hide();
+	}
+	else {
+		$('.notifications-btn').css('opacity', 0.5);
+		$('#navbar-collapse-1').removeClass('show');
+		$('#no_notifications').show();
+	}
 
-	$.get(pingCmd,function(data) {
+	if(data.home || data.intros || data.register || data.mail || data.notify || data.files) {
+		$('.notifications-btn-icon').removeClass('fa-exclamation-circle');
+		$('.notifications-btn-icon').addClass('fa-exclamation-triangle');
+	}
+	if(!data.home && !data.intros && !data.register && !data.mail && !data.notify && !data.files) {
+		$('.notifications-btn-icon').removeClass('fa-exclamation-triangle');
+		$('.notifications-btn-icon').addClass('fa-exclamation-circle');
+	}
 
-		if(data.invalid == 1) { 
-			window.location.href=window.location.href;
-		}
+	$.each(data, function(index, item) {
+		//do not process those
+		var arr = ['notice', 'info', 'invalid'];
+		if(arr.indexOf(index) !== -1)
+			return;
 
-		if(data.network || data.home || data.intros || data.register || data.mail || data.all_events || data.notify || data.files || data.pubs) {
-			$('.notifications-btn').css('opacity', 1);
-			$('#no_notifications').hide();
-		}
-		else {
-			$('.notifications-btn').css('opacity', 0.5);
-			$('#navbar-collapse-1').removeClass('show');
-			$('#no_notifications').show();
+		if(item == 0) {
+			$('.' + index + '-button').fadeOut();
+		} else {
+			$('.' + index + '-button').fadeIn();
+			$('.' + index + '-update').html(item);
 		}
+	});
+}
 
-		if(data.home || data.intros || data.register || data.mail || data.notify || data.files) {
-			$('.notifications-btn-icon').removeClass('fa-exclamation-circle');
-			$('.notifications-btn-icon').addClass('fa-exclamation-triangle');
-		}
-		if(!data.home && !data.intros && !data.register && !data.mail && !data.notify && !data.files) {
-			$('.notifications-btn-icon').removeClass('fa-exclamation-triangle');
-			$('.notifications-btn-icon').addClass('fa-exclamation-circle');
-		}
+function handleNotificationsItems(notifyType, data) {
 
-		$.each(data, function(index, item) {
-			//do not process those
-			var arr = ['notice', 'info', 'invalid'];
-			if(arr.indexOf(index) !== -1)
-				return;
+	var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
+	var notify_menu = $("#nav-" + notifyType + "-menu");
 
-			if(item == 0) {
-				$('.' + index + '-button').fadeOut();
-			} else {
-				$('.' + index + '-button').fadeIn();
-				$('.' + index + '-update').html(item);
-			}
-		});
+	notify_menu.html('');
 
-		$.jGrowl.defaults.closerTemplate = '<div>[ ' + aStr.closeAll + ']</div>';
+	$(data).each(function() {
+		html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top);
+		notify_menu.append(html);
+	});
 
-		$(data.notice).each(function() {
-			$.jGrowl(this.message, { sticky: true, theme: 'notice' });
-		});
+	$(".dropdown-menu img[data-src], .notification img[data-src]").each(function(i, el){
+		// Replace data-src attribute with src attribute for every image
+		$(el).attr('src', $(el).data("src"));
+		$(el).removeAttr("data-src");
+	});
 
-		$(data.info).each(function(){
-			$.jGrowl(this.message, { sticky: false, theme: 'info', life: 10000 });
-		});
-	})
-	if(timer) clearTimeout(timer);
-	timer = setTimeout(updateInit,updateInterval);
+	if($('#tt-' + notifyType + '-only').hasClass('active'))
+		$('#nav-' + notifyType + '-menu [data-thread_top=false]').hide();
+
+	if($('#cn-' + notifyType + '-input').length) {
+		var filter = $('#cn-' + notifyType + '-input').val().toString().toLowerCase();
+		if(filter) {
+			$('#nav-' + notifyType + '-menu .notification').each(function(i, el){
+				var cn = $(el).data('contact_name').toString().toLowerCase();
+				if(cn.indexOf(filter) === -1)
+					$(el).addClass('d-none');
+				else
+					$(el).removeClass('d-none');
+			});
+		}
+	}
 }
 
 function contextualHelp() {
@@ -671,6 +727,11 @@ function updateInit() {
 	// if($('#live-cards').length)      { src = 'cards'; }
 	// if($('#live-articles').length)   { src = 'articles'; }
 
+	if (initialLoad && (sessionStorage.getItem('notifications_cache') !== null)) {
+		var cached_data = JSON.parse(sessionStorage.getItem('notifications_cache'));
+		notificationsUpdate(cached_data);
+	}
+
 	if(! src) {
 		notificationsUpdate();
 	}
@@ -700,6 +761,9 @@ function liveUpdate(notify_id) {
 		return;
 	}
 
+	if(timer)
+		clearTimeout(timer);
+
 	if(livetime !== null)
 		livetime = null;
 
@@ -860,56 +924,31 @@ function justifyPhotosAjax(id) {
 	$('#' + id).justifiedGallery('norewind').on('jg.complete', function(e){ justifiedGalleryActive = false; });
 }
 
-function notify_popup_loader(notifyType) {
+function loadNotificationItems(notifyType, cached_data) {
 
-	var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
-	var notify_menu = $("#nav-" + notifyType + "-menu");
 	var pingExCmd = 'ping/' + notifyType + ((localUser != 0) ? '?f=&uid=' + localUser : '');
 
-	$.get(pingExCmd, function(data) {
-
-		if(data.invalid == 1) { 
-			window.location.href=window.location.href;
-		}
-
-		//$("#navbar-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only + notifications_cn_only);
-		//$("#nav-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only + notifications_cn_only);
-
-		$("." + notifyType + "-update").html(data.notify.length);
+	if(cached_data !== undefined) {
+		handleNotificationsItems(notifyType, cached_data);
+	}
+	else {
+		$.get(pingExCmd, function(data) {
+			if(data.invalid == 1) {
+				window.location.href=window.location.href;
+			}
 
-		notify_menu.html('');
+			$("." + notifyType + "-update").html(data.notify.length);
 
-		$(data.notify).each(function() {
-			html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top);
-			notify_menu.append(html);
-		});
+			sessionStorage.setItem(notifyType + '_notifications_cache', JSON.stringify(data.notify));
 
-		$(".dropdown-menu img[data-src], .notification img[data-src]").each(function(i, el){
-			// Replace data-src attribute with src attribute for every image
-			$(el).attr('src', $(el).data("src"));
-			$(el).removeAttr("data-src");
+			handleNotificationsItems(notifyType, data.notify);
 		});
-
-		if($('#tt-' + notifyType + '-only').hasClass('active'))
-			$('#nav-' + notifyType + '-menu [data-thread_top=false]').hide();
-
-		var filter = $('#cn-' + notifyType + '-input').val().toString().toLowerCase();
-		if(filter) {
-			$('#nav-' + notifyType + '-menu .notification').each(function(i, el){
-				var cn = $(el).data('contact_name').toString().toLowerCase();
-				if(cn.indexOf(filter) === -1)
-					$(el).addClass('d-none');
-				else
-					$(el).removeClass('d-none');
-			});
-		}
-	});
-
+	}
 
 	setTimeout(function() {
 		if($('#nav-' + notifyType + '-sub').hasClass('show')) {
 			console.log('updating ' + notifyType + ' notifications...');
-			setTimeout(notify_popup_loader, updateInterval, notifyType);
+			setTimeout(loadNotificationItems, updateInterval, notifyType);
 		}
 	}, 1000);
 }
diff --git a/view/tpl/cropbody.tpl b/view/tpl/cropbody.tpl
index 01d9a24a0..d35546ec6 100755
--- a/view/tpl/cropbody.tpl
+++ b/view/tpl/cropbody.tpl
@@ -6,36 +6,27 @@
 <img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
 </div>
 <div id="cropimage-preview-wrapper" >
-<div id="previewWrap" ></div>
+<div id="previewWrap" class="crop-preview" style="height: 300px; width: 300px; max-width: 300px; max-height: 300px; overflow: hidden;"></div>
 </div>
 
 <script type="text/javascript" language="javascript">
 
-	function onEndCrop( coords, dimensions ) {
-		$( 'x1' ).value = coords.x1;
-		$( 'y1' ).value = coords.y1;
-		$( 'x2' ).value = coords.x2;
-		$( 'y2' ).value = coords.y2;
-		$( 'width' ).value = dimensions.width;
-		$( 'height' ).value = dimensions.height;
-	}
-
-	Event.observe( window, 'load', function() {
-		new Cropper.ImgWithPreview(
-		'croppa',
-		{
-			previewWrap: 'previewWrap',
-			minWidth: 300,
-			minHeight: 300,
-			maxWidth: 1024,
-			maxHeight: 1024,
-			ratioDim: { x: 100, y:100 },
-			displayOnInit: true,
-			onEndCrop: onEndCrop
-		}
-		);
-	}
-	);
+
+var image = document.getElementById('croppa');
+var cropper = new Cropper(image, {
+  aspectRatio: 1 / 1,
+  viewMode: 1,
+  preview: '.crop-preview',
+  crop: function(e) {
+		$( 'x1' ).value = e.detail.x;
+		$( 'y1' ).value = e.detail.y;
+		$( 'x2' ).value = e.detail.x + e.detail.width;
+		$( 'y2' ).value = e.detail.y + e.detail.height;
+		$( 'width' ).value = e.detail.scaleX;
+		$( 'height' ).value = e.detail.scaleY;
+
+  }
+});
 
 </script>
 
diff --git a/view/tpl/cropcover.tpl b/view/tpl/cropcover.tpl
index 04b96a603..8888a967a 100755
--- a/view/tpl/cropcover.tpl
+++ b/view/tpl/cropcover.tpl
@@ -6,36 +6,26 @@
 <img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
 </div>
 <div id="cropimage-preview-wrapper" >
-<div id="previewWrap" ></div>
+<div id="previewWrap" class="crop-preview" style="width: 320px; height: 116px; max-width: 320px; max-height: 116px; overflow: hidden"></div>
 </div>
 
 <script type="text/javascript" language="javascript">
 
-	function onEndCrop( coords, dimensions ) {
-		$( 'x1' ).value = coords.x1;
-		$( 'y1' ).value = coords.y1;
-		$( 'x2' ).value = coords.x2;
-		$( 'y2' ).value = coords.y2;
-		$( 'width' ).value = dimensions.width;
-		$( 'height' ).value = dimensions.height;
-	}
-
-	Event.observe( window, 'load', function() {
-		new Cropper.ImgWithPreview(
-		'croppa',
-		{
-			previewWrap: 'previewWrap',
-			minWidth: 240,
-			minHeight: 87,
-			maxWidth: 320,
-			maxHeight: 116,
-			ratioDim: { x: 100, y:36 },
-			displayOnInit: true,
-			onEndCrop: onEndCrop
-		}
-		);
-	}
-	);
+var image = document.getElementById('croppa');
+var cropper = new Cropper(image, {
+  aspectRatio: 2.75 / 1,
+  viewMode: 1,
+  preview: '.crop-preview',
+  crop: function(e) {
+	$( 'x1' ).value = e.detail.x;
+	$( 'y1' ).value = e.detail.y;
+	$( 'x2' ).value = e.detail.x + e.detail.width;
+	$( 'y2' ).value = e.detail.y + e.detail.height;
+	$( 'width' ).value = e.detail.scaleX;
+	$( 'height' ).value = e.detail.scaleY;
+
+  }
+});
 
 </script>
 
diff --git a/view/tpl/crophead.tpl b/view/tpl/crophead.tpl
index 48f375426..a5a80c187 100755
--- a/view/tpl/crophead.tpl
+++ b/view/tpl/crophead.tpl
@@ -1,4 +1,3 @@
-      <script type="text/javascript" src="library/cropper/lib/prototype.js" language="javascript"></script>
-      <script type="text/javascript" src="library/cropper/lib/scriptaculous.js?load=effects,builder,dragdrop" language="javascript"></script>
-      <script type="text/javascript" src="library/cropper/cropper.js" language="javascript"></script>
-      <link rel="stylesheet" href="library/cropper/cropper.css" type="text/css" />
+<script type="text/javascript" src="library/cropperjs/dist/cropper.js" language="javascript"></script>
+<link rel="stylesheet" href="library/cropperjs/dist/cropper.css" type="text/css" />
+
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 6b3f4b15b..fd5c0dbc0 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -125,7 +125,7 @@
 		</div>
 		{{foreach $notifications as $notification}}
 		<div class="collapse {{$notification.type}}-button">
-			<a class="list-group-item" href="#nav-{{$notification.type}}-sub" title="{{$notification.title}}" data-toggle="collapse" data-parent="#notifications" rel="#nav-{{$notification.type}}-menu">
+			<a class="list-group-item notification-link" href="#nav-{{$notification.type}}-sub" title="{{$notification.title}}" data-toggle="collapse" data-parent="#notifications" data-type="{{$notification.type}}">
 				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
 				<span class="float-right badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
@@ -149,7 +149,7 @@
 					<div id="cn-{{$notification.type}}-input-clear" class="text-muted notifications-textinput-clear d-none"><i class="fa fa-times"></i></div>
 				</div>
 				{{/if}}
-				<div id="nav-{{$notification.type}}-menu" class="" rel="{{$notification.type}}">
+				<div id="nav-{{$notification.type}}-menu" class="">
 					{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 				</div>
 			</div>
diff --git a/view/tpl/settings_permcats.tpl b/view/tpl/settings_permcats.tpl
index f6bb9b036..bbbd41669 100644
--- a/view/tpl/settings_permcats.tpl
+++ b/view/tpl/settings_permcats.tpl
@@ -50,7 +50,7 @@
 			<table id="permcat-index">
 			{{foreach $permcats as $k => $v}}
 			<tr class="permcat-row-{{$k}}">
-				<td width="99%"><a href="settings/permcats/{{$k}}">{{$k}}</a></td>
+				<td width="99%"><a href="settings/permcats/{{$k}}">{{$v}}</a></td>
 				<td width="1%"><i class="fa fa-trash-o drop-icons" onClick="dropItem('/settings/permcats/{{$k}}/drop', '.permcat-row-{{$k}}')"></i></td>
 			</tr>
 			{{/foreach}}