]> git.mxchange.org Git - friendica.git/commitdiff
js: add new Dialog object
authorfabrixxm <fabrix.xm@gmail.com>
Sun, 8 Nov 2015 11:01:19 +0000 (12:01 +0100)
committerfabrixxm <fabrix.xm@gmail.com>
Sun, 8 Nov 2015 11:01:19 +0000 (12:01 +0100)
The Dialog is used by code to show urls in colorbox.
Templates can overwrite `show()` function to change its behaviour

js/filebrowser.js
js/main.js
view/templates/jot-header.tpl

index 66db2833c3071b0e8d27cb5bc06579babc30db05..78cee0e77ed8f7349d4ca434ea60a338cc4e859e 100644 (file)
@@ -1,7 +1,7 @@
 /**\r
  * Filebrowser - Friendica Communications Server\r
  *\r
- * Copyright (c) 2010-2013 the Friendica Project\r
+ * Copyright (c) 2010-2015 the Friendica Project\r
  *\r
  * This program is free software: you can redistribute it and/or modify\r
  * it under the terms of the GNU Affero General Public License as published by\r
  *\r
  * To load filebrowser in colorbox, call\r
  *\r
- *     $.colorbox({href: ulr, iframe:true,innerWidth:'500px',innerHeight:'400px'})\r
+ *      Dialog.doImageBrowser(eventname, id);\r
  *\r
- * where url is:\r
+ * or\r
  *\r
- *             <baseurl>/fbrowser/<type>/?mode=minimal[#<eventname>-<id>]\r
+ *      Dialog.doFileBrowser(eventname, id);\r
+ *\r
+ * where:\r
  *\r
- *             baseurl: baseurl from friendica\r
- *             type: one of "image", "file"\r
  *             eventname: event name to catch return value\r
  *             id: id returned to event handler\r
  *\r
- *     When user select an item, an event in fired in parent page, on body element\r
- *     The event is named\r
+ * When user select an item, an event in fired in parent page, on body element\r
+ * The event is named\r
  *\r
  *             fbrowser.<type>.[<eventname>]\r
  *\r
- *     with params:\r
+ * <type> will be one of "image" or "file", and the event handler will\r
+ * get the following params:\r
  *\r
  *             filemane: filename of item choosed by user\r
  *             embed: bbcode to embed element into posts\r
- *             id: id from url\r
+ *             id: id from caller code\r
  *\r
- *  example:\r
+ * example:\r
  *\r
- *     // open dialog for select an image for a textarea with id "myeditor"\r
- *             var id="myeditor";\r
- *             $.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#example-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'})\r
+ *             // open dialog for select an image for a textarea with id "myeditor"\r
+ *             var id="myeditor";\r
+ *             Dialog.doImageBrowser("example", id);\r
  *\r
  *             // setup event handler to get user selection\r
  *             $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {\r
index e1e852cbaf655935fce69142f87ca02c642e5c86..d28133f03f7cda716c33aee27d9b042d8a430b25 100644 (file)
@@ -4,20 +4,20 @@
   }
 
   function openClose(theID) {
-    if(document.getElementById(theID).style.display == "block") { 
-      document.getElementById(theID).style.display = "none" 
+    if(document.getElementById(theID).style.display == "block") {
+      document.getElementById(theID).style.display = "none"
+    }
+    else {
+      document.getElementById(theID).style.display = "block"
     }
-    else { 
-      document.getElementById(theID).style.display = "block" 
-    } 
   }
 
   function openMenu(theID) {
-      document.getElementById(theID).style.display = "block" 
+      document.getElementById(theID).style.display = "block"
   }
 
   function closeMenu(theID) {
-      document.getElementById(theID).style.display = "none" 
+      document.getElementById(theID).style.display = "none"
   }
 
 
                        if (e.hasClass("ttright")) pos="right";
                        e.tipTip({defaultPosition: pos, edgeOffset: 8});
                });*/
