From 0363bab040804fcc9e9cc812d6bcc94db1c19d06 Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Sun, 8 Nov 2015 12:01:19 +0100 Subject: [PATCH] js: add new Dialog object The Dialog is used by code to show urls in colorbox. Templates can overwrite `show()` function to change its behaviour --- js/filebrowser.js | 29 ++-- js/main.js | 249 +++++++++++++++++++++------------- view/templates/jot-header.tpl | 44 +++--- 3 files changed, 193 insertions(+), 129 deletions(-) diff --git a/js/filebrowser.js b/js/filebrowser.js index 66db2833c..78cee0e77 100644 --- a/js/filebrowser.js +++ b/js/filebrowser.js @@ -1,7 +1,7 @@ /** * Filebrowser - Friendica Communications Server * - * Copyright (c) 2010-2013 the Friendica Project + * Copyright (c) 2010-2015 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 @@ -13,33 +13,34 @@ * * To load filebrowser in colorbox, call * - * $.colorbox({href: ulr, iframe:true,innerWidth:'500px',innerHeight:'400px'}) + * Dialog.doImageBrowser(eventname, id); * - * where url is: + * or * - * /fbrowser//?mode=minimal[#-] + * Dialog.doFileBrowser(eventname, id); + * + * where: * - * 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 + * When user select an item, an event in fired in parent page, on body element + * The event is named * * fbrowser..[] * - * with params: + * will be one of "image" or "file", and the event handler will + * get the following params: * * filemane: filename of item choosed by user * embed: bbcode to embed element into posts - * id: id from url + * id: id from caller code * - * example: + * 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'}) + * // open dialog for select an image for a textarea with id "myeditor" + * var id="myeditor"; + * Dialog.doImageBrowser("example", id); * * // setup event handler to get user selection * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { diff --git a/js/main.js b/js/main.js index e1e852cba..d28133f03 100644 --- a/js/main.js +++ b/js/main.js @@ -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" } @@ -50,14 +50,14 @@ 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 for "Comment", used by insertFormatting() function * data-bbcode="" : name of the bbcode element to insert. insertFormatting() will insert it as "[name][/name]" * data-id="" : 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); @@ -65,10 +65,9 @@ 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); }); @@ -82,18 +81,18 @@ 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"); @@ -102,7 +101,7 @@ input.val(val); //console.log(id); }); - + /* setup field_richtext */ setupFieldRichtext(); @@ -139,20 +138,20 @@ $('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($('
').append( $("#nav-notifications-see-all").clone() ).html()); //outerHtml hack var notifications_mark = unescape($('
').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(); @@ -165,7 +164,7 @@ 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); @@ -173,7 +172,7 @@ 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); @@ -206,7 +205,7 @@ var eNotif = $(data).find('notif') - + if (eNotif.children("note").length==0){ $("#nav-notifications-menu").html(notifications_empty); } else { @@ -244,7 +243,7 @@ }); } } - + }); notification_lastitem = notification_id; localStorage.setItem("notification-lastitem", notification_lastitem) @@ -267,7 +266,7 @@ } 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(); @@ -277,10 +276,10 @@ 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') { @@ -306,8 +305,8 @@ } } }); - - + + }); function NavUpdate() { @@ -318,8 +317,8 @@ $(data).find('result').each(function() { // send nav-update event $('nav').trigger('nav-update', this); - - + + // start live update if($('#live-network').length) { src = 'network'; liveUpdate(); } @@ -330,19 +329,19 @@ /* 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 } } - - - + + + }); }) ; } @@ -432,8 +431,8 @@ }); $('#' + 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')); @@ -443,7 +442,7 @@ $(this).attr('src',$(this).attr('dst')); }); } - prev = ident; + prev = ident; }); */ $('.like-rotator').hide(); @@ -467,10 +466,10 @@ $(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 @@ -582,14 +581,14 @@ 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); @@ -600,28 +599,27 @@ 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; } @@ -643,19 +641,19 @@ $("#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; } @@ -663,38 +661,38 @@ // 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 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}}