structr.js.images.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of structr-ui Show documentation
Structr is an open source framework based on the popular Neo4j graph database.
The newest version!
/*
 * Copyright (C) 2010-2016 Structr GmbH
 *
 * This file is part of Structr .
 *
 * Structr is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * Structr is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Structr.  If not, see .
 */
var images, folders, drop;
var fileList;
var chunkSize = 1024 * 64;
var sizeLimit = 1024 * 1024 * 1024;
var win = $(window);
var timeout, attempts = 0, maxRetry = 10;

$(document).ready(function() {
	Structr.registerModule('images', _Images);
	//    Structr.classes.push('folder');
	Structr.classes.push('image');

});

var _Images = {
	icon: 'icon/page_white.png',
	add_file_icon: 'icon/page_white_add.png',
	delete_file_icon: 'icon/page_white_delete.png',
	//    add_folder_icon : 'icon/folder_add.png',
	//    folder_icon : 'icon/folder.png',
	//    delete_folder_icon : 'icon/folder_delete.png',
	download_icon: 'icon/basket_put.png',
	init: function() {
		_Pager.initPager('images', 'Image', 1, 100, 'name', 'asc');
		Structr.makePagesMenuDroppable();
	},
	resize: function() {

		Structr.resize();

		var windowWidth = win.width();
		var windowHeight = win.height();
		var headerOffsetHeight = 82;

		var fw = 0;

		if (folders && folders.length) {
			fw = Math.max(180, Math.min(windowWidth / 2, 360));
			folders.css({
				width: fw + 'px',
				height: windowHeight - headerOffsetHeight + 'px'
			});
		}

		if (images && images.length) {
			images.css({
				width: Math.max(400, (windowWidth - fw - 36)) + 'px',
				height: windowHeight - headerOffsetHeight + 'px'
			});
		}

	},
	/**
	 * The onload method is called whenever this module is activated
	 */
	onload: function() {

		_Images.init();

		$('#main-help a').attr('href', 'http://docs.structr.org/frontend-user-guide#Images');

		main.append('');
		images = $('#images');

//		// clear files and folders
//		if (files)
//			files.length = 0;
//		if (folders)
//			folders.length = 0;

		_Images.refreshImages();

		win.off('resize');
		win.resize(function() {
			_Images.resize();
		});

		Structr.unblockMenu(200);

	},
	unload: function() {
		$(main.children('#dropArea')).remove();
	},
	refreshImages: function() {

		if (window.File && window.FileReader && window.FileList && window.Blob) {

			drop = $('#dropArea');

			drop.on('dragover', function(event) {
				//console.log('dragging over #images area');
				event.originalEvent.dataTransfer.dropEffect = 'copy';
				return false;
			});

			drop.on('drop', function(event) {

				if (!event.originalEvent.dataTransfer) {
					_Logger.log(_LogType.IMAGES, event);
					return;
				}

				_Logger.log(_LogType.IMAGES, 'dropped something in the #files area');

				event.stopPropagation();
				event.preventDefault();

				fileList = event.originalEvent.dataTransfer.files;
				_Logger.log(_LogType.IMAGES, fileList);
				var filesToUpload = [];
				var tooLargeFiles = [];

				$(fileList).each(function(i, file) {
					if (file.size <= sizeLimit) {
						filesToUpload.push(file);
					} else {
						tooLargeFiles.push(file);
					}
				});

				if (filesToUpload.length < fileList.length) {

					var errorText = 'The following files are too large (limit ' + sizeLimit / (1024 * 1024) + ' Mbytes):
\n';

					$(tooLargeFiles).each(function(i, tooLargeFile) {
						errorText += tooLargeFile.name + ': ' + Math.round(tooLargeFile.size / (1024 * 1024)) + ' Mbytes
\n';
					});

					Structr.error(errorText, function() {
						$.unblockUI({
							fadeOut: 25
						});
						$(filesToUpload).each(function(i, file) {
							_Logger.log(_LogType.IMAGES, file);
							if (file)
								Command.createFile(file);
						});
					});

				} else {

					$(filesToUpload).each(function(i, file) {
						if (file)
							Command.createFile(file);
					});

				}

				return false;
			});
		}

		_Pager.initFilters('images', 'Image', {
			isThumbnail: false
		});
		var imgPager = _Pager.addPager('images', images, false, 'Image', 'public');
		imgPager.pager.append(' Filter: ');
		//imgPager.activateFilterElements();

		_Images.resize();
	},
	getIcon: function(file) {
		var icon = (file.contentType.startsWith('image/svg') ? file.path : (file.tnSmall ? file.tnSmall.path : _Images.icon));
		return icon;
	},
	appendImageElement: function(img) {

		_Logger.log(_LogType.IMAGES, 'Images.appendImageElement', img);

		//if (!folderId && file.parentFolder) return false;

		// suppress images without thumbnails
		if (img.isThumbnail)
			return false;

		var div;
		var delIcon, newDelIcon;
		div = Structr.node(img.id);

		var tn = '/structr/img/ajax-loader.gif';

		var parent;
		if (img.parent) {

			var existingParent = Structr.node(img.parent.id);

			if (existingParent) {
				parent = existingParent;
			} else {
				var name = img.parent.name;
				images.append('' + fitStringToWidth(name, 100, 'name_') + ' ' + img.parent.id + '');
				parent = $('#id_' + img.parent.id);

				parent.children('b.name_').on('click', function(e) {
					e.stopPropagation();
					_Entities.makeNameEditable(parent, 100);
				});

			}

		} else {
			parent = images;
		}

		//var tn = '/' + img.tnSmall.id;
		parent.append(''
				+ ''
				+ '' + fitStringToWidth(img.name, 98) + ' ' + img.id + ''
				+ '/' + img.size + ''
				+ '');
		div = Structr.node(img.id);
		if (!div || !div.length)
			return;

		var tnSmall = img.tnSmall;
		if (tnSmall) {
			_Images.showThumbnails(img, div);
		} else {
			if (img.contentType &&  (img.contentType.startsWith('image/svg') || img.contentType.endsWith('image/vnd.microsoft.icon'))) {
				img.tnSmall = img;
				img.tnMid = img;
				_Images.showThumbnails(img, div);
			} else {
				_Images.reloadThumbnail(img.id, div);
			}
		}

		var iconArea = $('.icons', div);

		_Entities.appendAccessControlIcon(iconArea, img);

		div.append('');
		div.children('.push_icon').on('click', function() {
			Structr.pushDialog(img.id, false);
			return false;
		});

		delIcon = $('.delete_icon', div);

		newDelIcon = '';
		if (delIcon && delIcon.length) {
			delIcon.replaceWith(newDelIcon);
		} else {
			iconArea.append(newDelIcon);
			delIcon = $('.delete_icon', div);
		}
		$('.delete_icon', div).on('click', function(e) {
			e.stopPropagation();
			_Entities.deleteNode(this, img);
		});

		div.draggable({
			revert: 'invalid',
			helper: 'clone',
			//containment: '#main',
			appendTo: '#main',
			zIndex: 2,
			start: function(e, ui) {
				//$(this).hide();
			},
			stop: function(e, ui) {
				$(this).show();
				$('#pages_').droppable('enable').removeClass('nodeHover');
			}
		});

		_Entities.appendEditPropertiesIcon(iconArea, img);
		_Images.appendEditFileIcon(iconArea, img);

		_Entities.setMouseOver(iconArea);

		return div;
	},
	showThumbnails: function(img, el) {
		$('.thumbnail', el).attr('src', '/' + img.tnSmall.id);
		$('.thumbnail', el).on('mousedown', function(e) {
			e.stopPropagation();
			$('.thumbnailZoom', images).remove();
			images.append('');
			var tnZoom = $($('.thumbnailZoom', images)[0]);

			tnZoom.on('load', function() {
				_Logger.log(_LogType.IMAGES, tnZoom, tnZoom.position(), tnZoom.width(), tnZoom.height());
				var pos = el.position();

				tnZoom.css({
					top: (pos.top + (el.height() - tnZoom.height()) / 2) + 'px',
					left: (pos.left + (el.width() - tnZoom.width()) / 2) + 6 + 'px'
				}).show();
			});

			tnZoom.on('mouseup', function(e) {
				e.stopPropagation();
				$('.thumbnailZoom', images).remove();
			});

			tnZoom.on('click', function(e) {
				e.stopPropagation();
				Structr.dialog(img.name, function() {
					return true;
				}, function() {
					return true;
				});

				_Images.showImageDetails($(this), img, dialogText);
			});

		});
	},
	reloadThumbnail: function(id, el) {
		// wait 1 sec. and try again
		timeout = window.setTimeout(function() {
			if (attempts >= maxRetry) {
				window.clearTimeout(timeout);
			} else {
				attempts++;
				_Crud.crudRead('Image', id, function(img) {
					var tn = img.tnSmall;
					if (!tn) {
						_Images.reloadThumbnail(id, el);
					} else {
						_Images.showThumbnails(img, el);
					}
				});
			}
		}, 1000);
	},
	appendEditFileIcon: function(parent, file) {

		var editIcon = $('.edit_file_icon', parent);

		if (!(editIcon && editIcon.length)) {
			parent.append('');
		}

		$(parent.children('.edit_file_icon')).on('click', function(e) {
			e.stopPropagation();
			Structr.dialog('Edit ' + file.name, function() {
				_Logger.log(_LogType.IMAGES, 'content saved');
			}, function() {
				_Logger.log(_LogType.IMAGES, 'cancelled');
			});
			_Images.editImage(this, file, $('#dialogBox .dialogText'));
		});
	},
	showImageDetails: function(button, image, element) {
		element.append('
Download');
	},
	editImage: function(button, image, element) {
		_Logger.log(_LogType.IMAGES, image);
		element.append('Download links: Path | UUID

');
	}
};