]> git.mxchange.org Git - friendica.git/commitdiff
Upload/Browse popup for files and images
authorFabrixxm <fabrix.xm@gmail.com>
Tue, 28 Jul 2015 15:20:40 +0000 (17:20 +0200)
committerFabrixxm <fabrix.xm@gmail.com>
Tue, 28 Jul 2015 15:20:40 +0000 (17:20 +0200)
Jot buttons to upload images and files show a popup, where the
user can select a previously uploaded item o upload a new one

mod/fbrowser.php
view/global.css
view/templates/filebrowser.tpl
view/templates/filebrowser_plain.tpl [new file with mode: 0644]
view/templates/jot-header.tpl
view/theme/duepuntozero/style.css
view/theme/quattro/dark/style.css
view/theme/quattro/green/style.css
view/theme/quattro/lilac/style.css
view/theme/quattro/quattro.less
view/theme/vier/style.css

index 075846e50631e5cf577bca02bb70d38edb707f49..bf6842faf5f4f423a4bd43607e411548e68d9ae2 100644 (file)
@@ -18,11 +18,18 @@ function fbrowser_content($a){
        if ($a->argc==1)
                killme();
        
+       $template_file = "filebrowser.tpl";
+       $mode = "";
+       if (x($_GET,'mode')) {
+               $template_file = "filebrowser_plain.tpl";
+               $mode  = "?mode=".$_GET['mode'];
+       }
+       
        //echo "<pre>"; var_dump($a->argv); killme();   
        
        switch($a->argv[1]){
                case "image":
-                       $path = array( array($a->get_baseurl()."/fbrowser/image/", t("Photos")));
+                       $path = array( array($a->get_baseurl()."/fbrowser/image/".$mode, t("Photos")));
                        $albums = false;
                        $sql_extra = "";
                        $sql_extra2 = " ORDER BY created DESC LIMIT 0, 10";
@@ -32,8 +39,8 @@ function fbrowser_content($a){
                                        intval(local_user())
                                );
                                // anon functions only from 5.3.0... meglio tardi che mai..
-                               function folder1($el){return array(bin2hex($el['album']),$el['album']);}        
-                               $albums = array_map( "folder1" , $albums);
+                               $folder1 = function($el) use ($mode) {return array(bin2hex($el['album']).$mode,$el['album']);};
+                               $albums = array_map( $folder1 , $albums);
                                
                        }
                        
@@ -42,7 +49,7 @@ function fbrowser_content($a){
                                $album = hex2bin($a->argv[2]);
                                $sql_extra = sprintf("AND `album` = '%s' ",dbesc($album));
                                $sql_extra2 = "";
-                               $path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/", $album);
+                               $path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/".$mode, $album);
                        }
                                
                        $r = q("SELECT `resource-id`, `id`, `filename`, type, min(`scale`) AS `hiq`,max(`scale`) AS `loq`, `desc`  
@@ -71,14 +78,16 @@ function fbrowser_content($a){
                        }
                        $files = array_map("files1", $r);
                        
-                       $tpl = get_markup_template("filebrowser.tpl");
-                       echo replace_macros($tpl, array(
+                       $tpl = get_markup_template($template_file);
+                       
+                       $o =  replace_macros($tpl, array(
                                '$type' => 'image',
                                '$baseurl' => $a->get_baseurl(),
                                '$path' => $path,
                                '$folders' => $albums,
                                '$files' =>$files,
                                '$cancel' => t('Cancel'),
+                               '$nickname' => $a->user['nickname'],
                        ));
                                
                                
@@ -106,14 +115,15 @@ function fbrowser_content($a){
                                //echo "<pre>"; var_dump($files); killme();
                        
                                                        
-                               $tpl = get_markup_template("filebrowser.tpl");
-                               echo replace_macros($tpl, array(
+                               $tpl = get_markup_template($template_file);
+                               $o = replace_macros($tpl, array(
                                        '$type' => 'file',
                                        '$baseurl' => $a->get_baseurl(),
-                                       '$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Files")) ),
+                                       '$path' => array( array($a->get_baseurl()."/fbrowser/file/", t("Files")) ),
                                        '$folders' => false,
                                        '$files' =>$files,
                                        '$cancel' => t('Cancel'),
+                                       '$nickname' => $a->user['nickname'],
                                ));
                                
                        }
@@ -121,7 +131,12 @@ function fbrowser_content($a){
                        break;
        }
        
-
-       killme();
+       if (x($_GET,'mode')) {
+               return $o;
+       } else {
+               echo $o;
+               killme();
+       }
+       
        
 }
index 9bcd30229633fdaad828451efcee5293c13189c2..dd41b9935a49064a0a802bf53bf46988a0e4a7b1 100644 (file)
@@ -176,4 +176,20 @@ span.oembed, h4 {
 }
 
 /* notifications unseen */
-.notify-unseen { background-color: #cceeFF; }
\ No newline at end of file
+.notify-unseen { background-color: #cceeFF; }
+
+
+/* plain text editor upload/select popup */
+\r
+.fbrowser .path a { padding: 5px; }\r
+.fbrowser .path a:before { content: "/"; padding-right: 5px;}
+.fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
+.fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; }\r
+.fbrowser.image .photo-album-image-wrapper { float: left; }\r
+.fbrowser.image a img { height: 48px; }
+.fbrowser.image a p { display: none;}\r
+.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; }\r
+.fbrowser.file img { display: inline; }\r
+.fbrowser.file p  { display: inline; white-space: nowrap; }
+\r
+.fbrowser .upload { clear: both; padding-top: 1em;}
\ No newline at end of file
index b207277a7b6cf9d788e9bdbc246e04dc483c2cc8..2122e27fc9f54f10c791e8c3c5a932c2ae46d429 100644 (file)
@@ -1,6 +1,9 @@
-
 <!DOCTYPE html>
 <html>
+       <!--
+               This is the template used by mod/fbrowser.php when is called from TinyMCE rich editor.
+               See also 'filebrowser_plain.tpl'
+       -->
        <head>
        <script type="text/javascript" src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
        <style>
@@ -65,7 +68,7 @@
                        </div>
                        <div class="filebrowser folders">
                                <ul>
-                                       {{foreach $folders as $f}}<li><a href="{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}}
+                                       {{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}}
                                </ul>
                        </div>
                        <div class="filebrowser files {{$type}}">
diff --git a/view/templates/filebrowser_plain.tpl b/view/templates/filebrowser_plain.tpl
new file mode 100644 (file)
index 0000000..4d29f60
--- /dev/null
@@ -0,0 +1,86 @@
+       <!--
+               This is the template used by mod/fbrowser.php when is called from plain text editor.
+               See also 'filebrowser.tpl'
+       -->
+
+<script type="text/javascript" src="{{$baseurl}}/js/ajaxupload.js" ></script>
+
+<div class="fbrowser {{$type}}">
+
+       <div class="path">
+               {{foreach $path as $p}}<a href="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
+       </div>
+       
+       <div class="folders">
+               <ul>
+                       {{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
+               </ul>
+       </div>
+               
+       {{foreach $files as $f}}
+       <div class="photo-album-image-wrapper">
+               <a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
+                       <img src="{{$f.2}}">
+                       <p>{{$f.1}}</p>
+               </a>
+       </div>
+       <div class="photo-album-image-wrapper-end"></div>
+       {{/foreach}}
+
+       <div class="upload">
+               <button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button> 
+       </dksiv>
+</div>
+
+
+
+       <script>
+               $(".photo-album-photo-link").on('click', function(e){
+                       e.preventDefault();
+                       
+                       {{if $type == "image"}}
+                       var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
+                       {{/if}}
+                       {{if $type == "file"}}
+                       var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img] "+this.dataset.filename+"[/url]";
+                       {{/if}}
+                       console.log(this.dataset.filename, embed, parent.$("body"));
+                       parent.$("body").trigger("fbrowser.{{$type}}", [
+                               this.dataset.filename,
+                               embed,
+                       ]);
+                       
+               });
+               
+               if ($("#upload-image").length)
+                       var image_uploader = new window.AjaxUpload(
+                               'upload-image',
+                               { action: 'wall_upload/{{$nickname}}',
+                                       name: 'userfile',
+                                       onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+                                       onComplete: function(file,response) {
+                                               location = baseurl + "/fbrowser/image/?mode=minimal";
+                                               location.reload(true);
+                                       }                                
+                               }
+                       );
+
+               if ($("#upload-file").length)
+                       var file_uploader = new window.AjaxUpload(
+                               'upload-file',
+                               { action: 'wall_attach/{{$nickname}}',
+                                       name: 'userfile',
+                                       onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+                                       onComplete: function(file,response) {
+                                               location = baseurl + "/fbrowser/file/?mode=minimal";
+                                               location.reload(true);                          }                                
+                               }
+                       );
+               
+               
+
+       </script>
+
+       </body>
+       
+</html>
index 3a67e8bcc40a0a5336b690fff4d4c90d1e72d582..5f498e706fea257016f16c206e3763f4631ff0ee 100644 (file)
@@ -127,38 +127,67 @@ function enableOnUser(){
 <script>
        var ispublic = '{{$ispublic}}';
 
+       
        $(document).ready(function() {
                
                /* enable tinymce on focus and click */
                $("#profile-jot-text").focus(enableOnUser);
                $("#profile-jot-text").click(enableOnUser);
 
-               var uploader = new window.AjaxUpload(
-                       'wall-image-upload',
-                       { action: 'wall_upload/{{$nickname}}',
-                               name: 'userfile',
-                               onSubmit: function(file,ext) { $('#profile-rotator').show(); },
-                               onComplete: function(file,response) {
-                                       addeditortext(response);
-                                       $('#profile-rotator').hide();
-                               }                                
-                       }
-               );
-               var file_uploader = new window.AjaxUpload(
-                       'wall-file-upload',
-                       { action: 'wall_attach/{{$nickname}}',
-                               name: 'userfile',
-                               onSubmit: function(file,ext) { $('#profile-rotator').show(); },
-                               onComplete: function(file,response) {
-                                       addeditortext(response);
-                                       $('#profile-rotator').hide();
-                               }                                
-                       }
-               );
-
-
+               
+               
+               
+               /* show images / file browser window
+                * 
+                **/
+       
+               /* callback */
+               $('body').on('fbrowser.image', function(e, filename, embedcode) {
+                       $.colorbox.close();
+                       addeditortext(embedcode);
+               });
+               $('body').on('fbrowser.file', function(e, filename, embedcode) {
+                       $.colorbox.close();
+                       addeditortext(embedcode);
+               });
+       
+               $('#wall-image-upload').on('click', function(){
+                       $.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+               });
+               
+               $('#wall-file-upload').on('click', function(){
+                       $.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+               });
+               
+               /**     
+                       var uploader = new window.AjaxUpload(
+                               'wall-image-upload',
+                               { action: 'wall_upload/{{$nickname}}',
+                                       name: 'userfile',
+                                       onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+                                       onComplete: function(file,response) {
+                                               addeditortext(response);
+                                               $('#profile-rotator').hide();
+                                       }                                
+                               }
+                       );
+                       var file_uploader = new window.AjaxUpload(
+                               'wall-file-upload',
+                               { action: 'wall_attach/{{$nickname}}',
+                                       name: 'userfile',
+                                       onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+                                       onComplete: function(file,response) {
+                                               addeditortext(response);
+                                               $('#profile-rotator').hide();
+                                       }                                
+                               }
+                       );
+               
+               }
+               **/
        });
 
+
        function deleteCheckedItems() {
                if(confirm('{{$delitems}}')) {
                        var checkedstr = '';
index 5b1e8392db953f1f5534296aae57ae7c1fe4ad7b..ff108a86319645a67f8e7b91953d770d0ecb7b07 100644 (file)
@@ -1469,6 +1469,7 @@ blockquote.shared_content {
   padding: 10px;
   text-align: center;
   font-size: 1.0em;
+  clear:left;
 }
 
 
@@ -3468,3 +3469,5 @@ ul.menu-popup {
 .videos .video-top-wrapper:hover .video-delete {
   opacity: 1;
 }
+
+
index fe3864c38013a0ac641e1fd67e50278973e549aa..89f3649abf04126acba27e95e244f3fa01b1abc2 100644 (file)
@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
        .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #0e232e;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}
index b0822f9b7b8f2a0af666fda83a78634c0e7e7393..e49a0b16cbd1fbc9022b400d5be139a74fa7af84 100644 (file)
@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
        .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #009100;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}
index 3bfbcd0027e11836f51cf63ff761f04b3fdf19cf..5ea6b40c3bd5b8369a9ef16fdfd12f2e549b777e 100644 (file)
@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
        .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #521f5c;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}
index f876ac1c65b242326512673e472462236fbcdbd9..368e26c3a2858672e981e0eb61ec5cf9666dc0dd 100644 (file)
@@ -1705,3 +1705,28 @@ footer { height: 100px; display: table-row; }
        float: left;
        margin-left: 2px;
 }
+
+/* upload/select popup */
+.fbrowser {
+       overflow: auto;
+       position: absolute;
+       top: 0px;
+       width: 100%;
+       height: 100%;
+}
+.fbrowser .path {
+       background-color: @NavbarBackground;
+       a {     padding: 5px; margin: 0px 2px; display: inline-block; }
+       a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
+}
+.fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;}
+.fbrowser .list { padding: 10px; }
+.fbrowser.image .photo-album-image-wrapper { width: 48px; height: 48px; }
+.fbrowser.image a img { width: auto; height: 48px; }
+.fbrowser.image a p { display: none;}
+.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; width: 100%; height: auto; }
+.fbrowser.file img { display: inline; width: 16px; height: 16px}
+.fbrowser.file p  { display: inline; white-space: nowrap; }
+
+.fbrowser .upload { clear: both; padding-top: 1em;}
+
index 79309e338e8090e9d020d0cfc5de0e9dccb1930a..848a2a419007e9b6f9e389608c332a6e44d53151 100644 (file)
@@ -1109,6 +1109,9 @@ section {
 section.minimal {
   top: 0px;
   left: 0px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
 /* wall item */
@@ -2929,3 +2932,6 @@ a.mail-list-link {
 .videos .video-top-wrapper:hover .video-delete {
   opacity: 1;
 }
+
+/* upload/select popup */
+.fbrowser.image .photo-album-image-wrapper { margin-left: 10px; }