I'm trying to add a Rally app to Confluence via the SDK. I'm successful, however, the app expands to fill the whole page covering Confluence headers. How do I restrict the app from expanding full screen? I've added a class that limits the height and width of app, but it still expands to full screen covering the Confluence header.
Here's my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hierarchical Grid Example</title>
<script type="text/javascript"
src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js">
</script>
<script type="text/javascript">
Ext.override('Rally.sdk.Bootstrapper', {
_launchAppInViewport: function (className, settings, timeboxScope) {
this._wireIoHeaderHandlers();
this.app = this._createApp(className, settings, timeboxScope);
this.app.render('rallyDiv');
}
});
Rally.onReady(function() {
Ext.define('Rally.example.HierarchicalGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{ xtype: 'container', itemId: 'rallyDiv'}
],
autoCreateViewPort:false,
launch: function() {
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
context: {project: '/project/9400054800'},
models: ['userstory'],
autoLoad: true,
enableHierarchy: true
}).then({
success: this._onStoreBuilt,
scope: this
});
},
_onStoreBuilt: function(store) {
this.down('#rallyDiv').add({
xtype: 'rallytreegrid',
context: this.getContext(),
store: store,
columnCfgs: [
'Name',
'ScheduleState',
'Owner'
]
});
}
});
Rally.launchApp('Rally.example.HierarchicalGrid', {
name: 'Hierarchical Grid Example',
});
});
</script>
</head>
<body>
<div id="rallyDiv"></div>
</body>
</html>
Thanks!
Apps are designed to fill an entire window and use a Viewport object to do so- this is why it's filling the screen. Is it possible instead in confluence to just create an iframe of the appropriate size and link to your App-external.html served elsewhere?
Otherwise you should be able to add a small override at the top of your App.js to change the behavior of Rally.launchApp to do what you want:
Ext.override('Rally.sdk.Bootstrapper', {
_launchAppInViewport: function (className, settings, timeboxScope) {
this._wireIoHeaderHandlers();
this.app = this._createApp(className, settings, timeboxScope);
//this is the code that launches the app in the viewport
//Ext.create('Ext.Viewport', {
// layout: 'fit',
// items: [ this.app ]
//});
//instead, just render it to your target div
this.app.render('myElement');
}
});
This isn't ideal but should work for you. I'll submit a feature request to better support rendering apps in non-fullscreen environments.
Related
When I run this code in my localhost server and I click the Show Ad button in the #!/reward page, the reward ad shows but sends me back to the #!/ page. However, in this online code editor this SPA (single page app) works as intended: it plays the ad but leaves you on the reward page. Obviously this must have something to do with the fact that the application is running in an iframe on the editor, but why am I getting the "unexpected" behavior on my localhost and "expected" behavior in these online editors (I've also tested in jsbin and jsfiddle and same result).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
</script>
</head>
<body>
<div id="App"></div>
<script src="https://unpkg.com/mithril/mithril.min.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(() => {
googletag.enableServices();
googletag.pubads().addEventListener('rewardedSlotReady', event => event.makeRewardedVisible());
googletag.pubads().addEventListener('rewardedSlotClosed', event => googletag.destroySlots([event.slot]));
});
const Home = {
view: () => m('button', {
onclick: () => m.route.set('/reward')
}, 'Go to Reward Page >>>')
}
const Reward = {
view: () => [
m('button', {
onclick: () => m.route.set('/')
}, '<<< Return to Home Page'),
m('button', {
onclick: () => googletag.cmd.push(() => {
const rewardedSlot = googletag.defineOutOfPageSlot('/22639388115/rewarded_web_example', googletag.enums.OutOfPageFormat.REWARDED);
if(rewardedSlot)
{
rewardedSlot.addService(googletag.pubads());
googletag.display(rewardedSlot);
}
})
}, 'Show Ad')
],
}
m.route(document.getElementById('App'), '/', {
'/': Home,
'/reward': Reward
});
</script>
</body>
</html>
UPDATE (2022.08.03 11:16)
I can confirm that by placing this code into a subdirectory and then running it inside an iframe I get the expected behavior. I still need to understand why it doesn't work without the iframe. Here's a Glitch page that illustrates both scenarios. Click the View button on the preview pane to view it in its own window and note the difference.
The specific code for a rewarded ad appends #goog_rewarded to the end of the page's URL. This is what forces the unexpected behaviour to return to the default route of Mithril's router when using the default #! strategy. The added # triggers a hashchange event and Mithril cannot resolve the route. Setting the m.route.prefix to a different strategy (in my case m.route.prefix = '?') resolves the problem as it prevents the lookup from taking place.
I would like to use Leaflet.js API with Sencha Touch 2.3.1 and leaflet.js gives this error:
Uncaught Error: Map container not found.
These links are included in index.html
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
Here is my mainview code:
Ext.define('App.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'App.view.MapView',
],
config: {
layout: 'card',
items: [
{
itemId: 'mapview',
xtype: 'mapview',
id : 'map'
}
]
}
});
This is the 'App.view.MapView' code:
Ext.define("App.view.MapView", {
extend: 'Ext.Container',
requires: ['Ext.device.Geolocation'],
xtype: 'mapview',
initialize: function(){
var map = L.map('map').setView([47.36865, 8.539183], 13);
var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.on('click', function() {
console.log('Click-Event on map / Time: ' + Date.now());
});
},
});
What am I doing wrong? Please help.
Leaflet is searching for a DOM element, map, that isn't there (yet...).
This problem occurs when L.map('map') is called before the DOM has finished loading.
Guessing the js was executed before the DOM was ready. Try wrapping your code in a function and setting window.onload equal to your function.
Ok, seems I found a solution. I changed this line:
var map = L.map('map').setView([47.36865, 8.539183], 13);
to
var map = L.map(this.element.dom).setView([47.36865, 8.539183], 13);
Is it possible to force magnific-popup to get image url from 'src' attribute of img tag? This way there would be no need to wrap img with a tags.
I tried the code below, but it doesn't work. Returned error is 'undefined' url.
<script type="text/javascript">
$(document).ready(function(){
$('div.gallery').magnificPopup({delegate: 'img'.attr('src') , type: 'image', gallery:{enabled:true}
});
});
</script>
Anyways, is there any option to do with 'img' only, without 'a' tags?
Thanks!
<script type="text/javascript">
$(document).ready(function(){
$('div.gallery').magnificPopup({delegate: 'img' , type: 'image', gallery:{enabled:true},
callbacks: {
elementParse: function() { this.item.src = this.item.el.attr('src'); }
}
});
});
</script>
elementParse http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
I actually have not worked, and I found how to do .
Now the script when clicking pictures increases and creates a gallery of them .
<script type="text/javascript">
$(document).ready(function() {
$('#text').magnificPopup({
delegate: 'img',
type: 'image',
gallery: {
enabled: true
},
callbacks: {
elementParse: function(qw) {
qw.src = qw.el.attr('src');
}
}
});
});
</script>
With magnificPopup 1.1.0
now you have to do like this if you want it to work.
$(document).ready(function() {
$('.myClass').magnificPopup({
type: 'image',
callbacks: {
elementParse: function(item) {
item.src = item.el.attr('src');
}
}
});
});
The accepted answer didn't work for me, either. I ended up using the data-mfp-src attribute, which overrides the value in the href one (as mentioned here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types).
Instead of adding the attribute manually (duplicating the src of the image), I just copied the src value in data-mfp-src attributes for all images before the magnificPopup call. Something like this:
var popupImages = $('div.withPopups img');
popupImages.each(function(){
$(this).attr('data-mfp-src', $(this).attr('src'));
});
popupImages.magnificPopup({type: 'image'});
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
I have simplest implementation of CardBoard:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Very annoying issue occurs after each drag and drop action: page refreshes.
Also I've noticed some bug that prevents page from reloading. Steps to reproduce:
Open page with code above;
Change project scope;
Drag and drop card;
You will see javascript error in browser console that prevent page from refreshing.
How can I prevent page refreshing after Card drag and drop action in case when there are no javascript Rally SDK errors?
It's caused by a poor handling of the objectUpdate message by the parent window. When the card is dropped, the objectUpdate message is fired (correctly), but the Custom HTML panel handles it by refreshing the app. I've filed a bug with Rally to fix it.
To overwrite this behavior, add this after Rally.onReady:
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
So the entire code looks like:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Here is a similar question with a slightly different answer that should work for you as well:
App works as desired in debug mode but crashes in Rally environment