nodebb-plugin-group-gallery 0.0.3

package/static/js/lib/overview.js

@@ -0,0 +1,15 @@
+"use strict";
+
+(function(GroupGallery) {
+
+	var Overview = {};
+
+	Overview.init = function() {
+		require(['forum/pagination'], function(pagination) {
+			pagination.init(ajaxify.variables.get('currentPage'), ajaxify.variables.get('pageCount'));
+		});
+	};
+
+	GroupGallery.overview = Overview;
+
+})(GroupGallery);

package/static/js/lib/single.js

@@ -0,0 +1,64 @@
+"use strict";
+
+(function(GroupGallery) {
+
+	var Single = {},
+		currentImageId;
+
+	Single.init = function() {
+		var imageId = parseInt(ajaxify.variables.get('image_id'), 10);
+		if (!isNaN(imageId)) {
+			if (currentImageId !== imageId) {
+				GroupGallery.comments.clear();
+				GroupGallery.comments.unbindEvents();
+				unbindEvents();
+			}
+
+			GroupGallery.comments.load(imageId);
+			GroupGallery.comments.bindEvents();
+			currentImageId = imageId;
+
+			bindEvents();
+		}
+	};
+
+	function bindEvents() {
+		var removeImageButton = $('[data-func="group-gallery.remove"]');
+
+		if (parseInt(ajaxify.variables.get('image_uid'), 10) === parseInt(app.user.uid, 10) || app.user.isAdmin) {
+			removeImageButton.removeClass('hidden');
+		} else {
+			removeImageButton.addClass('hidden');
+		}
+
+		removeImageButton.on('click.group-gallery', function(e) {
+			removeImage(currentImageId);
+
+			e.preventDefault();
+			return false;
+		});
+
+		socket.on('event:group-gallery.removeImage', function(imageId) {
+			if (parseInt(imageId, 10) === currentImageId) {
+				ajaxify.go('groups/' + ajaxify.variables.get('group_slug') + '/gallery');
+			}
+		});
+	}
+
+	function unbindEvents() {
+		var	removeImageButton = $('[data-func="group-gallery.remove"]');
+
+		removeImageButton.off('click.group-gallery');
+
+		socket.off('event:group-gallery.removeImage');
+	}
+
+	function removeImage(id) {
+		if (!isNaN(id)) {
+			socket.emit('plugins.group-gallery.removeImage', {imageId: id});
+		}
+	}
+
+	GroupGallery.single = Single;
+
+})(GroupGallery);

package/static/js/lib/uploader.js

@@ -0,0 +1,37 @@
+"use strict";
+
+(function(GroupGallery) {
+
+	var Uploader = {},
+		uploaderModule = null;
+
+	Uploader.open = function() {
+		console.log(GroupGallery.vars);
+		if (GroupGallery.vars.groupName) {
+			if (uploaderModule === null) {
+				loadUploaderModule();
+			} else {
+				if ($.fancybox.current !== null) {
+					$.fancybox.close();
+				}
+
+				var route = '/groups/' + GroupGallery.vars.groupName + '/gallery/upload';
+				bootbox.prompt('Image caption', function(caption) {
+					if (caption !== null) {
+						uploaderModule.open(route, {caption: caption}, null, function(image) {});
+					}
+				});
+			}
+		}
+	};
+
+	function loadUploaderModule() {
+		require(['uploader'], function(module) {
+			uploaderModule = module;
+			Uploader.open();
+		});
+	}
+
+	GroupGallery.uploader = Uploader;
+
+})(GroupGallery);

package/static/js/main.js