-               
+
                /* setup comment textarea buttons */
                /* comment textarea buttons needs some "data-*" attributes to work:
                 *              data-role="insert-formatting" : to mark the element as a formatting button
                 *              data-comment="<string>" : string for "Comment", used by insertFormatting() function
                 *              data-bbcode="<string>" : name of the bbcode element to insert. insertFormatting() will insert it as "[name][/name]"
                 *              data-id="<string>" : id of the comment, used to find other comment-related element, like the textarea
-                * */           
+                * */
                $('body').on('click','[data-role="insert-formatting"]', function(e) {
                        e.preventDefault();
                        var o = $(this);
                        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; 
+                               Dialog.doImageBrowser("comment", id);
+                               return;
                        }
-                       
                        insertFormatting(comment, bbcode, id);
                });
 
                        var end = textarea.selectionEnd;
                        textarea.value = textarea.value.substring(0, start) + bbcode + textarea.value.substring(end, textarea.value.length);
                });
-       
-               
-               
+
+
+
                /* setup onoff widgets */
                $(".onoff input").each(function(){
                        val = $(this).val();
                        id = $(this).attr("id");
                        $("#"+id+"_onoff ."+ (val==0?"on":"off")).addClass("hidden");
-                       
+
                });
                $(".onoff > a").click(function(event){
-                       event.preventDefault(); 
+                       event.preventDefault();
                        var input = $(this).siblings("input");
                        var val = 1-input.val();
                        var id = input.attr("id");
                        input.val(val);
                        //console.log(id);
                });
-               
+
                /* setup field_richtext */
                setupFieldRichtext();
 
                $('html').click(function() {
                        close_last_popup_menu();
                });
-               
+
                // fancyboxes
                $("a.popupbox").colorbox({
                        'inline' : true,
                        'transition' : 'elastic'
                });
-               
+
 
                /* notifications template */
                var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
                var notifications_all = unescape($('<div>').append( $("#nav-notifications-see-all").clone() ).html()); //outerHtml hack
                var notifications_mark = unescape($('<div>').append( $("#nav-notifications-mark-all").clone() ).html()); //outerHtml hack
                var notifications_empty = unescape($("#nav-notifications-menu").html());
-               
+
                /* nav update event  */
                $('nav').bind('nav-update', function(e,data){;
                        var invalid = $(data).find('invalid').text();
                        var home = $(data).find('home').text();
                        if(home == 0) { home = '';  $('#home-update').removeClass('show') } else { $('#home-update').addClass('show') }
                        $('#home-update').html(home);
-                       
+
                        var intro = $(data).find('intro').text();
                        if(intro == 0) { intro = '';  $('#intro-update').removeClass('show') } else { $('#intro-update').addClass('show') }
                        $('#intro-update').html(intro);
                        var mail = $(data).find('mail').text();
                        if(mail == 0) { mail = '';  $('#mail-update').removeClass('show') } else { $('#mail-update').addClass('show') }
                        $('#mail-update').html(mail);
-                       
+
                        var intro = $(data).find('intro').text();
                        if(intro == 0) { intro = '';  $('#intro-update-li').removeClass('show') } else { $('#intro-update-li').addClass('show') }
                        $('#intro-update-li').html(intro);
 
 
                        var eNotif = $(data).find('notif')
-                       
+
                        if (eNotif.children("note").length==0){
                                $("#nav-notifications-menu").html(notifications_empty);
                        } else {
                                                        });
                                                }
                                        }
-                                       
+
                                });
                                notification_lastitem = notification_id;
                                localStorage.setItem("notification-lastitem", notification_lastitem)
                        }
                        if(notif == 0) { notif = ''; $('#notify-update').removeClass('show') } else { $('#notify-update').addClass('show') }
                        $('#notify-update').html(notif);
-                       
+
                        var eSysmsg = $(data).find('sysmsgs');
                        eSysmsg.children("notice").each(function(){
                                text = $(this).text();
                                text = $(this).text();
                                $.jGrowl(text, { sticky: false, theme: 'info', life: 5000 });
                        });
-                       
+
                });
 
-               NavUpdate(); 
+               NavUpdate();
                // Allow folks to stop the ajax page updates with the pause/break key
                $(document).keydown(function(event) {
                        if(event.keyCode == '8') {
                                }
                        }
                });
