aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
Diffstat (limited to 'view')
-rw-r--r--view/css/mod_photos.css26
-rw-r--r--view/js/main.js4
-rw-r--r--view/js/mod_photos.js210
-rw-r--r--view/theme/redbasic/schema/dark.css6
-rw-r--r--view/theme/redbasic/schema/simple_black_on_white.css6
-rw-r--r--view/theme/redbasic/schema/simple_green_on_black.css6
-rw-r--r--view/theme/redbasic/schema/simple_white_on_black.css6
-rwxr-xr-xview/tpl/cover_photo_widget.tpl5
-rw-r--r--view/tpl/notifications_widget.tpl8
-rwxr-xr-xview/tpl/photos_upload.tpl3
10 files changed, 267 insertions, 13 deletions
diff --git a/view/css/mod_photos.css b/view/css/mod_photos.css
index 72dd7ffe7..8a189e9e5 100644
--- a/view/css/mod_photos.css
+++ b/view/css/mod_photos.css
@@ -34,3 +34,29 @@
left: -9999px;
top: -9999px;
}
+
+#upload-index {
+ width: 100%;
+}
+
+#upload-index td:nth-child(1){
+ padding: 7px 3px 7px 10px;
+}
+
+#upload-index td:nth-child(4){
+ padding: 7px 10px 7px 3px;
+ white-space: nowrap;
+}
+
+#photos-upload-form.hover {
+ background-color: aliceblue;
+ opacity: 0.5;
+ box-shadow: inset 0 0px 7px #5cb85c;
+}
+
+.upload-progress-bar {
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==') repeat-y;
+ background-size: 0px;
+ padding: 0px !important;
+ height: 3px;
+}
diff --git a/view/js/main.js b/view/js/main.js
index ffea1b75c..e231dac60 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -959,9 +959,9 @@ function notify_popup_loader(notifyType) {
$("." + notifyType + "-update").html(data.notify.length);
$(data.notify).each(function() {
- html = navbar_notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass);
+ html = navbar_notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid);
$("#navbar-" + notifyType + "-menu").append(html);
- html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass);
+ html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid);
$("#nav-" + notifyType + "-menu").append(html);
});
diff --git a/view/js/mod_photos.js b/view/js/mod_photos.js
index cbc1d8fa1..267b51531 100644
--- a/view/js/mod_photos.js
+++ b/view/js/mod_photos.js
@@ -3,6 +3,11 @@
*/
$(document).ready(function() {
+ // call initialization file
+ if (window.File && window.FileList && window.FileReader) {
+ UploadInit();
+ }
+
$("#photo-edit-newtag").contact_autocomplete(baseurl + '/acl', 'a', false, function(data) {
$("#photo-edit-newtag").val('@' + data.name);
});
@@ -18,3 +23,208 @@ function showHideBodyTextarea() {
else
$('#body-textarea').slideUp();
}
+
+// initialize
+function UploadInit() {
+
+ var fileselect = $("#photos-upload-choose");
+ var filedrag = $("#photos-upload-form");
+ var submit = $("#dbtn-submit");
+
+ // is XHR2 available?
+ var xhr = new XMLHttpRequest();
+ if (xhr.upload) {
+
+ // file select
+ fileselect.attr("multiple", 'multiple');
+ fileselect.on("change", UploadFileSelectHandler);
+
+ // file submit
+ submit.on("click", fileselect, UploadFileSelectHandler);
+
+ // file drop
+ filedrag.on("dragover", DragDropUploadFileHover);
+ filedrag.on("dragleave", DragDropUploadFileHover);
+ filedrag.on("drop", DragDropUploadFileSelectHandler);
+ }
+
+ window.filesToUpload = 0;
+ window.fileUploadsCompleted = 0;
+}
+
+// file drag hover
+function DragDropUploadFileHover(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ e.currentTarget.className = (e.type == "dragover" ? "hover" : "");
+}
+
+// file selection via drag/drop
+function DragDropUploadFileSelectHandler(e) {
+ // cancel event and hover styling
+ DragDropUploadFileHover(e);
+
+ // fetch FileList object
+ var files = e.target.files || e.originalEvent.dataTransfer.files;
+
+ $('.new-upload').remove();
+
+ // process all File objects
+ for (var i = 0, f; f = files[i]; i++) {
+ prepareHtml(f, i);
+ UploadFile(f, i);
+ }
+}
+
+// file selection via input
+function UploadFileSelectHandler(e) {
+ // fetch FileList object
+ if(e.target.id === 'dbtn-submit') {
+ e.preventDefault();
+ var files = e.data[0].files;
+ }
+ if(e.target.id === 'photos-upload-choose') {
+ $('.new-upload').remove();
+ var files = e.target.files;
+ }
+
+ // process all File objects
+ for (var i = 0, f; f = files[i]; i++) {
+ if(e.target.id === 'photos-upload-choose')
+ prepareHtml(f, i);
+ if(e.target.id === 'dbtn-submit') {
+ UploadFile(f, i);
+ }
+ }
+}
+
+function prepareHtml(f, i) {
+ var num = i - 1;
+ $('#upload-index #new-upload-progress-bar-' + num.toString()).after(
+ '<tr id="new-upload-' + i + '" class="new-upload">' +
+ '<td width="1%"><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
+ '<td width="96%">' + f.name + '</td>' +
+ '<td id="upload-progress-' + i + '" width="1%"></td>' +
+ '<td class="d-none d-md-table-cell" width="1%">' + formatSizeUnits(f.size) + '</td>' +
+ '</tr>' +
+ '<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' +
+ '<td id="upload-progress-bar-' + i + '" colspan="4" class="upload-progress-bar"></td>' +
+ '</tr>'
+ );
+}
+
+function formatSizeUnits(bytes){
+ if (bytes>=1000000000) {bytes=(bytes/1000000000).toFixed(2)+' GB';}
+ else if (bytes>=1000000) {bytes=(bytes/1000000).toFixed(2)+' MB';}
+ else if (bytes>=1000) {bytes=(bytes/1000).toFixed(2)+' KB';}
+ else if (bytes>1) {bytes=bytes+' bytes';}
+ else if (bytes==1) {bytes=bytes+' byte';}
+ else {bytes='0 byte';}
+ return bytes;
+}
+
+// this is basically a js port of include/text.php getIconFromType() function
+function getIconFromType(type) {
+ var map = {
+ //Common file
+ 'application/octet-stream': 'fa-file-o',
+ //Text
+ 'text/plain': 'fa-file-text-o',
+ 'application/msword': 'fa-file-word-o',
+ 'application/pdf': 'fa-file-pdf-o',
+ 'application/vnd.oasis.opendocument.text': 'fa-file-word-o',
+ 'application/epub+zip': 'fa-book',
+ //Spreadsheet
+ 'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel-o',
+ 'application/vnd.ms-excel': 'fa-file-excel-o',
+ //Image
+ 'image/jpeg': 'fa-picture-o',
+ 'image/png': 'fa-picture-o',
+ 'image/gif': 'fa-picture-o',
+ 'image/svg+xml': 'fa-picture-o',
+ //Archive
+ 'application/zip': 'fa-file-archive-o',
+ 'application/x-rar-compressed': 'fa-file-archive-o',
+ //Audio
+ 'audio/mpeg': 'fa-file-audio-o',
+ 'audio/mp3': 'fa-file-audio-o', //webkit browsers need that
+ 'audio/wav': 'fa-file-audio-o',
+ 'application/ogg': 'fa-file-audio-o',
+ 'audio/ogg': 'fa-file-audio-o',
+ 'audio/webm': 'fa-file-audio-o',
+ 'audio/mp4': 'fa-file-audio-o',
+ //Video
+ 'video/quicktime': 'fa-file-video-o',
+ 'video/webm': 'fa-file-video-o',
+ 'video/mp4': 'fa-file-video-o',
+ 'video/x-matroska': 'fa-file-video-o'
+ };
+
+ var iconFromType = 'fa-file-o';
+
+ if (type in map) {
+ iconFromType = map[type];
+ }
+
+ return iconFromType;
+}
+
+// upload files
+function UploadFile(file, idx) {
+
+ window.filesToUpload = window.filesToUpload + 1;
+
+ var xhr = new XMLHttpRequest();
+
+ xhr.withCredentials = true; // Include the SESSION cookie info for authentication
+
+ (xhr.upload || xhr).addEventListener('progress', function (e) {
+
+ var done = e.position || e.loaded;
+ var total = e.totalSize || e.total;
+ // Dynamically update the percentage complete displayed in the file upload list
+ $('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
+ $('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
+
+ if(done == total) {
+ $('#upload-progress-' + idx).html('Processing...');
+ }
+
+ });
+
+
+ xhr.addEventListener('load', function (e) {
+ //we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload...
+ $('#upload-progress-' + idx).html('Ready!');
+
+ //console.log('xhr upload complete', e);
+ window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
+
+ // When all the uploads have completed, refresh the page
+ if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
+
+ window.fileUploadsCompleted = window.filesToUpload = 0;
+
+ // After uploads complete, refresh browser window to display new files
+ window.location.href = window.location.href;
+ }
+ });
+
+
+ xhr.addEventListener('error', function (e) {
+ $('#upload-progress-' + idx).html('<span style="color: red;">ERROR</span>');
+ });
+
+ // POST to the entire cloud path
+ xhr.open('post', $('#photos-upload-form').attr( 'action' ), true);
+
+ var formfields = $("#photos-upload-form").serializeArray();
+
+ var data = new FormData();
+ $.each(formfields, function(i, field) {
+ data.append(field.name, field.value);
+ });
+ data.append('userfile', file);
+
+ xhr.send(data);
+}
diff --git a/view/theme/redbasic/schema/dark.css b/view/theme/redbasic/schema/dark.css
index b1aa5e07a..a921f42af 100644
--- a/view/theme/redbasic/schema/dark.css
+++ b/view/theme/redbasic/schema/dark.css
@@ -301,7 +301,11 @@ a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link {
font-weight: bold;
}
-.group-selected, .fileas-selected, .categories-selected, .search-selected, .active {
+.list-group-item {
+ background-color: #222;
+}
+
+.group-selected, .fileas-selected, .categories-selected, .search-selected, a.active {
color: #fff !important;
text-decoration: underline !important;
}
diff --git a/view/theme/redbasic/schema/simple_black_on_white.css b/view/theme/redbasic/schema/simple_black_on_white.css
index 915cc4e18..ab819d774 100644
--- a/view/theme/redbasic/schema/simple_black_on_white.css
+++ b/view/theme/redbasic/schema/simple_black_on_white.css
@@ -198,11 +198,15 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
background-color: #F5F5F5;
}
+.list-group-item {
+ background-color: #F5F5F5;
+}
+
a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link {
font-weight: bold;
}
-.group-selected, .fileas-selected, .categories-selected, .search-selected, .active {
+.group-selected, .fileas-selected, .categories-selected, .search-selected, a.active {
color: #000 !important;
text-decoration: underline !important;
}
diff --git a/view/theme/redbasic/schema/simple_green_on_black.css b/view/theme/redbasic/schema/simple_green_on_black.css
index 7f3f99fce..c8ea87050 100644
--- a/view/theme/redbasic/schema/simple_green_on_black.css
+++ b/view/theme/redbasic/schema/simple_green_on_black.css
@@ -259,11 +259,15 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
background-color: #143D12;
}
+.list-group-item {
+ background-color: #143D12;
+}
+
a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link {
font-weight: bold;
}
-.group-selected, .fileas-selected, .categories-selected, .search-selected, .active {
+.group-selected, .fileas-selected, .categories-selected, .search-selected, a.active {
color: #50f148 !important;
text-decoration: underline !important;
}
diff --git a/view/theme/redbasic/schema/simple_white_on_black.css b/view/theme/redbasic/schema/simple_white_on_black.css
index 7e7f80f2f..ea04d4d9e 100644
--- a/view/theme/redbasic/schema/simple_white_on_black.css
+++ b/view/theme/redbasic/schema/simple_white_on_black.css
@@ -237,11 +237,15 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
background-color: #030303;
}
+.list-group-item {
+ background-color: #030303;
+}
+
a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link {
font-weight: bold;
}
-.group-selected, .fileas-selected, .categories-selected, .search-selected, .active {
+.group-selected, .fileas-selected, .categories-selected, .search-selected, a.active {
color: #fff !important;
text-decoration: underline !important;
}
diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl
index 7404a740c..3aaad5ae5 100755
--- a/view/tpl/cover_photo_widget.tpl
+++ b/view/tpl/cover_photo_widget.tpl
@@ -8,8 +8,7 @@
aside_padding_top = parseInt($('aside').css('padding-top'));
section_padding_top = parseInt($('section').css('padding-top'));
- $('#cover-photo').on('click', slideUpCover);
- $('#cover-photo').on('keyup', slideUpCover);
+ $(document).on('click mouseup keyup', slideUpCover);
if($('#cover-photo').length && $(window).width() > 755) {
if($(window).scrollTop() < $('#cover-photo').height()) {
@@ -63,7 +62,7 @@
if(coverSlid) {
return;
}
- $('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' });
+ $('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' }, 'fast');
return;
}
</script>
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 1e752c313..0ece84891 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -29,16 +29,16 @@
{{if $module == 'display'}}
<script>
$(document).on('click', '.notification', function(e) {
- var mid = $(this)[0].pathname.substr(9);
+ var b64mid = $(this).data('b64mid');
var path = $(this)[0].pathname.substr(1,7);
- if(path === 'display' && mid) {
+ if(path === 'display' && b64mid) {
e.preventDefault();
e.stopPropagation();
$('.thread-wrapper').remove();
$(this).fadeOut();
- bParam_mid = mid;
+ bParam_mid = b64mid;
mode = 'replace';
page_load = true;
liveUpdate();
@@ -54,7 +54,7 @@
<div id="notifications_wrapper">
<div id="notifications" class="navbar-nav" data-children=".nav-item">
<div id="nav-notifications-template" rel="template">
- <a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}">
+ <a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}">
<img class="menu-img-3" data-src="{1}">
<span class="contactname">{2}</span>
<span class="dropdown-sub-text">{3}<br>{4}</span>
diff --git a/view/tpl/photos_upload.tpl b/view/tpl/photos_upload.tpl
index d52bad5a2..46b1d3fd0 100755
--- a/view/tpl/photos_upload.tpl
+++ b/view/tpl/photos_upload.tpl
@@ -56,6 +56,9 @@
{{/if}}
</form>
</div>
+ <table id="upload-index">
+ <tr id="new-upload-progress-bar--1"></tr> {{* this is needed to append the upload files in the right order *}}
+ </table>
{{$aclselect}}
<div id="photos-upload-end" class="clear"></div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 11:09:50 +0000