From e0ce612031f8db0e50af08a343cb54545d6011b0 Mon Sep 17 00:00:00 2001 From: tobes Date: Tue, 18 Sep 2012 18:07:09 +0100 Subject: [PATCH] Data preview now uses new style module for outer iframe scripts --- ckan/public/base/datapreview/resource.config | 4 - .../base/javascript/modules/data-viewer.js | 37 +++ ckan/public/base/javascript/resource.config | 1 + .../vendor/resize => vendor}/resize.js | 0 ckan/public/base/vendor/resource.config | 1 + .../{base/datapreview => scripts}/outside.js | 0 ckan/public/scripts/vendor/resize/resize.js | 247 ++++++++++++++++++ ckan/templates/package/resource_read.html | 5 - .../package/snippets/data_preview.html | 2 +- .../package/resource_read.html | 4 +- 10 files changed, 289 insertions(+), 12 deletions(-) create mode 100644 ckan/public/base/javascript/modules/data-viewer.js rename ckan/public/base/{datapreview/vendor/resize => vendor}/resize.js (100%) rename ckan/public/{base/datapreview => scripts}/outside.js (100%) create mode 100644 ckan/public/scripts/vendor/resize/resize.js diff --git a/ckan/public/base/datapreview/resource.config b/ckan/public/base/datapreview/resource.config index 9e98e9ba46a..42985518963 100644 --- a/ckan/public/base/datapreview/resource.config +++ b/ckan/public/base/datapreview/resource.config @@ -33,7 +33,3 @@ datapreview = vendor/recline/css/recline.css css/datapreview.css - -datapreview-frame = - vendor/resize/resize.js - outside.js diff --git a/ckan/public/base/javascript/modules/data-viewer.js b/ckan/public/base/javascript/modules/data-viewer.js new file mode 100644 index 00000000000..c3846763b46 --- /dev/null +++ b/ckan/public/base/javascript/modules/data-viewer.js @@ -0,0 +1,37 @@ +// data viewer module +// resizes the iframe when the content is loaded +this.ckan.module('data-viewer', function (jQuery, _) { + return { + initialize: function () { + jQuery.proxyAll(this, /_on/); + this.el.on('load', this._onLoad); + this._FirefoxFix(); + }, + + _onLoad: function() { + this._recalibrate(); + var that = this; + this.el.contents().find('body').resize(function() { + that._recalibrate(); + }); + }, + + _recalibrate: function() { + // save reference to this to use in timeout + var that = this; + resizeTimer = setTimeout(function() { + var height = that.el.contents().height(); + that.el.animate({height: height}, height); + }, 100); + }, + + // firefox caches iframes so force it to get fresh content + _FirefoxFix: function() { + if(/#$/.test(this.el.src)){ + this.el.src = this.el.src.substr(0, this.src.length - 1); + } else { + this.el.src = this.el.src + '#'; + } + } + }; +}); diff --git a/ckan/public/base/javascript/resource.config b/ckan/public/base/javascript/resource.config index 3af45427c83..05195049cc8 100644 --- a/ckan/public/base/javascript/resource.config +++ b/ckan/public/base/javascript/resource.config @@ -41,3 +41,4 @@ main = modules/autocomplete.js modules/custom-fields.js modules/related-item.js + modules/data-viewer.js diff --git a/ckan/public/base/datapreview/vendor/resize/resize.js b/ckan/public/base/vendor/resize.js similarity index 100% rename from ckan/public/base/datapreview/vendor/resize/resize.js rename to ckan/public/base/vendor/resize.js diff --git a/ckan/public/base/vendor/resource.config b/ckan/public/base/vendor/resource.config index 9e711134c9f..6936a10a5c3 100644 --- a/ckan/public/base/vendor/resource.config +++ b/ckan/public/base/vendor/resource.config @@ -30,6 +30,7 @@ vendor = jquery.js vendor = jed.js html5.js + resize.js select2/select2.js select2/select2.css bootstrap/js/bootstrap-transition.js diff --git a/ckan/public/base/datapreview/outside.js b/ckan/public/scripts/outside.js similarity index 100% rename from ckan/public/base/datapreview/outside.js rename to ckan/public/scripts/outside.js diff --git a/ckan/public/scripts/vendor/resize/resize.js b/ckan/public/scripts/vendor/resize/resize.js new file mode 100644 index 00000000000..325c5e1601d --- /dev/null +++ b/ckan/public/scripts/vendor/resize/resize.js @@ -0,0 +1,247 @@ + +/*! + * jQuery resize event - v1.1 - 3/14/2010 + * http://benalman.com/projects/jquery-resize-plugin/ + * + * Copyright (c) 2010 "Cowboy" Ben Alman + * Dual licensed under the MIT and GPL licenses. + * http://benalman.com/about/license/ + */ + +// Script: jQuery resize event +// +// *Version: 1.1, Last updated: 3/14/2010* +// +// Project Home - http://benalman.com/projects/jquery-resize-plugin/ +// GitHub - http://github.com/cowboy/jquery-resize/ +// Source - http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js +// (Minified) - http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.min.js (1.0kb) +// +// About: License +// +// Copyright (c) 2010 "Cowboy" Ben Alman, +// Dual licensed under the MIT and GPL licenses. +// http://benalman.com/about/license/ +// +// About: Examples +// +// This working example, complete with fully commented code, illustrates a few +// ways in which this plugin can be used. +// +// resize event - http://benalman.com/code/projects/jquery-resize/examples/resize/ +// +// About: Support and Testing +// +// Information about what version or versions of jQuery this plugin has been +// tested with, what browsers it has been tested in, and where the unit tests +// reside (so you can test it yourself). +// +// jQuery Versions - 1.3.2, 1.4.1, 1.4.2 +// Browsers Tested - Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1. +// Unit Tests - http://benalman.com/code/projects/jquery-resize/unit/ +// +// About: Release History +// +// 1.1 - (3/14/2010) Fixed a minor bug that was causing the event to trigger +// immediately after bind in some circumstances. Also changed $.fn.data +// to $.data to improve performance. +// 1.0 - (2/10/2010) Initial release + +(function($,window,undefined){ + '$:nomunge'; // Used by YUI compressor. + + // A jQuery object containing all non-window elements to which the resize + // event is bound. + var elems = $([]), + + // Extend $.resize if it already exists, otherwise create it. + jq_resize = $.resize = $.extend( $.resize, {} ), + + timeout_id, + + // Reused strings. + str_setTimeout = 'setTimeout', + str_resize = 'resize', + str_data = str_resize + '-special-event', + str_delay = 'delay', + str_throttle = 'throttleWindow'; + + // Property: jQuery.resize.delay + // + // The numeric interval (in milliseconds) at which the resize event polling + // loop executes. Defaults to 250. + + jq_resize[ str_delay ] = 250; + + // Property: jQuery.resize.throttleWindow + // + // Throttle the native window object resize event to fire no more than once + // every milliseconds. Defaults to true. + // + // Because the window object has its own resize event, it doesn't need to be + // provided by this plugin, and its execution can be left entirely up to the + // browser. However, since certain browsers fire the resize event continuously + // while others do not, enabling this will throttle the window resize event, + // making event behavior consistent across all elements in all browsers. + // + // While setting this property to false will disable window object resize + // event throttling, please note that this property must be changed before any + // window object resize event callbacks are bound. + + jq_resize[ str_throttle ] = true; + + // Event: resize event + // + // Fired when an element's width or height changes. Because browsers only + // provide this event for the window element, for other elements a polling + // loop is initialized, running every milliseconds + // to see if elements' dimensions have changed. You may bind with either + // .resize( fn ) or .bind( "resize", fn ), and unbind with .unbind( "resize" ). + // + // Usage: + // + // > jQuery('selector').bind( 'resize', function(e) { + // > // element's width or height has changed! + // > ... + // > }); + // + // Additional Notes: + // + // * The polling loop is not created until at least one callback is actually + // bound to the 'resize' event, and this single polling loop is shared + // across all elements. + // + // Double firing issue in jQuery 1.3.2: + // + // While this plugin works in jQuery 1.3.2, if an element's event callbacks + // are manually triggered via .trigger( 'resize' ) or .resize() those + // callbacks may double-fire, due to limitations in the jQuery 1.3.2 special + // events system. This is not an issue when using jQuery 1.4+. + // + // > // While this works in jQuery 1.4+ + // > $(elem).css({ width: new_w, height: new_h }).resize(); + // > + // > // In jQuery 1.3.2, you need to do this: + // > var elem = $(elem); + // > elem.css({ width: new_w, height: new_h }); + // > elem.data( 'resize-special-event', { width: elem.width(), height: elem.height() } ); + // > elem.resize(); + + $.event.special[ str_resize ] = { + + // Called only when the first 'resize' event callback is bound per element. + setup: function() { + // Since window has its own native 'resize' event, return false so that + // jQuery will bind the event using DOM methods. Since only 'window' + // objects have a .setTimeout method, this should be a sufficient test. + // Unless, of course, we're throttling the 'resize' event for window. + if ( !jq_resize[ str_throttle ] && this[ str_setTimeout ] ) { return false; } + + var elem = $(this); + + // Add this element to the list of internal elements to monitor. + elems = elems.add( elem ); + + // Initialize data store on the element. + $.data( this, str_data, { w: elem.width(), h: elem.height() } ); + + // If this is the first element added, start the polling loop. + if ( elems.length === 1 ) { + loopy(); + } + }, + + // Called only when the last 'resize' event callback is unbound per element. + teardown: function() { + // Since window has its own native 'resize' event, return false so that + // jQuery will unbind the event using DOM methods. Since only 'window' + // objects have a .setTimeout method, this should be a sufficient test. + // Unless, of course, we're throttling the 'resize' event for window. + if ( !jq_resize[ str_throttle ] && this[ str_setTimeout ] ) { return false; } + + var elem = $(this); + + // Remove this element from the list of internal elements to monitor. + elems = elems.not( elem ); + + // Remove any data stored on the element. + elem.removeData( str_data ); + + // If this is the last element removed, stop the polling loop. + if ( !elems.length ) { + clearTimeout( timeout_id ); + } + }, + + // Called every time a 'resize' event callback is bound per element (new in + // jQuery 1.4). + add: function( handleObj ) { + // Since window has its own native 'resize' event, return false so that + // jQuery doesn't modify the event object. Unless, of course, we're + // throttling the 'resize' event for window. + if ( !jq_resize[ str_throttle ] && this[ str_setTimeout ] ) { return false; } + + var old_handler; + + // The new_handler function is executed every time the event is triggered. + // This is used to update the internal element data store with the width + // and height when the event is triggered manually, to avoid double-firing + // of the event callback. See the "Double firing issue in jQuery 1.3.2" + // comments above for more information. + + function new_handler( e, w, h ) { + var elem = $(this), + data = $.data( this, str_data ); + + // If called from the polling loop, w and h will be passed in as + // arguments. If called manually, via .trigger( 'resize' ) or .resize(), + // those values will need to be computed. + data.w = w !== undefined ? w : elem.width(); + data.h = h !== undefined ? h : elem.height(); + + old_handler.apply( this, arguments ); + }; + + // This may seem a little complicated, but it normalizes the special event + // .add method between jQuery 1.4/1.4.1 and 1.4.2+ + if ( $.isFunction( handleObj ) ) { + // 1.4, 1.4.1 + old_handler = handleObj; + return new_handler; + } else { + // 1.4.2+ + old_handler = handleObj.handler; + handleObj.handler = new_handler; + } + } + + }; + + function loopy() { + + // Start the polling loop, asynchronously. + timeout_id = window[ str_setTimeout ](function(){ + + // Iterate over all elements to which the 'resize' event is bound. + elems.each(function(){ + var elem = $(this), + width = elem.width(), + height = elem.height(), + data = $.data( this, str_data ); + + // If element size has changed since the last time, update the element + // data store and trigger the 'resize' event. + if ( width !== data.w || height !== data.h ) { + elem.trigger( str_resize, [ data.w = width, data.h = height ] ); + } + + }); + + // Loop. + loopy(); + + }, jq_resize[ str_delay ] ); + + }; + +})(jQuery,this); diff --git a/ckan/templates/package/resource_read.html b/ckan/templates/package/resource_read.html index 383741a8415..b2e67fc0a9c 100644 --- a/ckan/templates/package/resource_read.html +++ b/ckan/templates/package/resource_read.html @@ -115,8 +115,3 @@

Resource I {% snippet "snippets/social.html" %} {% endblock %} {% endblock %} - -{% block scripts %} - {{ super() }} - {% resource 'datapreview/datapreview-frame' %} -{% endblock %} diff --git a/ckan/templates/package/snippets/data_preview.html b/ckan/templates/package/snippets/data_preview.html index 57790a88680..ba64d9813a0 100644 --- a/ckan/templates/package/snippets/data_preview.html +++ b/ckan/templates/package/snippets/data_preview.html @@ -3,7 +3,7 @@ {# images can be embedded directly #} {% else %} - {% endif %} diff --git a/ckan/templates_legacy/package/resource_read.html b/ckan/templates_legacy/package/resource_read.html index 06fb7515a93..d1679133623 100644 --- a/ckan/templates_legacy/package/resource_read.html +++ b/ckan/templates_legacy/package/resource_read.html @@ -179,8 +179,8 @@

Additional Information

- - + +