@@ -0,0 +1,147 @@
+"use strict";
+
+(function(window) {
+
+	$(window).on('action:ajaxify.end', function(event, data) {
+		var groupName = ajaxify.variables.get('group_name');
+		if (groupName && groupName.length) {
+			GroupGallery.init(utils.slugify(groupName));
+		}
+	});
+
+	var GroupGallery = {};
+
+	GroupGallery.vars = {
+		page: '',
+		groupName: null,
+		groupImages: null,
+		indexLookup: {},
+		idLookup: [],
+		lightboxImages: null,
+		lightboxOptions: {
+			index: 0,
+			tpl: null,
+			mouseWheel: false,
+			helpers: {
+				title: null
+			}
+		}
+	};
+
+	GroupGallery.init = function(groupName, callback) {
+		var self = this;
+
+		function load() {
+			self.vars.page = ajaxify.variables.get('group_gallery_page') || 'group';
+
+			if (self.vars.page === 'group' && !self.vars.lightboxOptions.tpl) {
+				loadTemplate();
+				return;
+			}
+
+			if (groupName !== self.vars.groupName) {
+				self.vars.groupName = groupName;
+
+				if (self.vars.page === 'group' || !self.vars.groupImages) {
+					loadImages();
+					return;
+				}
+			}
+
+			self.bindEvents();
+			self.checkPage();
+
+			if (callback) callback();
+		}
+
+		function loadTemplate() {
+			templates.parse('group-gallery/modal/wrap', {}, function(wrapHtml) {
+				self.vars.lightboxOptions.tpl = {
+					wrap: wrapHtml
+				};
+				load();
+			});
+		}
+
+		function loadImages() {
+			if (!self.vars.groupName) {
+				self.vars.groupImages = [];
+				return;
+			}
+
+			$.ajax({
+				url: '/api/groups/' + self.vars.groupName + '/gallery',
+				success: function(result) {
+					self.addImages(result.images);
+				},
+				error: function() {
+					self.vars.groupImages = [];
+				},
+				complete: function() {
+					load();
+				}
+			});
+		}
+
+		load();
+	};
+
+	GroupGallery.addImages = function(images) {
+		if (!Array.isArray(this.vars.groupImages)) {
+			this.vars.groupImages = [];
+		}
+
+		this.vars.groupImages = this.vars.groupImages.concat(images);
+		this.indexImages();
+	};
+
+	GroupGallery.indexImages = function() {
+		var self = this;
+
+		this.vars.indexLookup = {};
+		this.vars.idLookup = [];
+		this.vars.lightboxImages = this.vars.groupImages.map(function(el, index) {
+			self.vars.indexLookup[el.id] = index;
+			self.vars.idLookup[index] = el.id;
+			return {
+				href: el.url,
+				title: ''
+			};
+		});
+	};
+
+	GroupGallery.bindEvents = function() {
+		var event = 'event:group-gallery.newImage';
+		socket.off(event).on(event, function(image) {
+			// Image is an array of length one
+			GroupGallery.addImages(image);
+			var index = GroupGallery.vars.indexLookup[image[0].id];
+
+			if (GroupGallery.vars.page === 'group') {
+				if (parseInt(image[0].uid, 10) === parseInt(app.user.uid, 10)) {
+					GroupGallery.modal.openOnIndex(index);
+				} else if ($.fancybox.current !== null) {
+					$.fancybox.current.group.push(GroupGallery.vars.lightboxImages[index]);
+				}
+			} else {
+				ajaxify.go('groups/' + GroupGallery.vars.groupName + '/gallery/' + image[0].id);
+			}
+		});
+
+		var clickEvent = 'click.group-gallery';
+		$(document.body)
+			.off(clickEvent, '[data-func="group-gallery.modal.open"]')
+			.off(clickEvent, '[data-func="group-gallery.upload"]')
+			.on(clickEvent, '[data-func="group-gallery.modal.open"]', GroupGallery.modal.open)
+			.on(clickEvent, '[data-func="group-gallery.upload"]', GroupGallery.uploader.open);
+	};
+
+	GroupGallery.checkPage = function() {
+		if (this.vars.page && this.vars.page.length && this[this.vars.page]) {
+			this[this.vars.page].init();
+		}
+	};
+
+	window.GroupGallery = GroupGallery;
+
+})(window);

package/static/less/style.less