-               
-               
+
+
        });
 
        function NavUpdate() {
                                $(data).find('result').each(function() {
                                        // send nav-update event
                                        $('nav').trigger('nav-update', this);
-                                       
-                                       
+
+
                                        // start live update
 
                                        if($('#live-network').length)   { src = 'network'; liveUpdate(); }
 /*                                     if($('#live-display').length) {
                                                if(liking) {
                                                        liking = 0;
-                                                       window.location.href=window.location.href 
+                                                       window.location.href=window.location.href
                                                }
                                        }*/
-                                       if($('#live-photos').length) { 
+                                       if($('#live-photos').length) {
                                                if(liking) {
                                                        liking = 0;
-                                                       window.location.href=window.location.href 
+                                                       window.location.href=window.location.href
                                                }
                                        }
 
-                                       
-                                       
-                                       
+
+
+
                                });
                        }) ;
                }
                                                });
                                                $('#' + prev).after($(this));
                                }
-                               else { 
-                                       $('#' + ident + ' ' + '.wall-item-ago').replaceWith($(this).find('.wall-item-ago')); 
+                               else {
+                                       $('#' + ident + ' ' + '.wall-item-ago').replaceWith($(this).find('.wall-item-ago'));
                                        if($('#' + ident + ' ' + '.comment-edit-text-empty').length)
                                                $('#' + ident + ' ' + '.wall-item-comment-wrapper').replaceWith($(this).find('.wall-item-comment-wrapper'));
                                        $('#' + ident + ' ' + '.hide-comments-total').replaceWith($(this).find('.hide-comments-total'));
                                                $(this).attr('src',$(this).attr('dst'));
                                        });
                                }
-                               prev = ident; 
+                               prev = ident;
                        });
                        */
                        $('.like-rotator').hide();
                $(node).removeClass("drop").addClass("drophide");
        }
 
-       // Since our ajax calls are asynchronous, we will give a few 
-       // seconds for the first ajax call (setting like/dislike), then 
+       // Since our ajax calls are asynchronous, we will give a few
+       // seconds for the first ajax call (setting like/dislike), then
        // run the updater to pick up any changes and display on the page.
-       // The updater will turn any rotators off when it's done. 
+       // The updater will turn any rotators off when it's done.
        // This function will have returned long before any of these
        // events have completed and therefore there won't be any
        // visible feedback that anything changed without all this
                commentBusy = true;
                $('body').css('cursor', 'wait');
                $("#comment-preview-inp-" + id).val("0");
-               $.post(  
-             "item",  
-             $("#comment-edit-form-" + id).serialize(),
+               $.post(
+                       "item",
+                       $("#comment-edit-form-" + id).serialize(),
                        function(data) {
                                if(data.success) {
                                        $("#comment-edit-wrapper-" + id).hide();
                                        $("#comment-edit-text-" + id).val('');
-                               var tarea = document.getElementById("comment-edit-text-" + id);
+                                       var tarea = document.getElementById("comment-edit-text-" + id);
                                        if(tarea)
                                                commentClose(tarea,id);
                                        if(timer) clearTimeout(timer);
                                        window.location.href=data.reload;
                                }
                        },
-                       "json"  
-         );  
-         return false;  
+                       "json"
+               );
+               return false;
        }
 
 
        function preview_comment(id) {
                $("#comment-preview-inp-" + id).val("1");
                $("#comment-edit-preview-" + id).show();
-               $.post(  
-             "item",  
-             $("#comment-edit-form-" + id).serialize(),
+               $.post(
+                       "item",
+                       $("#comment-edit-form-" + id).serialize(),
                        function(data) {
                                if(data.preview) {
-                                               
                                        $("#comment-edit-preview-" + id).html(data.preview);
                                        $("#comment-edit-preview-" + id + " a").click(function() { return false; });
                                }
                        },
-                       "json"  
-         );  
-         return true;  
+                       "json"
+               );
+               return true;
        }
 
 
                $("#jot-preview").val("1");
                $("#jot-preview-content").show();
                tinyMCE.triggerSave();
