Initial commit.
This commit is contained in:
commit
b48a4e92e1
169 changed files with 7538 additions and 0 deletions
154
web/public/src/app/directives/dropzone.js
Normal file
154
web/public/src/app/directives/dropzone.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
import Dropzone from 'dropzone';
|
||||
|
||||
function guid() {
|
||||
function s4() {
|
||||
return Math.floor((1 + Math.random()) * 0x10000)
|
||||
.toString(16)
|
||||
.substring(1);
|
||||
}
|
||||
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
|
||||
s4() + '-' + s4() + s4() + s4();
|
||||
}
|
||||
|
||||
export default function dropzone(FileService, $cacheFactory) {
|
||||
var dropOverlay = document.getElementById('filedrop-overlay');
|
||||
var dropzoneEl;
|
||||
var errorTimeout;
|
||||
return function($scope) {
|
||||
$scope.$on('$viewContentLoaded', function() {
|
||||
if (!dropzoneEl) {
|
||||
$scope.$root.uploadingFiles = [];
|
||||
var clickable = [].slice.call(document.querySelectorAll('.choose-file'));
|
||||
|
||||
dropzoneEl = new Dropzone(document.body, {
|
||||
url: window.settings.apiURL + '/file',
|
||||
maxFilesize: window.user.maxFileSize / 1024 / 1024,
|
||||
maxThumbnailFilesize: 5,
|
||||
thumbnailWidth: 150,
|
||||
thumbnailHeight: 98,
|
||||
parallelUploads: 1,
|
||||
uploadMultiple: false,
|
||||
clickable: clickable.length ? clickable : false,
|
||||
autoDiscover: false,
|
||||
headers: {'Authorization': ':' + window.user.token},
|
||||
previewsContainer: false
|
||||
});
|
||||
dropzoneEl.on('thumbnail', function(file, thumbnail){
|
||||
file.thumbnail = thumbnail;
|
||||
$scope.$apply();
|
||||
});
|
||||
dropzoneEl.on('addedfile', function(file){
|
||||
var id = guid();
|
||||
file.guid = id;
|
||||
$scope.$root.uploadingFiles.push(file);
|
||||
$scope.$apply();
|
||||
});
|
||||
dropzoneEl.on('sending', function(file, xhr) {
|
||||
xhr.setRequestHeader('hostr-guid', file.guid);
|
||||
});
|
||||
dropzoneEl.on('uploadprogress', function(file, progress) {
|
||||
$scope.$root.progress = {
|
||||
name: file.name,
|
||||
percent: progress,
|
||||
status: 'Uploading'
|
||||
};
|
||||
if (progress === 100) {
|
||||
$scope.$root.progress.status = 'Processing';
|
||||
}
|
||||
$scope.$apply();
|
||||
});
|
||||
dropzoneEl.on('complete', function(file){
|
||||
delete $scope.$root.progress;
|
||||
$scope.$apply();
|
||||
$scope.$root.uploadingFiles.some(function(uploadingFile, index) {
|
||||
if (uploadingFile.guid === file.guid) {
|
||||
$scope.$root.uploadingFiles.splice(index, 1);
|
||||
$scope.$apply();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
dropzoneEl.on('error', function(evt, error){
|
||||
if (error.error) {
|
||||
$scope.$root.uploadError = 'Error uploading file: ' + evt.name + '. ' + error.error.message;
|
||||
}
|
||||
else if (evt.name) {
|
||||
$scope.$root.uploadError = 'Error uploading file: ' + evt.name + '. ' + error;
|
||||
} else {
|
||||
if (error[0] !== '<') {
|
||||
$scope.$root.uploadError = 'Uknown error during upload';
|
||||
}
|
||||
}
|
||||
$scope.$apply();
|
||||
clearTimeout(errorTimeout);
|
||||
errorTimeout = setTimeout(function() {
|
||||
$scope.$root.uploadError = '';
|
||||
$scope.$apply();
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
var addFile = function(newFile) {
|
||||
if (!$scope.$root.files.some(function (file) {
|
||||
return file.id === newFile.id;
|
||||
})) {
|
||||
var cache = $cacheFactory.get('files-cache');
|
||||
cache.removeAll();
|
||||
var file = new FileService(newFile);
|
||||
$scope.$root.files.unshift(file);
|
||||
$scope.$root.user.uploads_today++;
|
||||
$scope.$apply();
|
||||
}
|
||||
};
|
||||
|
||||
dropzoneEl.on('success', function(file, response){
|
||||
addFile(response);
|
||||
});
|
||||
$scope.$on('file-added', function(event, data){
|
||||
addFile(data);
|
||||
});
|
||||
$scope.$on('file-accepted', function(event, data){
|
||||
$scope.$root.uploadingFiles.some(function(file) {
|
||||
if (file.guid === data.guid) {
|
||||
file.id = data.id;
|
||||
file.href = data.href;
|
||||
$scope.$apply();
|
||||
return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
$scope.$on('file-deleted', function(evt, data) {
|
||||
$scope.$root.files.forEach(function(file, index) {
|
||||
if(data.id === file.id) {
|
||||
delete $scope.$root.files[index];
|
||||
$scope.$digest();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.body.addEventListener('dragenter', function(){
|
||||
dropOverlay.style.display = 'block';
|
||||
});
|
||||
|
||||
dropOverlay.addEventListener('dragleave', function(event){
|
||||
if (event.target.outerText !== 'Drop files to upload' || event.x === 0) {
|
||||
dropOverlay.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
dropOverlay.addEventListener('drop', function(){
|
||||
dropOverlay.style.display = 'none';
|
||||
});
|
||||
} else {
|
||||
var clicker = [].slice.call(document.querySelectorAll('.choose-file'));
|
||||
if (clicker) {
|
||||
clicker.forEach(function(el) {
|
||||
el.addEventListener('click', function() {
|
||||
return dropzoneEl.hiddenFileInput.click();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
222
web/public/src/app/directives/lazy-src.js
Normal file
222
web/public/src/app/directives/lazy-src.js
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
export default function lazySrc($window, $document) {
|
||||
var lazyLoader = (function() {
|
||||
var images = [];
|
||||
var renderTimer = null;
|
||||
var renderDelay = 100;
|
||||
var win = $($window);
|
||||
var doc = $($document);
|
||||
var documentHeight = doc.height();
|
||||
var documentTimer = null;
|
||||
var documentDelay = 2000;
|
||||
var isWatchingWindow = false;
|
||||
|
||||
// ---
|
||||
// PUBLIC METHODS.
|
||||
// ---
|
||||
function addImage(image) {
|
||||
images.push(image);
|
||||
if (!renderTimer) {
|
||||
startRenderTimer();
|
||||
}
|
||||
|
||||
if (!isWatchingWindow) {
|
||||
startWatchingWindow();
|
||||
}
|
||||
}
|
||||
|
||||
let removeImage = function(image) {
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
if (images[i] === image ) {
|
||||
images.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ( !images.length ) {
|
||||
clearRenderTimer();
|
||||
stopWatchingWindow();
|
||||
}
|
||||
};
|
||||
|
||||
// ---
|
||||
// PRIVATE METHODS.
|
||||
// ---
|
||||
|
||||
function clearRenderTimer() {
|
||||
clearTimeout( renderTimer );
|
||||
renderTimer = null;
|
||||
}
|
||||
|
||||
function checkImages() {
|
||||
var visible = [];
|
||||
var hidden = [];
|
||||
var windowHeight = win.height();
|
||||
var scrollTop = win.scrollTop();
|
||||
var topFoldOffset = scrollTop;
|
||||
var bottomFoldOffset = ( topFoldOffset + windowHeight );
|
||||
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
var image = images[ i ];
|
||||
if ( image.isVisible( topFoldOffset, bottomFoldOffset ) ) {
|
||||
visible.push( image );
|
||||
} else {
|
||||
hidden.push( image );
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < visible.length; i++) {
|
||||
visible[ i ].render();
|
||||
}
|
||||
|
||||
images = hidden;
|
||||
|
||||
clearRenderTimer();
|
||||
|
||||
if ( !images.length ) {
|
||||
stopWatchingWindow();
|
||||
}
|
||||
}
|
||||
|
||||
function startRenderTimer() {
|
||||
renderTimer = setTimeout( checkImages, renderDelay );
|
||||
}
|
||||
|
||||
function checkDocumentHeight() {
|
||||
if ( renderTimer ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var currentDocumentHeight = doc.height();
|
||||
if ( currentDocumentHeight === documentHeight ) {
|
||||
return;
|
||||
}
|
||||
|
||||
documentHeight = currentDocumentHeight;
|
||||
|
||||
startRenderTimer();
|
||||
}
|
||||
|
||||
function windowChanged() {
|
||||
if (!renderTimer) {
|
||||
startRenderTimer();
|
||||
}
|
||||
}
|
||||
|
||||
function startWatchingWindow() {
|
||||
|
||||
isWatchingWindow = true;
|
||||
|
||||
win.on( 'resize.lazySrc', windowChanged );
|
||||
win.on( 'scroll.lazySrc', windowChanged );
|
||||
|
||||
documentTimer = setInterval( checkDocumentHeight, documentDelay );
|
||||
}
|
||||
|
||||
function stopWatchingWindow() {
|
||||
isWatchingWindow = false;
|
||||
|
||||
win.off( 'resize.lazySrc' );
|
||||
win.off( 'scroll.lazySrc' );
|
||||
|
||||
clearInterval( documentTimer );
|
||||
}
|
||||
|
||||
return ({
|
||||
addImage: addImage,
|
||||
removeImage: removeImage
|
||||
});
|
||||
})();
|
||||
|
||||
function LazyImage( element ) {
|
||||
var source = null;
|
||||
var isRendered = false;
|
||||
var height = null;
|
||||
|
||||
element = $(element);
|
||||
|
||||
// ---
|
||||
// PUBLIC METHODS.
|
||||
// ---
|
||||
function isVisible( topFoldOffset, bottomFoldOffset ) {
|
||||
if (!element.is(':visible')) {
|
||||
//return( false );
|
||||
}
|
||||
|
||||
bottomFoldOffset = bottomFoldOffset + 50;
|
||||
|
||||
if ( height === null ) {
|
||||
height = element.height();
|
||||
}
|
||||
|
||||
var top = element.offset().top;
|
||||
var bottom = ( top + height );
|
||||
|
||||
return (
|
||||
(
|
||||
( top <= bottomFoldOffset ) &&
|
||||
( top >= topFoldOffset )
|
||||
)
|
||||
||
|
||||
(
|
||||
( bottom <= bottomFoldOffset ) &&
|
||||
( bottom >= topFoldOffset )
|
||||
)
|
||||
||
|
||||
(
|
||||
( top <= topFoldOffset ) &&
|
||||
( bottom >= bottomFoldOffset )
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
function renderSource() {
|
||||
element[ 0 ].src = source;
|
||||
element[ 0 ].classList.add('loaded');
|
||||
}
|
||||
|
||||
function render() {
|
||||
isRendered = true;
|
||||
renderSource();
|
||||
}
|
||||
|
||||
function setSource( newSource ) {
|
||||
source = newSource;
|
||||
if ( isRendered ) {
|
||||
renderSource();
|
||||
}
|
||||
}
|
||||
|
||||
return ({
|
||||
isVisible: isVisible,
|
||||
render: render,
|
||||
setSource: setSource
|
||||
});
|
||||
}
|
||||
|
||||
function link( $scope, element, attributes ) {
|
||||
var lazyImage = new LazyImage( element );
|
||||
|
||||
lazyLoader.addImage( lazyImage );
|
||||
|
||||
attributes.$observe(
|
||||
'lazySrc',
|
||||
function( newSource ) {
|
||||
lazyImage.setSource( newSource );
|
||||
}
|
||||
);
|
||||
|
||||
$scope.$on(
|
||||
'$destroy',
|
||||
function() {
|
||||
lazyLoader.removeImage( lazyImage );
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return ({
|
||||
link: link,
|
||||
restrict: 'A'
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue