Need to add an iframe into the fotorama gallery.
Tab image can be fixed.
Src should be a parameter to pass in.
Note this is on Magento 2.0
First get access to the dom element and the api object.
// Get the Dom Element.
var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
// Get the API object.
var fotorama = $fotorama.data('fotorama');
Listen for the fotorama:load event and replace the contents with an iframe.
// On load handler for fotorama.
$fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
if (extra.frame.type === 'iframe') {
// Replace the contents with the iframe.
extra.frame.$stageFrame.html('<iframe type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
}
});
Next up you can push new data for an iframe in like this.
fotorama.push({ img: 'iframe.png', thumb: 'iframe.png', 'src': 'http://someurlforiframe', type: 'iframe' });
Note: You want to have iframe.png or some other image that is thumbnailed sized ready to load in.
I used an 80x80 one.
I was able to successfully embed 3dvieweronline into the gallery using this code from a template in a custom module with working full screen functionality.
Related
[
{
"title":"Palmeiras - Coritiba",
"embed":"<div style='width:100%;height:0px;position:relative;padding-bottom:calc(56.25% + 335px);' class='_scorebatEmbeddedPlayerW_'><iframe src='https://www.somestream.com/embed/g/934437/?s=2' frameborder='0' width='560' height='650' allowfullscreen allow='autoplay; fullscreen' style='width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;' class='_scorebatEmbeddedPlayer_'></iframe></div>",
"url":"https://www.some.com/coritiba-vs-palmeiras-live-stream/",
"thumbnail":"https://www.somestream.com/og/m/og934437.jpeg",
"date":"2020-10-14T21:00:00+0000",
"side1":{
"name":"Palmeiras",
"url":"https://www.some.com/live-stream/palmeiras/"
},
"side2":{
"name":"Coritiba",
"url":"https://www.some.com/live-stream/coritiba/"
}
}
]
I want to get the title, thumnail, and video, date feilds from this response but unable to get the video because it is in div element.
You need to use DOMParser to read the HTML string into a JavaScript document. The you can use DOM methods like querySelector and getElementById on it.
Here's a function to return the video src from an HTML embed string.
const getEmbedSrc = (embed) => {
const parser = new DOMParser();
const doc = parser.parseFromString(embed, "text/html");
return doc.getElementsByTagName('iframe')[0].src;
}
const embed = "<div style='width:100%;height:0px;position:relative;padding-bottom:calc(56.25% + 335px);' class='_scorebatEmbeddedPlayerW_'><iframe src='https://www.somestream.com/embed/g/934437/?s=2' frameborder='0' width='560' height='650' allowfullscreen allow='autoplay; fullscreen' style='width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;' class='_scorebatEmbeddedPlayer_'></iframe></div>";
console.log(getEmbedSrc(embed));
Alternatively, you can find a match using regex.
I am completely new to angular js and am trying to build a google map widget in Service Portal within ServiceNow that dynamically shows the user's job location. I have a server script that pulls and formats the location:
var gr = new GlideRecord('cmn_location');
gr.addQuery('sys_id', gs.getUser().getLocation());
gr.query();
if(gr.next())
{
var loc = gr.street.getHTMLValue();
}
loc1 = loc.replace(/,/g, "");
loc2 = loc1.replace(/ /g, "+");
data.src = loc2;
And my HTML looks like this:
<div class = "map-container">
<iframe ng-src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}}'></iframe>
</div>
The iframe and {{data.src}} do not work together. If I take away the iframe portion of the code and replace it with {{data.src}}, the address loads correctly. Also, if I replace {{data.src}} with a real address (i.e. washington+dc), the map shows Washington DC correctly.
Can someone help me troubleshoot this issue?
Thanks!
You can have a function defined in the controller and pass the url to it,
routerApp.controller('AppCtrl', ['$scope','$sce', function($scope,$sce) {
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
HTML
<iframe ng-src="{{trustSrc(https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}})}}'></iframe>
demo
I tried $localstorage to store the file path locally and preview the file using iframe but I am getting error.
$scope.getResume = function() {
var resumeJson = {
"json":{
"request":{
"candidateid":$rootScope.globals.currentUser.userId,
"type":2
}
}
};
var getresume = "http://MyServerURL?request=" + JSON.stringify(resumeJson);
$scope.resume = $localStorage.$default({x: getresume});
}
HTML:
<iframe id="resume" src="{{resume.x}}" style="margin-top: 2em; height: 100%; width: 100%;"></iframe>
But I am getting error and its showing error message inside frame as:
Cannot GET /%7B%22json%22:%7B%22request%22:%7B%22candidateid%22:44,%22type%22:2%7D%7D%7D
When I tried to inspect the page I found iframe src = "{"json":{"request":{"candidateid":44,"type":2}}}" instead of my URL.
Look, I've wrote a Plunker for you. It's 100% working solution to dynamically set iFrame src.
https://plnkr.co/edit/tpl:CR2TtS1zz9wFGgsl5z2c?p=preview
Maybe you should just change src to ng-src.
<iFrame ng-src="{{mc.resume}}"></iFrame>
<iron-ajax
auto
url= 'http://localhost/sh_new/index.php/mobile/notes/{{misi}}'
handle-as="document"
on-response="handleResponse"
last-response = "{{noteResponse}}">
</iron-ajax>
{{noteResponse}}
result is [object HTMLDocument] how to change into html
Change handle-as="document" to handle-as="html"
Use underscore.js utility named _.template to convert it into HTML. It is basically used to load partial HTML content. I know this is not good one solution but it will solve your purpose.
app.handleResponse = function(e, detail){
var html = _.template(detail.response);
}
<iron-ajax
auto
url= 'http://localhost/sh_new/index.php/mobile/notes/{{misi}}'
handle-as="html"
on-response="handleResponse"
last-response = "{{noteResponse}}">
</iron-ajax>
{{noteResponse}}
I am trying to integrate Sencha 4.1 (ExtJS) with the Leaflet mapping library while using Sencha Architect.
When the page loads, the tiles are mixed up and appear offset. I need to drag the page up to be able to see the tiles.
The full project is available here: https://github.com/breizo/SenchaLeaflet.
Here is an excerpt of the custom component created (see full code here: https://github.com/breizo/SenchaLeaflet/blob/master/ux/LeafletMap.js).
constructor: function () {
this.callParent(arguments);
this.on({
resize: 'doResize',
scope: this
});
var ll = window.L;
if (!ll) {
this.setHtml('Leaflet library is required');
}
}
onRender: function() {
this.callParent(arguments);
var renderTo = arguments[0].dom.id;
debugger;
var me = this,
ll = window.L,
element = me.mapContainer,
mapOptions = me.getMapOptions(),
map,
tileLayer;
if (ll) {
// if no center property is given -> use default position
if (!mapOptions.hasOwnProperty('center') || !(mapOptions.center instanceof ll.LatLng)) {
mapOptions.center = new ll.LatLng(47.36865, 8.539183); // default: Zuerich
}
me.setTileLayer(new ll.TileLayer(me.getTileLayerUrl(), me.getTileLayerOptions()));
tileLayer = me.getTileLayer();
mapOptions.layers = [tileLayer];
me.setMap(new ll.Map(renderTo, mapOptions));
map = me.getMap();
// track map events
map.on('zoomend', me.onZoomEnd, me);
map.on('movestart', me.onMoveStart, me);
map.on('moveend', me.onMoveEnd, me);
me.fireEvent('maprender', me, map, tileLayer);
}
},
When debugging it appears that when onRender is called, the parent container of the map is not properly sized yet, in particular its height is only enough to contain the attrib text, about 16 pix. WHen the doResize is called, the container is properly sized, but it doesn't change the end result: the tiles are mixed up and offset.
I tried various changes to the container, but nothing worked...
1) Problem with mixed layers is caused by CSS. Your leaflet.css has wrong path in html, so it's not attached in the document. To fix mixing issue set correct path to css file, or attach it from CDN:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
2) Wrong map offset is caused by extjs generated div:
<div class="x-llmap x-fit-item x-llmap-default" ...></div>
It pushes map container to the bottom and wrong offset calculations are made. You can also fix this using inline style or CSS:
.leaflet-map-pane {
top: 0;
}