@@ -0,0 +1,145 @@
+@imageHeight: 100px;
+
+.group-gallery-widget {
+  margin: 0;
+
+  .col-xs-3 {
+    padding: 5px;
+  }
+}
+
+.group-gallery-widget-image {
+
+}
+
+.group-gallery-image-crop {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  padding-top: 100%;
+  background-position: center;
+  background-size: cover;
+}
+
+.group-gallery-modal {
+  .panel-body {
+    padding: 0px;
+  }
+}
+
+.group-gallery-comment {
+  margin: 5px 0 5px 0;
+  .group-gallery-comment-user {
+    .group-gallery-comment-userimage {
+      width: 20px;
+      height: 20px;
+    }
+
+    .group-gallery-comment-username {
+      font-weight: bold;
+    }
+  }
+}
+
+// Fix for small images
+.fancybox-wrap {
+  min-width: 400px;
+}
+
+// Center images smaller than the modal width
+.fancybox-inner {
+  margin: 0 auto;
+}
+
+//------------ Gallery overview page ------------//
+.group-gallery-overview {
+
+}
+
+.group-gallery-overview-pagination {
+  text-align: center;
+
+  .pagination {
+    margin: 5px 0;
+  }
+}
+
+.group-gallery-overview-item, .group-gallery-single-item {
+  padding: 0 20px;
+  text-align: center;
+
+  & > a {
+    display: block;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+.group-gallery-image-details p {
+  margin: 0;
+}
+
+.group-gallery-image-details-views, .group-gallery-image-details-comments {
+  margin: 0 10px;
+}
+
+//------------ Gallery single page ------------//
+.group-gallery-single {
+
+}
+
+.group-gallery-single .panel-body {
+  padding: 0;
+  position: relative;
+}
+
+.group-gallery-single-left {
+  float: left;
+  height: 100%;
+  width: 25%;
+  border-right: 1px solid @gray-lighter;
+}
+
+.group-gallery-single-left-more {
+  padding: 20px;
+  border-bottom: 1px solid @gray-lighter;
+  text-align: center;
+}
+
+.group-gallery-single-left-thumbs {
+  text-align: center;
+}
+
+.group-gallery-single-thumb {
+  padding: 20px 20px;
+}
+
+.group-gallery-single-left-nav {
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid @gray-lighter;
+}
+
+.group-gallery-single-right {
+  float: right;
+  width: 75%;
+  padding: 50px 100px;
+}
+
+.group-gallery-single-item {
+  padding: 0;
+
+  img {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 60vh;
+  }
+}
+
+.group-gallery-single-buttons {
+  margin: 10px 0;
+}

package/static/templates/group-gallery/comments.tpl

@@ -0,0 +1,15 @@
+<!-- BEGIN comments -->
+<div class="group-gallery-comment" data-comment-id="{comments.id}">
+    <div class="group-gallery-comment-user" data-uid="{comments.user.uid}">
+        <img src="{comments.user.picture}" class="group-gallery-comment-userimage"/>
+        <a href="/user/{comments.user.slug}" class="group-gallery-comment-username">{comments.user.username}</a>
+    </div>
+    <!-- IF comments.isMod -->
+    <div class="pull-right group-gallery-comment-options">
+        <a href="#" class="fa fa-pencil" data-func="group-gallery.comment.edit"></a>
+        <a href="#" class="fa fa-times" data-func="group-gallery.comment.remove"></a>
+    </div>
+    <!-- ENDIF comments.isMod -->
+    <span class="group-gallery-comment-content">{comments.content}</span>
+</div>
+<!-- END comments -->

package/static/templates/group-gallery/gallery.tpl

@@ -0,0 +1,30 @@
+<input type="hidden" template-variable="group_name" value="{group.name}" />
+<input type="hidden" template-variable="group_slug" value="{group.slug}" />
+<input type="hidden" template-variable="group_gallery_page" value="overview" />
+<input type="hidden" template-variable="currentPage" value="{currentPage}" />
+<input type="hidden" template-variable="pageCount" value="{pageCount}" />
+
+<h1>{group.name} - Photo gallery <button data-func="group-gallery.upload" class="btn btn-default pull-right" type="button">Upload</button></h1>
+
+<div class="panel panel-default">
+    <div class="panel-body">
+        <div class="group-gallery-overview-pagination">
+            <!-- IMPORT partials/paginator.tpl -->
+        </div>
+
+        <div class="group-gallery-overview row">
+            <!-- BEGIN images -->
+            <div class="col-sm-3 group-gallery-overview-item">
+                <a href="/groups/{group.slug}/gallery/{images.id}">
+                    <div class="group-gallery-image-crop" style="background-image: url({images.url})"></div>
+                    <h4 class="group-gallery-image-caption">{images.caption}</h4>
+                </a>
+                <div class="group-gallery-image-details">
+                    <p>Uploaded by <a href="/user/{images.author.userslug}" class="group-gallery-image-details-author">{images.author.username}</a></p>
+                    <p><span class="group-gallery-image-details-views">{images.viewcount} Views</span> | <span class="group-gallery-image-details-comments">{images.commentcount} Comments</span></p>
+                </div>
+            </div>
+            <!-- END images -->
+        </div>
+    </div>
+</div>

package/static/templates/group-gallery/modal/wrap.tpl

@@ -0,0 +1,25 @@
+<div class="fancybox-wrap group-gallery-modal" tabIndex="-1">
+    <div class="panel panel-default fancybox-skin">
+        <div class="panel-body">
+            <div class="fancybox-outer">
+                <div class="fancybox-inner">
+
+                </div>
+            </div>
+            <br>
+            <button data-func="group-gallery.remove" class="btn btn-danger hidden" type="button">Remove</button>
+            <button data-func="group-gallery.upload" class="btn btn-default" type="button">Upload</button>
+            <h2>Comments</h2>
+            <div class="input-group">
+                <input id="group-gallery-comment-input" type="text" class="form-control" placeholder="Enter a comment...">
+                <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" data-func="group-gallery.comment">Submit</button>
+                </span>
+            </div>
+            <hr>
+            <div class="group-gallery-comments">
+
+            </div>
+        </div>
+    </div>
+</div>

package/static/templates/group-gallery/single.tpl

@@ -0,0 +1,75 @@
+<input type="hidden" template-variable="group_name" value="{group.name}" />
+<input type="hidden" template-variable="group_slug" value="{group.slug}" />
+<input type="hidden" template-variable="group_gallery_page" value="single" />
+<input type="hidden" template-variable="image_id" value="{image.id}" />
+<input type="hidden" template-variable="image_uid" value="{image.author.uid}" />
+
+<h1>{group.name} - Photo gallery <button data-func="group-gallery.upload" class="btn btn-default pull-right" type="button">Upload</button></h1>
+
+<div class="panel panel-default group-gallery-single">
+    <div class="panel-body">
+        <div class="group-gallery-single-left">
+            <div class="group-gallery-single-left-more">
+                <a href="/groups/{group.slug}/gallery?uid={image.author.uid}">
+                    More from this user
+                </a>
+            </div>
+            <div class="group-gallery-single-left-thumbs">
+                <!-- IF !nextImages.length -->
+                <div class="group-gallery-single-thumb">
+                    No more next images
+                </div>
+                <!-- ENDIF !nextImages.length -->
+                <!-- BEGIN nextImages -->
+                <div class="group-gallery-single-thumb">
+                    <a href="/groups/{group.slug}/gallery/{nextImages.id}">
+                        <div class="group-gallery-image-crop" style="background-image: url({nextImages.url})"></div>
+                        <h4 class="group-gallery-image-caption">{nextImages.caption}</h4>
+                    </a>
+                    <div class="group-gallery-image-details">
+                        <p>Uploaded by <a href="/user/{nextImages.author.userslug}" class="group-gallery-image-details-author">{nextImages.author.username}</a></p>
+                        <p><span class="group-gallery-image-details-views">{nextImages.viewcount} Views</span> | <span class="group-gallery-image-details-comments">{nextImages.commentcount} Comments</span></p>
+                    </div>
+                </div>
+                <!-- END nextImages -->
+            </div>
+            <div class="group-gallery-single-left-nav">
+                <nav>
+                    <ul class="pager">
+                        <!-- IF prevId -->
+                        <li><a href="/groups/{group.slug}/gallery/{prevId}">Previous</a></li>
+                        <!-- ENDIF prevId -->
+                        <!-- IF nextId -->
+                        <li><a href="/groups/{group.slug}/gallery/{nextId}">Next</a></li>
+                        <!-- ENDIF nextId -->
+                    </ul>
+                </nav>
+            </div>
+        </div>
+        <div class="group-gallery-single-right">
+            <div class="group-gallery-single-item">
+                <img src="{image.url}"/>
+                <h4 class="group-gallery-image-caption">{image.caption}</h4>
+                <div class="group-gallery-image-details">
+                    <p>Uploaded by <a href="/user/{image.author.userslug}" class="group-gallery-image-details-author">{image.author.username}</a></p>
+                    <p><span class="group-gallery-image-details-views">{image.viewcount} Views</span> | <span class="group-gallery-image-details-comments">{image.commentcount} Comments</span></p>
+                </div>
+            </div>
+            <div class="group-gallery-single-buttons">
+                <button data-func="group-gallery.remove" class="btn btn-danger hidden" type="button">Remove</button>
+            </div>
+            <hr>
+            <h2>Comments</h2>
+            <div class="input-group">
+                <input id="group-gallery-comment-input" type="text" class="form-control" placeholder="Enter a comment...">
+                <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" data-func="group-gallery.comment">Submit</button>
+                </span>
+            </div>
+            <hr>
+            <div class="group-gallery-comments">
+
+            </div>
+        </div>
+    </div>
+</div>

package/static/templates/group-gallery/widget.tpl

@@ -0,0 +1,18 @@
+<!-- IF images.length -->
+<button data-func="group-gallery.modal.open" class="btn btn-default" type="button">Open</button>
+<!-- ENDIF images.length -->
+<button data-func="group-gallery.upload" class="btn btn-default" type="button">Upload</button>
+<hr>
+<div class="row group-gallery-widget">
+<!-- IF !images.length -->
+There are no images in the gallery yet.
+<!-- ENDIF !images.length -->
+<!-- BEGIN images -->
+    <div class="col-xs-3">
+        <a class="group-gallery-widget-image" href="{images.url}"
+           data-group-gallery-id="{images.id}" data-func="group-gallery.modal.open">
+            <div class="group-gallery-image-crop" style="background-image: url({images.url})"></div>
+        </a>
+    </div>
+<!-- END images -->
+</div>

package/static/vendor/fancybox/jquery.fancybox-thumbs.css

@@ -0,0 +1,55 @@
+#fancybox-thumbs {
+	position: fixed;
+	left: 0;
+	width: 100%;
+	overflow: hidden;
+	z-index: 8050;
+}
+
+#fancybox-thumbs.bottom {
+	bottom: 2px;
+}
+
+#fancybox-thumbs.top {
+	top: 2px;
+}
+
+#fancybox-thumbs ul {
+	position: relative;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#fancybox-thumbs ul li {
+	float: left;
+	padding: 1px;
+	opacity: 0.5;
+}
+
+#fancybox-thumbs ul li.active {
+	opacity: 0.75;
+	padding: 0;
+	border: 1px solid #fff;
+}
+
+#fancybox-thumbs ul li:hover {
+	opacity: 1;
+}
+
+#fancybox-thumbs ul li a {
+	display: block;
+	position: relative;
+	overflow: hidden;
+	border: 1px solid #222;
+	background: #111;
+	outline: none;
+}
+
+#fancybox-thumbs ul li img {
+	display: block;
+	position: relative;
+	border: 0;
+	padding: 0;
+	max-width: none;
+}