I'm trying to add a custom video to the Fotorama slider on the product page when selecting an option.
the code below works but does not play the video when clicking the thumbnail.
galleryData.push({
img: '<img_url>',
thumb: 'thumb_url',
video : '<youtube_video_url>',
type: 'video',
caption: 'Video caption'
});
$('div.product.media').html("");
$('div.product.media').each(function (index, element) {
gallery({
options: {
"nav": "thumbs",
"thumbwidth": 88,
"thumbheight": 110,
"loop": 1,
"arrows": 1,
"navarrows": 1,
"allowfullscreen": 1,
"navtype": "slides",
"navdir": "vertical",
"width": 700,
"height": 560,
"transitionduration": 500
},
data: galleryData,
fullscreen: {
"nav": "thumbs",
"navdir": "vertical",
"navtype": "slides",
"arrows": 1,
"loop": 1,
"transition": "slide",
"transitionduration": 500,
},
"breakpoints": {
"Lesro": {
"conditions": {
"max-width": "767px"
},
"options": {}
}
}
}, element);
});
Thanks a lot!
I'm using TinyMCE 5 and Media plugin with the following configuration:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function (blobInfo, success, failure) {
setTimeout(function () {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
});
Is there any way to remove (disable, hide) the "Embed" tab (section) without affecting other components/controls?
I've checked the documentation for Media plugin but there's nothing about that...
Also, applying this CSS:
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
hides the "Embed" tab on media-dialog, but it also hides tabs on other dialogs. For example, it would also hide the "Upload" tab on dialog for image.
FIDDLE: http://fiddle.tinymce.com/cwhaab
On Github there is a "feature-request" for this: https://github.com/tinymce/tinymce/issues/6082 ... but I'm looking for a workaround (until this new feature/option becomes available).
I'm using TinyMCE 5.4.2
REALLY BAD CODE ALERT!
Unfortunately there isn't any clean way to configure editor to make it work as you want. That being said, really bad approach would be to filter tab by going through the tab list after media command is executed and hiding any tab which contains text Embed.
Take a look at this playground demo:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function(blobInfo, success, failure) {
setTimeout(function() {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
setup: function(editor) {
editor.on('ExecCommand', (event) => {
const command = event.command;
if (command === 'mceMedia') {
const tabElems = document.querySelectorAll('div[role="tablist"] .tox-tab');
tabElems.forEach(tabElem => {
if (tabElem.innerText === 'Embed') {
tabElem.style.display = 'none';
}
});
}
});
}
});
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Just use CSS to hide the second element;
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
In the real version, you should put the control inside a div and target that with the selector as well so as not to effect all tinymce controls
Edit:
By putting a selector I mean do the following
<style>
.onlyEffectMe .tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<div class="onlyEffectMe">
<textarea name="content"></textarea>
</div>
</form>
I am having trouble to find a way to remove or set the visibility to false for the checkbox of specific rows from a sap.ui.table.TreeTable.
For example, for the table below, I would like to disable or remove the checkbox for subitem1-1, subitem1-2, and subitem2-1.
Please refer to the following for code sample:
sap.ui.getCore().attachInit(function() {
sap.ui.require([
"sap/ui/table/TreeTable",
"sap/ui/table/Column",
"sap/ui/model/json/JSONModel"
], function(TreeTable, Column, JSONModel) {
const treeTable = new TreeTable({
columns: [
new Column({
label: "Name",
template: "name",
}),
],
selectionMode: "MultiToggle",
enableSelectAll: true,
});
treeTable.setModel(new JSONModel({
root: {
name: "root",
description: "root description",
checked: true,
0: {
name: "item1",
description: "item1 description",
checked: true,
0: {
name: "subitem1-1",
description: "subitem1-1 description",
checked: true,
},
1: {
name: "subitem1-2",
description: "subitem1-2 description",
checked: true,
},
},
1: {
name: "item2",
description: "item2 description",
checked: true,
0: {
name: "subitem2-1",
description: "subitem2-1 description",
checked: true,
},
},
},
})).bindRows("/root").placeAt("content");
});
});
<script id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-libs="sap.m, sap.ui.table, sap.ui.unified"
data-sap-ui-xx-async="true"
data-sap.ui-xx-waitForTheme="true"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Any help or suggestions are really appreciated!
PDF Outputs
I am new to DOJO charts and in one of the requirement, we have to convert Dojo Chart to PDF.
To achieve this we have used "JSPDF" and "html2canvas" libraries.
It is working fine in Google Chrome and not in IE11.
Kindly suggest.
Regards,
Byreddy
Here is my code....
PDF Test
<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 600px; height: 400px; background-color:white;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:true, async:true"></script>
<script>
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend", "dojox/gfx/utils",
],
function (Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend, Utils) {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap: 6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle: "inside",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{ "value": 1, "text": "A" }, { "value": 2, "text": "B" }, { "value": 3, "text": "C" }, { "value": 4, "text": "D" }, { "value": 5, "text": "E" }, { "value": 6, "text": "F" }]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280],
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF",
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 0, 800, 300, 300], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
//proxy: "https://html2canvas.appspot.com/query",
//useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg");
pdf.addImage(canvas, 'JPEG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/62d219a0fac54b94cd4f230e7bfc55aa3f8dcfa4/FileSaver.js"></script>
<script src="JSRefs/html2canvas_0.5.0-alpha1.js"></script>
Here is the working sample, make a note of the listed important things in the code, which made the difference.
gfxRenderer: "canvas"
htmlLabels: false,
Below is the working code along with Tooltip functionality.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<script>
dojoConfig = {
parseOnLoad: true, // enables declarative chart creation
gfxRenderer: "canvas" // canvas is first priority
};
</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="html2canvas.js"></script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
pdf.addImage(img, 'PNG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script>
require([
"dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/gfx/utils",
"dojo/ready",
"dojo/domReady!"
], function (
Chart,
Lines,
Default,
StackedColumns,
Tooltip,
SelectableLegend,
Utils,
ready
) {
var chart1 = new Chart("chart1");
chart1.htmlLabels = false;
chart1.title = "Stacked Chart";
chart1.addPlot("stackedColumnsPlot", {
htmlLabels: false,
type: StackedColumns,
gap: 5,
lines: true,
areas: true,
markers: true,
labels: true,
labelOffset: -10,
labelStyle: "default",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" },
{ "value": 4, "text": "D" },
{ "value": 5, "text": "E" },
{ "value": 6, "text": "F" }
]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
// console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
</head>
<body class="claro">
<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
</body>
</html>