From 1bd6ef7e6b6a56ac30dc4b7b1daa9b924a5eddd7 Mon Sep 17 00:00:00 2001 From: Sem Date: Wed, 1 Aug 2012 14:17:07 +0200 Subject: Colorbox integration into Elgg. --- manifest.xml | 20 ++++++ start.php | 17 ++++++ views/default/css/lightbox.php | 57 +++++++++++++++++ views/default/js/embed/embed.php | 129 +++++++++++++++++++++++++++++++++++++++ views/default/js/lightbox.php | 41 +++++++++++++ 5 files changed, 264 insertions(+) create mode 100644 manifest.xml create mode 100644 start.php create mode 100644 views/default/css/lightbox.php create mode 100644 views/default/js/embed/embed.php create mode 100644 views/default/js/lightbox.php diff --git a/manifest.xml b/manifest.xml new file mode 100644 index 000000000..8f79f9186 --- /dev/null +++ b/manifest.xml @@ -0,0 +1,20 @@ + + + Colorbox + Lorea developers + 1.8 + enhancement + multimedia + Elgg lightbox replacement for Fancybox. Colorbox is the default Elgg lightbox in 1.9. + http://lorea.org + (C) Lorea 2012 + GNU General Public License version 2 + + elgg_release + 1.8 + + + elgg_release + 1.9 + + diff --git a/start.php b/start.php new file mode 100644 index 000000000..9a8efafb0 --- /dev/null +++ b/start.php @@ -0,0 +1,17 @@ + + +/* + * ColorBox - jQuery Plugin + * A lightweight customizable lightbox plugin for jQuery + * + */ + + /* + ColorBox Core Style: + The following CSS is consistent between example themes and should not be altered. +*/ +#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} +#cboxOverlay{position:fixed; width:100%; height:100%;} +#cboxMiddleLeft, #cboxBottomLeft{clear:left;} +#cboxContent{position:relative;} +#cboxLoadedContent{overflow:auto;} +#cboxTitle{margin:0;} +#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} +#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} +.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width: none;} +.cboxIframe{width:100%; height:100%; display:block; border:0;} +#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} + +/* + User Style: + Change the following styles to modify the appearance of ColorBox. They are + ordered & tabbed in a way that represents the nesting of the generated HTML. +*/ +#cboxOverlay{background:#000;} +#colorbox{} + #cboxContent{margin-top:20px;} + .cboxIframe{background:#fff;} + #cboxError{padding:50px; border:1px solid #ccc;} + #cboxLoadedContent{border:5px solid #000; background:#fff;} + #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;} + #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;} + #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} + #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(colorbox/example3/images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;} + #cboxPrevious:hover{background-position:bottom left;} + #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(colorbox/example3/images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;} + #cboxNext:hover{background-position:bottom right;} + #cboxLoadingOverlay{background:#000;} + #cboxLoadingGraphic{background:url(colorbox/example3/images/loading.gif) no-repeat center center;} + #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(colorbox/example3/images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;} + #cboxClose:hover{background-position:bottom center;} diff --git a/views/default/js/embed/embed.php b/views/default/js/embed/embed.php new file mode 100644 index 000000000..b762736c1 --- /dev/null +++ b/views/default/js/embed/embed.php @@ -0,0 +1,129 @@ +elgg.provide('elgg.embed'); + +elgg.embed.init = function() { + + // inserts the embed content into the textarea + $(".embed-item").live('click', elgg.embed.insert); + + // caches the current textarea id + $(".embed-control").live('click', function() { + var textAreaId = /embed-control-(\S)+/.exec($(this).attr('class'))[0]; + elgg.embed.textAreaId = textAreaId.substr("embed-control-".length); + }); + + // special pagination helper for lightbox + $('.embed-wrapper .elgg-pagination a').live('click', elgg.embed.forward); + + $('.embed-section').live('click', elgg.embed.forward); + + $('.elgg-form-embed').live('submit', elgg.embed.submit); +}; + +/** + * Inserts data attached to an embed list item in textarea + * + * @todo generalize lightbox closing + * + * @param {Object} event + * @return void + */ +elgg.embed.insert = function(event) { + var textAreaId = elgg.embed.textAreaId; + var textArea = $('#' + textAreaId); + + // generalize this based on a css class attached to what should be inserted + var content = ' ' + $(this).find(".embed-insert").parent().html() + ' '; + + // this is a temporary work-around for #3971 + if (content.indexOf('thumbnail.php') != -1) { + content = content.replace('size=small', 'size=medium'); + } + + textArea.val(textArea.val() + content); + textArea.focus(); + + + + elgg.ui.lightbox.close(); + + event.preventDefault(); +}; + +/** + * Submit an upload form through Ajax + * + * Requires the jQuery Form Plugin. Because files cannot be uploaded with + * XMLHttpRequest, the plugin uses an invisible iframe. This results in the + * the X-Requested-With header not being set. To work around this, we are + * sending the header as a POST variable and Elgg's code checks for it in + * elgg_is_xhr(). + * + * @param {Object} event + * @return bool + */ +elgg.embed.submit = function(event) { + + $(this).ajaxSubmit({ + dataType : 'json', + data : { 'X-Requested-With' : 'XMLHttpRequest'}, + success : function(response) { + if (response) { + if (response.system_messages) { + elgg.register_error(response.system_messages.error); + elgg.system_message(response.system_messages.success); + } + if (response.status >= 0) { + var forward = $('input[name=embed_forward]').val(); + var url = elgg.normalize_url('embed/tab/' + forward); + url = elgg.embed.addContainerGUID(url); + $('.embed-wrapper').parent().load(url); + } + } + }, + error : function(xhr, status) { + // @todo nothing for now + } + }); + + $('.elgg-form-file-upload').hide(); + $('.embed-throbber').show(); + + // this was bubbling up the DOM causing a submission + event.preventDefault(); + event.stopPropagation(); +}; + +/** + * Loads content within the lightbox + * + * @param {Object} event + * @return void + */ +elgg.embed.forward = function(event) { + // make sure container guid is passed + var url = $(this).attr('href'); + url = elgg.embed.addContainerGUID(url); + + $('.embed-wrapper').parent().load(url); + event.preventDefault(); +}; + +/** + * Adds the container guid to a URL + * + * @param {string} url + * @return string + */ +elgg.embed.addContainerGUID = function(url) { + if (url.indexOf('container_guid=') == -1) { + var guid = $('input[name=embed_container_guid]').val(); + return url + '?container_guid=' + guid; + } else { + return url; + } +}; + +elgg.register_hook_handler('init', 'system', elgg.embed.init); diff --git a/views/default/js/lightbox.php b/views/default/js/lightbox.php new file mode 100644 index 000000000..85fd2b717 --- /dev/null +++ b/views/default/js/lightbox.php @@ -0,0 +1,41 @@ + + +/** + * Lightbox initialization + */ + +elgg.provide('elgg.ui.lightbox'); + +elgg.ui.lightbox.init = function() { + $(".elgg-lightbox").colorbox(); +} + +elgg.ui.lightbox.close = function() { + $.colorbox.close(); +} + +elgg.register_hook_handler('init', 'system', elgg.ui.lightbox.init); + +