From 52f94655781e2cd21947a9ac1d10fc450693e812 Mon Sep 17 00:00:00 2001 From: Fabrixxm Date: Wed, 29 Jul 2015 11:30:04 +0200 Subject: [PATCH] filebrowser fixs, use it in comment textareas move filebrowser js to single file document filebrowser usage replace "onclick" for comment style buttons with data-* and move logic to main.js use filebrowser to insert images in comments --- js/filebrowser.js | 116 ++++++++++++++++++ js/main.js | 27 ++++ view/templates/filebrowser_plain.tpl | 74 +++-------- view/templates/jot-header.tpl | 4 +- view/theme/dispy/templates/comment_item.tpl | 16 +-- .../duepuntozero/templates/comment_item.tpl | 16 +-- .../frost-mobile/templates/comment_item.tpl | 16 +-- view/theme/frost/templates/comment_item.tpl | 16 +-- view/theme/quattro/templates/comment_item.tpl | 19 ++- view/theme/vier/templates/comment_item.tpl | 14 +-- 10 files changed, 210 insertions(+), 108 deletions(-) create mode 100644 js/filebrowser.js diff --git a/js/filebrowser.js b/js/filebrowser.js new file mode 100644 index 0000000000..8f7b78d197 --- /dev/null +++ b/js/filebrowser.js @@ -0,0 +1,116 @@ +/** + * Filebrowser - Friendica Communications Server + * + * Copyright (c) 2010-2013 the Friendica Project + * + * This program 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. + * + * This code handle user interaction for image/file upload/browser dialog. + * Is loaded from filebrowser_plain.tpl + * + * To load filebrowser in colorbox, call + * + * $.colorbox({href: ulr, iframe:true,innerWidth:'500px',innerHeight:'400px'}) + * + * where url is: + * + * /fbrowser//?mode=minimal[#-] + * + * baseurl: baseurl from friendica + * type: one of "image", "file" + * eventname: event name to catch return value + * id: id returned to event handler + * + * When user select an item, an event in fired in parent page, on body element + * The event is named + * + * fbrowser..[] + * + * with params: + * + * filemane: filename of item choosed by user + * embed: bbcode to embed element into posts + * id: id from url + * + * example: + * + * // open dialog for select an image for a textarea with id "myeditor" + * var id="myeditor"; + * $.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#example-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'}) + * + * // setup event handler to get user selection + * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { + * // close colorbox + * $.colorbox.close(); + * // replace textxarea text with bbcode + * $(id).value = bbcode; + * }); + **/ + +var FileBrowser = { + nickname : "", + type : "", + event: "", + id : null, + + init: function(nickname, type) { + FileBrowser.nickname = nickname; + FileBrowser.type = type; + FileBrowser.event = "fbrowser."+type; + if (location['hash']!=="") { + var h = location['hash'].replace("#",""); + FileBrowser.event = FileBrowser.event + "." + h.split("-")[0]; + FileBrowser.id = h.split("-")[1]; + } + + console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id ); + $(".photo-album-photo-link").on('click', function(e){ + e.preventDefault(); + + var embed = ""; + if (FileBrowser.type == "image") { + embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]"; + } + if (FileBrowser.type=="file") { + // attachment links are "baseurl/attach/id"; we need id + embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]"; + } + console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id); + parent.$("body").trigger(FileBrowser.event, [ + this.dataset.filename, + embed, + FileBrowser.id + ]); + + }); + + if ($("#upload-image").length) + var image_uploader = new window.AjaxUpload( + 'upload-image', + { action: 'wall_upload/'+FileBrowser.nickname, + name: 'userfile', + onSubmit: function(file,ext) { $('#profile-rotator').show(); }, + onComplete: function(file,response) { + location = baseurl + "/fbrowser/image/?mode=minimal"+location['hash']; + location.reload(true); + } + } + ); + + if ($("#upload-file").length) + var file_uploader = new window.AjaxUpload( + 'upload-file', + { action: 'wall_attach/'+FileBrowser.nickname, + name: 'userfile', + onSubmit: function(file,ext) { $('#profile-rotator').show(); }, + onComplete: function(file,response) { + location = baseurl + "/fbrowser/file/?mode=minimal"+location['hash']; + location.reload(true); } + } + ); + } +}; + diff --git a/js/main.js b/js/main.js index 239a875cb4..d3cce33040 100644 --- a/js/main.js +++ b/js/main.js @@ -51,6 +51,33 @@ e.tipTip({defaultPosition: pos, edgeOffset: 8}); });*/ + /* setup comment textarea buttons */ + + $('[data-role="insert-formatting"]').on('click', function(e) { + e.preventDefault(); + var o = $(this); + var comment = o.data('comment'); + var bbcode = o.data('bbcode'); + var id = o.data('id'); + if (bbcode=="img") { + $.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#comment-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'}) + return; + } + + insertFormatting(comment, bbcode, id); + }); + + /* event from comment textarea button popups */ + /* insert returned bbcode at cursor position or replace selected text */ + $("body").on("fbrowser.image.comment", function(e, filename, bbcode, id) { + console.log("on", id); + $.colorbox.close(); + var textarea = document.getElementById("comment-edit-text-" +id); + var start = textarea.selectionStart; + var end = textarea.selectionEnd; + textarea.value = textarea.value.substring(0, start) + bbcode + textarea.value.substring(end, textarea.value.length); + }); + /* setup onoff widgets */ diff --git a/view/templates/filebrowser_plain.tpl b/view/templates/filebrowser_plain.tpl index 4d29f60b8f..9b70fbf852 100644 --- a/view/templates/filebrowser_plain.tpl +++ b/view/templates/filebrowser_plain.tpl @@ -4,28 +4,36 @@ --> - + +
{{foreach $path as $p}}{{$p.1}}{{/foreach}}
+ {{if $folders }}
    {{foreach $folders as $f}}
  • {{$f.1}}
    • {{/foreach}}
+ {{/if}} - {{foreach $files as $f}} -
- - -

{{$f.1}}

- +
+ {{foreach $files as $f}} +
+ + +

{{$f.1}}

+ +
+ {{/foreach}}
-
- {{/foreach}}
@@ -33,54 +41,6 @@
- - - diff --git a/view/templates/jot-header.tpl b/view/templates/jot-header.tpl index 5f498e706f..c4934f10b6 100644 --- a/view/templates/jot-header.tpl +++ b/view/templates/jot-header.tpl @@ -142,11 +142,11 @@ function enableOnUser(){ **/ /* callback */ - $('body').on('fbrowser.image', function(e, filename, embedcode) { + $('body').on('fbrowser.image', function(e, filename, embedcode, id) { $.colorbox.close(); addeditortext(embedcode); }); - $('body').on('fbrowser.file', function(e, filename, embedcode) { + $('body').on('fbrowser.file', function(e, filename, embedcode, id) { $.colorbox.close(); addeditortext(embedcode); }); diff --git a/view/theme/dispy/templates/comment_item.tpl b/view/theme/dispy/templates/comment_item.tpl index b9462e0a7a..9af0254546 100644 --- a/view/theme/dispy/templates/comment_item.tpl +++ b/view/theme/dispy/templates/comment_item.tpl @@ -16,28 +16,28 @@
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}">
diff --git a/view/theme/frost-mobile/templates/comment_item.tpl b/view/theme/frost-mobile/templates/comment_item.tpl index bd3e57716d..11aa31116a 100644 --- a/view/theme/frost-mobile/templates/comment_item.tpl +++ b/view/theme/frost-mobile/templates/comment_item.tpl @@ -31,28 +31,28 @@
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"> {{**}} + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}">-->*}}
{{**}} {{**}} diff --git a/view/theme/frost/templates/comment_item.tpl b/view/theme/frost/templates/comment_item.tpl index 34eade3585..56adbb1af3 100644 --- a/view/theme/frost/templates/comment_item.tpl +++ b/view/theme/frost/templates/comment_item.tpl @@ -30,28 +30,28 @@
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}">
{{**}} {{**}} diff --git a/view/theme/quattro/templates/comment_item.tpl b/view/theme/quattro/templates/comment_item.tpl index d3d5c46320..20417c1e18 100644 --- a/view/theme/quattro/templates/comment_item.tpl +++ b/view/theme/quattro/templates/comment_item.tpl @@ -15,34 +15,33 @@ class="comment-edit-bb">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}">
    • + data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"> + onFocus="commentOpen(this,{{$id}}) && cmtBbOpen({{$id}});" >{{$comment}} {{if $qcomment}}