You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by jo...@apache.org on 2014/09/01 13:41:06 UTC
[07/29] git commit: AMBARI-7077. Views UI: iframe container for View
should auto expand to fit. (onechiporenko)
AMBARI-7077. Views UI: iframe container for View should auto expand to fit. (onechiporenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/c967511f
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/c967511f
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/c967511f
Branch: refs/heads/branch-alerts-dev
Commit: c967511f7a037468c66c682acda2cdb089e077df
Parents: 248bd72
Author: Oleg Nechiporenko <on...@apache.org>
Authored: Fri Aug 29 15:22:39 2014 +0300
Committer: Oleg Nechiporenko <on...@apache.org>
Committed: Fri Aug 29 15:22:39 2014 +0300
----------------------------------------------------------------------
ambari-web/app/assets/licenses/NOTICE.txt | 4 +-
ambari-web/app/styles/application.less | 1 -
ambari-web/app/views/main/views/details.js | 28 +++
.../jquery.iframe-auto-height.plugin.1.9.5.js | 224 +++++++++++++++++++
4 files changed, 255 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/c967511f/ambari-web/app/assets/licenses/NOTICE.txt
----------------------------------------------------------------------
diff --git a/ambari-web/app/assets/licenses/NOTICE.txt b/ambari-web/app/assets/licenses/NOTICE.txt
index 9be0e09..d317866 100644
--- a/ambari-web/app/assets/licenses/NOTICE.txt
+++ b/ambari-web/app/assets/licenses/NOTICE.txt
@@ -42,4 +42,6 @@ Copyright (c) 2008-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
This product includes Spin.js (http://fgnass.github.com/spin.js/ - MIT license)
Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
-This product includes Moment.js (https://github.com/moment/moment/ - MIT license)
\ No newline at end of file
+This product includes Moment.js (https://github.com/moment/moment/ - MIT license)
+
+This product includes iframeAutoHeight.js (http://github.com/house9/jquery-iframe-auto-height - MIT license)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ambari/blob/c967511f/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index c5ad816..fa85ce6 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -6816,7 +6816,6 @@ i.icon-asterisks {
}
.views_sizes {
width:100%;
- min-height:600px;
border: 0;
}
http://git-wip-us.apache.org/repos/asf/ambari/blob/c967511f/ambari-web/app/views/main/views/details.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/views/details.js b/ambari-web/app/views/main/views/details.js
index 98184ef..93c80f9 100644
--- a/ambari-web/app/views/main/views/details.js
+++ b/ambari-web/app/views/main/views/details.js
@@ -27,6 +27,34 @@ App.MainViewsDetailsView = Em.View.extend({
attributeBindings: ['src','seamless'],
seamless: "seamless",
+ interval: null,
+
+ /**
+ * Drop autoHeight timer
+ */
+ willDestroyElement: function() {
+ var interval = this.get('interval');
+ if (interval) {
+ clearInterval(interval);
+ }
+ },
+
+ /**
+ * For view's iframe do autoHeight with timer
+ * Timer is dropped when user navigates away
+ */
+ didInsertElement: function() {
+ var interval,
+ self = this,
+ timer = function (resizeFunction, iframe) {
+ interval = setInterval(function() {
+ resizeFunction(iframe);
+ }, 100);
+ self.set('interval', interval);
+ };
+ $('iframe').iframeAutoHeight({triggerFunctions: [timer]});
+ },
+
src: function() {
return window.location.origin + this.get('controller.content.href');
}.property('controller.content')
http://git-wip-us.apache.org/repos/asf/ambari/blob/c967511f/ambari-web/vendor/scripts/jquery.iframe-auto-height.plugin.1.9.5.js
----------------------------------------------------------------------
diff --git a/ambari-web/vendor/scripts/jquery.iframe-auto-height.plugin.1.9.5.js b/ambari-web/vendor/scripts/jquery.iframe-auto-height.plugin.1.9.5.js
new file mode 100644
index 0000000..2c8c2d8
--- /dev/null
+++ b/ambari-web/vendor/scripts/jquery.iframe-auto-height.plugin.1.9.5.js
@@ -0,0 +1,224 @@
+/*jslint white: true, indent: 2, onevar: false, browser: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: false, newcap: true, immed: true */
+/*global window, console, jQuery, setTimeout */
+
+/*
+ Plugin: iframe autoheight jQuery Plugin
+ Version: 1.9.5
+ Author and Contributors
+ ========================================
+ NATHAN SMITH (http://sonspring.com/)
+ Jesse House (https://github.com/house9)
+ aaron manela (https://github.com/aaronmanela)
+ Hideki Abe (https://github.com/hideki-a)
+ Patrick Clark (https://github.com/hellopat)
+ ChristineP2 (https://github.com/ChristineP2)
+ Mmjavellana (https://github.com/Mmjavellana)
+ yiqing-95 (https://github.com/yiqing-95)
+ jcaspian (https://github.com/jcaspian)
+ adamjgray (https://github.com/adamjgray)
+ Jens Bissinger (https://github.com/dpree)
+ jbreton (https://github.com/jbreton)
+ mindmelting (https://github.com/mindmelting)
+
+ File: jquery.iframe-auto-height.plugin.js
+ Remarks: original code from http://sonspring.com/journal/jquery-iframe-sizing
+ Description: when the page loads set the height of an iframe based on the height of its contents
+ see README: http://github.com/house9/jquery-iframe-auto-height
+
+*/
+(function ($) {
+ $.fn.iframeAutoHeight = function (spec) {
+
+ var undef;
+ if ($.browser === undef) {
+ var message = [];
+ message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");
+ message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");
+ message.push("Install jquery-browser: https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js");
+ alert(message.join("\n"));
+ return $;
+ }
+
+ // set default option values
+ var options = $.extend({
+ heightOffset: 0,
+ minHeight: 0,
+ maxHeight: 0,
+ callback: function (newHeight) {},
+ animate: false,
+ debug: false,
+ diagnostics: false, // used for development only
+ resetToMinHeight: false,
+ triggerFunctions: [],
+ heightCalculationOverrides: []
+ }, spec);
+
+ // logging
+ function debug(message) {
+ if (options.debug && options.debug === true && window.console) {
+ console.log(message);
+ }
+ }
+
+ // not used by production code
+ function showDiagnostics(iframe, calledFrom) {
+ debug("Diagnostics from '" + calledFrom + "'");
+ try {
+ debug(" " + $(iframe, window.top.document).contents().find('body')[0].scrollHeight + " for ...find('body')[0].scrollHeight");
+ debug(" " + $(iframe.contentWindow.document).height() + " for ...contentWindow.document).height()");
+ debug(" " + $(iframe.contentWindow.document.body).height() + " for ...contentWindow.document.body).height()");
+ } catch (ex) {
+ // ie fails when called during for each, ok later on
+ // probably not an issue if called in a document ready block
+ debug(" unable to check in this state");
+ }
+ debug("End diagnostics -> results vary by browser and when diagnostics are requested");
+ }
+
+ // show all option values
+ debug(options);
+
+ // ******************************************************
+ // iterate over the matched elements passed to the plugin ; return will make it chainable
+ return this.each(function () {
+
+ // ******************************************************
+ // http://api.jquery.com/jQuery.browser/
+ var strategyKeys = ['webkit', 'mozilla', 'msie', 'opera'];
+ var strategies = {};
+ strategies['default'] = function (iframe, $iframeBody, options, browser) {
+ // NOTE: this is how the plugin determines the iframe height, override if you need custom
+ return $iframeBody[0].scrollHeight + options.heightOffset;
+ };
+
+ jQuery.each(strategyKeys, function (index, value) {
+ // use the default strategy for all browsers, can be overridden if desired
+ strategies[value] = strategies['default'];
+ });
+
+ // override strategies if registered in options
+ jQuery.each(options.heightCalculationOverrides, function (index, value) {
+ strategies[value.browser] = value.calculation;
+ });
+
+ function findStrategy(browser) {
+ var strategy = null;
+
+ jQuery.each(strategyKeys, function (index, value) {
+ if (browser[value]) {
+ strategy = strategies[value];
+ return false;
+ }
+ });
+
+ if (strategy === null) {
+ strategy = strategies['default'];
+ }
+
+ return strategy;
+ }
+ // ******************************************************
+
+ // for use by webkit only
+ var loadCounter = 0;
+
+ var iframeDoc = this.contentDocument || this.contentWindow.document;
+
+ // resizeHeight
+ function resizeHeight(iframe) {
+ if (options.diagnostics) {
+ showDiagnostics(iframe, "resizeHeight");
+ }
+
+ // set the iframe size to minHeight so it'll get smaller on resizes in FF and IE
+ if (options.resetToMinHeight && options.resetToMinHeight === true) {
+ iframe.style.height = options.minHeight + 'px';
+ }
+
+ // get the iframe body height and set inline style to that plus a little
+ var $body = $(iframe, window.top.document).contents().find('body');
+ var strategy = findStrategy($.browser);
+ var newHeight = strategy(iframe, $body, options, $.browser);
+ debug(newHeight);
+
+ if (newHeight < options.minHeight) {
+ debug("new height is less than minHeight");
+ newHeight = options.minHeight;
+ }
+
+ if (options.maxHeight > 0 && newHeight > options.maxHeight) {
+ debug("new height is greater than maxHeight");
+ newHeight = options.maxHeight;
+ }
+
+ newHeight += options.heightOffset;
+
+ debug("New Height: " + newHeight);
+ if (options.animate) {
+ $(iframe).animate({height: newHeight + 'px'}, {duration: 500});
+ } else {
+ iframe.style.height = newHeight + 'px';
+ }
+
+ options.callback.apply($(iframe), [{newFrameHeight: newHeight}]);
+ } // END resizeHeight
+
+ // debug me
+ debug(this);
+ if (options.diagnostics) {
+ showDiagnostics(this, "each iframe");
+ }
+
+ // if trigger functions are registered, invoke them
+ if (options.triggerFunctions.length > 0) {
+ debug(options.triggerFunctions.length + " trigger Functions");
+ for (var i = 0; i < options.triggerFunctions.length; i++) {
+ options.triggerFunctions[i](resizeHeight, this);
+ }
+ }
+
+ // Check if browser is Webkit (Safari/Chrome) or Opera
+ if ($.browser.webkit || $.browser.opera || $.browser.chrome) {
+ debug("browser is webkit or opera");
+
+ // Start timer when loaded.
+ $(this).load(function () {
+ var delay = 0;
+ var iframe = this;
+
+ var delayedResize = function () {
+ resizeHeight(iframe);
+ };
+
+ if (loadCounter === 0) {
+ // delay the first one
+ delay = 500;
+ } else {
+ // Reset iframe height to 0 to force new frame size to fit window properly
+ // this is only an issue when going from large to small iframe, not executed on page load
+ iframe.style.height = options.minHeight + 'px';
+ }
+
+ debug("load delay: " + delay);
+ setTimeout(delayedResize, delay);
+ loadCounter++;
+ });
+
+ // Safari and Opera need a kick-start.
+ var source = $(this).attr('src');
+ $(this).attr('src', '');
+ $(this).attr('src', source);
+ } else {
+ // For other browsers.
+ if(iframeDoc.readyState === 'complete') {
+ resizeHeight(this);
+ } else {
+ $(this).load(function () {
+ resizeHeight(this);
+ });
+ }
+ } // if browser
+
+ }); // $(this).each(function () {
+ }; // $.fn.iframeAutoHeight = function (options) {
+}(jQuery)); // (function ($) {