-               $.post(  
-                       "item",  
+               $.post(
+                       "item",
                        $("#profile-jot-form").serialize(),
                        function(data) {
-                               if(data.preview) {                      
+                               if(data.preview) {
                                        $("#jot-preview-content").html(data.preview);
                                        $("#jot-preview-content" + " a").click(function() { return false; });
                                }
                        },
-                       "json"  
-               );  
+                       "json"
+               );
                $("#jot-preview").val("0");
-               return true;  
+               return true;
        }
 
 
                // unpause auto reloads if they are currently stopped
                totStopped = false;
                stopped = false;
-           $('#pause').html('');
+               $('#pause').html('');
        }
-               
-
-    function bin2hex(s){  
-        // Converts the binary representation of data to hex    
-        //   
-        // version: 812.316  
-        // discuss at: http://phpjs.org/functions/bin2hex  
-        // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)  
-        // +   bugfixed by: Onno Marsman  
-        // +   bugfixed by: Linuxworld  
-        // *     example 1: bin2hex('Kev');  
-        // *     returns 1: '4b6576'  
-        // *     example 2: bin2hex(String.fromCharCode(0x00));  
-        // *     returns 2: '00'  
-        var v,i, f = 0, a = [];  
-        s += '';  
-        f = s.length;  
-          
-        for (i = 0; i<f; i++) {  
-            a[i] = s.charCodeAt(i).toString(16).replace(/^([\da-f])$/,"0$1");  
-        }  
-          
-        return a.join('');  
-    }  
+
+
+    function bin2hex(s){
+        // Converts the binary representation of data to hex
+        //
+        // version: 812.316
+        // discuss at: http://phpjs.org/functions/bin2hex
+        // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+        // +   bugfixed by: Onno Marsman
+        // +   bugfixed by: Linuxworld
+        // *     example 1: bin2hex('Kev');
+        // *     returns 1: '4b6576'
+        // *     example 2: bin2hex(String.fromCharCode(0x00));
+        // *     returns 2: '00'
+        var v,i, f = 0, a = [];
+        s += '';
+        f = s.length;
+
+        for (i = 0; i<f; i++) {
+            a[i] = s.charCodeAt(i).toString(16).replace(/^([\da-f])$/,"0$1");
+        }
+
+        return a.join('');
+    }
 
        function groupChangeMember(gid, cid, sec_token) {
                $('body .fakelink').css('cursor', 'wait');
                $.get('group/' + gid + '/' + cid + "?t=" + sec_token, function(data) {
                                $('#group-update-wrapper').html(data);
-                               $('body .fakelink').css('cursor', 'auto');                              
+                               $('body .fakelink').css('cursor', 'auto');
                });
        }
 
                $('body .fakelink').css('cursor', 'wait');
                $.get('profperm/' + gid + '/' + cid, function(data) {
                                $('#prof-update-wrapper').html(data);
-                               $('body .fakelink').css('cursor', 'auto');                              
+                               $('body .fakelink').css('cursor', 'auto');
                });
        }
 
@@ -784,9 +782,9 @@ function setupFieldRichtext(){
 }
 
 
-/** 
- * sprintf in javascript 
- *     "{0} and {1}".format('zero','uno'); 
+/**
+ * sprintf in javascript
+ *     "{0} and {1}".format('zero','uno');
  **/
 String.prototype.format = function() {
     var formatted = this;
@@ -826,3 +824,68 @@ function getNotificationPermission() {
         return Notification.permission;
     }
 }
