aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
Diffstat (limited to 'view')
-rw-r--r--view/css/conversation.css9
-rw-r--r--view/js/main.js4
-rw-r--r--view/js/mod_cloud.js98
-rw-r--r--view/theme/redbasic/css/style.css24
-rw-r--r--view/tpl/cloud_actionspanel.tpl38
-rwxr-xr-xview/tpl/jot-header.tpl82
6 files changed, 235 insertions, 20 deletions
diff --git a/view/css/conversation.css b/view/css/conversation.css
index 68aa8bfbe..87965b2b8 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -40,6 +40,15 @@
resize: vertical;
}
+#profile-jot-text.hover {
+ color: #f00;
+ background-color: #43488A;
+ opacity: 0.5;
+ border-color: #f00;
+ border-style: solid;
+ box-shadow: inset 0 3px 4px #888;
+}
+
.jot-attachment {
border: 0px;
padding: 10px;
diff --git a/view/js/main.js b/view/js/main.js
index a288f98f5..a3fade0ea 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -659,7 +659,7 @@ function collapseHeight() {
var position = $(window).scrollTop();
$(".wall-item-content, .directory-collapse").each(function() {
- var orgHeight = parseInt($(this).css('height'));
+ var orgHeight = $(this).outerHeight(true);
if(orgHeight > divmore_height) {
if(! $(this).hasClass('divmore')) {
@@ -679,7 +679,7 @@ function collapseHeight() {
beforeToggle: function(trigger, element, expanded) {
if(expanded) {
if((($(element).offset().top + divmore_height) - $(window).scrollTop()) < 65 ) {
- $(window).scrollTop($(window).scrollTop() - (orgHeight - divmore_height));
+ $(window).scrollTop($(window).scrollTop() - ($(element).outerHeight(true) - divmore_height));
}
}
}
diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
new file mode 100644
index 000000000..71e916446
--- /dev/null
+++ b/view/js/mod_cloud.js
@@ -0,0 +1,98 @@
+/**
+ * JavaScript for mod/cloud
+ */
+
+$(document).ready(function () {
+ // call initialization file
+ if (window.File && window.FileList && window.FileReader) {
+ DragDropUploadInit();
+ }
+});
+
+//
+// initialize
+function DragDropUploadInit() {
+
+ var fileselect = $("#fileselect"),
+ filedrag = $("#filedrag");
+
+ // file select
+ fileselect.on("change", DragDropUploadFileSelectHandler);
+
+ // is XHR2 available?
+ var xhr = new XMLHttpRequest();
+ if (xhr.upload) {
+
+ // file drop
+ filedrag.on("dragover", DragDropUploadFileHover);
+ filedrag.on("dragleave", DragDropUploadFileHover);
+ filedrag.on("drop", DragDropUploadFileSelectHandler);
+ filedrag.show();
+
+ }
+
+ window.filesToUpload = 0;
+ window.fileUploadsCompleted = 0;
+
+
+}
+
+// file drag hover
+function DragDropUploadFileHover(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ e.target.className = (e.type == "dragover" ? "hover" : "");
+}
+
+// file selection
+function DragDropUploadFileSelectHandler(e) {
+
+ // cancel event and hover styling
+ DragDropUploadFileHover(e);
+
+ // fetch FileList object
+ var files = e.target.files || e.originalEvent.dataTransfer.files;
+ $("#file-upload-list").empty();
+ // process all File objects
+ for (var i = 0, f; f = files[i]; i++) {
+ $("#file-upload-list").append(
+ "<p>" + "<span id='upload-progress-" + i + "'></span> -> File: <strong>" + f.name +
+ "</strong> type: <strong>" + f.type +
+ "</strong> size: <strong>" + f.size +
+ "</strong> bytes</p>"
+ );
+ DragDropUploadFile(f, i);
+ }
+
+}
+
+// upload files
+function DragDropUploadFile(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) + '%');
+ });
+ xhr.addEventListener('load', function (e) {
+ //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;
+ }
+ });
+ // POST to the entire cloud path
+ xhr.open('post', window.location.pathname, true);
+
+ var data = new FormData(document.getElementById("ajax-upload-files"));
+ data.append('file', file);
+ xhr.send(data);
+}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 6cc3e2f10..ce69b6cff 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -106,6 +106,7 @@ input[type="submit"] {
input, optgroup, select, textarea {
color: #333;
+ resize: vertical;
}
pre code {
@@ -2040,4 +2041,25 @@ dl.bb-dl > dd > li {
#wiki-preview img {
max-width: 100%;
-} \ No newline at end of file
+}
+
+#filedrag
+{
+ display: none;
+ font-weight: bold;
+ text-align: center;
+ padding: 1em 0;
+ margin: 1em 0;
+ color: #555;
+ border: 2px dashed #555;
+ border-radius: 7px;
+ cursor: default;
+}
+
+#filedrag.hover
+{
+ color: #f00;
+ border-color: #f00;
+ border-style: solid;
+ box-shadow: inset 0 3px 4px #888;
+}
diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl
index 81a586e75..acba965f2 100644
--- a/view/tpl/cloud_actionspanel.tpl
+++ b/view/tpl/cloud_actionspanel.tpl
@@ -1,20 +1,26 @@
<div id="files-mkdir-tools" class="section-content-tools-wrapper">
- <label for="files-mkdir">{{$folder_header}}</label>
- <form method="post" action="">
- <input type="hidden" name="sabreAction" value="mkcol">
- <input id="files-mkdir" type="text" name="name" class="form-control form-group">
- <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
- </form>
- <div class="clear"></div>
+ <label for="files-mkdir">{{$folder_header}}</label>
+ <form method="post" action="">
+ <input type="hidden" name="sabreAction" value="mkcol">
+ <input id="files-mkdir" type="text" name="name" class="form-control form-group">
+ <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
+ </form>
+ <div class="clear"></div>
</div>
<div id="files-upload-tools" class="section-content-tools-wrapper">
- {{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}}
- <label for="files-upload">{{$upload_header}}</label>
- <form method="post" action="" enctype="multipart/form-data">
- <input type="hidden" name="sabreAction" value="put">
- <input class="form-group" id="files-upload" type="file" name="file">
- <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
- <!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form-->
- </form>
- <div class="clear"></div>
+ {{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}}
+ <form id="ajax-upload-files" method="post" action="" enctype="multipart/form-data">
+ <input type="hidden" name="sabreAction" value="put">
+ <div>
+ <div id="filedrag" style="height: 7em;"><br>{{$dragdroptext}}</div>
+ </div>
+ <div id="file-upload-list"></div>
+ <div class="clear"></div>
+ <label for="files-upload">{{$upload_header}}</label>
+ <div class="clear"></div>
+ <input class="form-group pull-left" id="files-upload" type="file" name="file">
+ <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
+ </form>
+ <div class="clear"></div>
+ <hr/>
</div>
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 9953875ef..ee00e25e6 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -164,6 +164,12 @@ function enableOnUser(){
});
} catch(e) {
}
+
+
+ // call initialization file
+ if (window.File && window.FileList && window.FileReader) {
+ DragDropUploadInit();
+ }
});
function deleteCheckedItems() {
@@ -446,7 +452,81 @@ function enableOnUser(){
},
'json');
};
-
+
+ //
+ // initialize
+ function DragDropUploadInit() {
+
+ var filedrag = $("#profile-jot-text");
+
+ // is XHR2 available?
+ var xhr = new XMLHttpRequest();
+ if (xhr.upload) {
+
+ // 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.target.className = (e.type == "dragover" ? "hover" : "");
+ }
+
+ // file selection
+ function DragDropUploadFileSelectHandler(e) {
+
+ // cancel event and hover styling
+ DragDropUploadFileHover(e);
+
+ // fetch FileList object
+ var files = e.target.files || e.originalEvent.dataTransfer.files;
+ // process all File objects
+ for (var i = 0, f; f = files[i]; i++) {
+ DragDropUploadFile(f, i);
+ }
+
+ }
+
+ // upload files
+ function DragDropUploadFile(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) {
+ $('#profile-rotator').spin('tiny');
+ });
+ xhr.addEventListener('load', function (e) {
+ //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) {
+ addeditortext(xhr.responseText);
+ $('#jot-media').val($('#jot-media').val() + xhr.responseText);
+ $('#profile-rotator').spin(false);
+ window.fileUploadsCompleted = window.filesToUpload = 0;
+ }
+ });
+ // POST to the wall_upload endpoint
+ xhr.open('post', '{{$baseurl}}/wall_attach/{{$nickname}}', true);
+
+ var data = new FormData();
+ data.append('userfile', file);
+ xhr.send(data);
+ }
+
</script>
<script>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-18 03:37:34 +0000