+
+/**
+ * Show a dialog loaded from an url
+ * By defaults this load the url in an iframe in colorbox
+ * Themes can overwrite `show()` function to personalize it
+ */
+var Dialog = {
+       /**
+        * Show the dialog
+        *
+        * @param string url
+        * @return object colorbox
+        */
+       show : function (url) {
+               var size = Dialog._get_size();
+               return $.colorbox({href: url, iframe:true,innerWidth: size.width+'px',innerHeight: size.height+'px'})
+       },
+
+       /**
+        * Show the Image browser dialog
+        *
+        * @param string name
+        * @param string id (optional)
+        * @return object
+        *
+        * The name will be used to build the event name
+        * fired by image browser dialog when the user select
+        * an image. The optional id will be passed as argument
+        * to the event handler
+        */
+       doImageBrowser : function (name, id) {
+               var url = Dialog._get_url("image",name,id);
+               return Dialog.show(url);
+       },
+
+       /**
+        * Show the File browser dialog
+        *
+        * @param string name
+        * @param string id (optional)
+        * @return object
+        *
+        * The name will be used to build the event name
+        * fired by file browser dialog when the user select
+        * a file. The optional id will be passed as argument
+        * to the event handler
+        */
+       doFileBrowser : function (name, id) {
+               var url = Dialog._get_url("image",name,id);
+               return Dialog.show(url);
+       },
+
+       _get_url : function(type, name, id) {
+               var hash = name;
+               if (id !== undefined) hash = hash + "-" + id;
+               return baseurl + "/fbrowser/"+type+"/?mode=minimal#"+hash;
+       },
+
+       _get_size: function() {
+               return {
+                       width: window.innerWidth-50,
+                       height: window.innerHeight-100
+               };
+       }
+}
index cb841c314d5194cb610fc9eff36edf7c7c48b268..647f261c45f668f684201ec1c95c6fc3ec3d1c7b 100644 (file)
@@ -74,7 +74,7 @@ function initEditor(cb){
                                        }
                                        else {
                                                $('#profile-jot-desc').html('&nbsp;');
-                                       }        
+                                       }
 
                                 //Character count
 
@@ -110,7 +110,7 @@ function initEditor(cb){
                $("a#jot-perms-icon").colorbox({
                        'inline' : true,
                        'transition' : 'elastic'
-               }); 
+               });
        } else {
                if (typeof cb!="undefined") cb();
        }
@@ -127,20 +127,20 @@ 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);
 
-               
-               
-               
+
+
+
                /* show images / file browser window
-                * 
+                *
                 **/
-       
+
                /* callback */
                $('body').on('fbrowser.image.main', function(e, filename, embedcode, id) {
                        $.colorbox.close();
@@ -150,16 +150,16 @@ function enableOnUser(){
                        $.colorbox.close();
                        addeditortext(embedcode);
                });
-       
+
                $('#wall-image-upload').on('click', function(){
-                       $.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+                       Dialog.doImageBrowser("main");
                });
-               
+
                $('#wall-file-upload').on('click', function(){
-                       $.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+                       Dialog.doFileBrowser("main");
                });
-               
-               /**     
+
+               /**
                        var uploader = new window.AjaxUpload(
                                'wall-image-upload',
                                { action: 'wall_upload/{{$nickname}}',
@@ -168,7 +168,7 @@ function enableOnUser(){
                                        onComplete: function(file,response) {
                                                addeditortext(response);
                                                $('#profile-rotator').hide();
-                                       }                                
+                                       }
                                }
                        );
                        var file_uploader = new window.AjaxUpload(
@@ -179,10 +179,10 @@ function enableOnUser(){
                                        onComplete: function(file,response) {
                                                addeditortext(response);
                                                $('#profile-rotator').hide();
-                                       }                                
+                                       }
                                }
                        );
-               
+
                }
                **/
        });
@@ -301,9 +301,9 @@ function enableOnUser(){
        }
 
        function itemFiler(id) {
-               
+
                var bordercolor = $("input").css("border-color");
-               
+
                $.get('filer/', function(data){
                        $.colorbox({html:data});
                        $("#id_term").keypress(function(){
@@ -312,7 +312,7 @@ function enableOnUser(){
                        $("#select_term").change(function(){
                                $("#id_term").css("border-color",bordercolor);
                        })
-                       
+
                        $("#filer_save").click(function(e){
                                e.preventDefault();
                                reply = $("#id_term").val();
@@ -345,7 +345,7 @@ function enableOnUser(){
                }
                else
                        tinyMCE.execCommand('mceInsertRawHTML',false,data);
-       }       
+       }
 
        {{$geotag}}