The 1st version does not work, the images do not show. No errors, just nothing displays
const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));
This 2nd version does work! The images display as expected.
const grid_display = ({ url, key }) =>
React.createElement("div", {className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url })));
Anyone have a reason why the createElement audio causes the issue?
PS. The end result is displaying images in a grid. I need each image to play a sound when you mouse over them. NOTE: The images/sounds are actually dynamic.
thanks for the help!
It does create, you can check the html code using browser dev tools.You have not added the controls attribute, because of which it is not visible in the html.
const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", controls: "controls", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));
Demo
const audio = document.createElement('audio');
audio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// audio element added but not visible in html
//audio.setAttribute("controls", "controls");
document.body.append(audio);
const showAudio = document.createElement('audio');
showAudio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// Now visible
showAudio.setAttribute("controls", "controls");
document.body.append(showAudio);
Related
How to reproduce the bug?
Install the grapes js in react app
Go to the editor and drag a component. ( Example : text component)
Style the component using the style manager
save it into DB and see the code in the editor
Reload the page
see the code in the editor
What is the expected behavior?
The html tag ids and css for that ids should not be changes or erased even though if reload the editor
What is the current behavior?
If we are reloading the editor after any changes , the ids in the html code change and the css for that ids getting erased off
If is necessary to execute some code in order to reproduce the bug, paste it here below:
const editor = grapesjs.init({
container: "#block",
canvas: {
styles: [
"https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css",
],
scripts: [
"https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js",
"https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js",
],
},
protectedCss: "",
commands: {
defaults: [
{
id: "my-command-id",
run() {
alert("This is my command");
},
},
],
},
plugins: ["gjs-preset-webpage"],
storageManager: {
id: "gjs_",
type: "remote",
autosave: true,
autoload: true,
urlStore: this.API_URL + "update_builder/" + this.state.id,
urlLoad: this.API_URL + this.state.id,
//method: 'patch',
params: {
draft: "1",
},
headers: {},
},
assetManager: {
storageType: "",
storeOnChange: true,
storeAfterUpload: true,
upload: "https://localhost/assets/images", //for temporary storage
assets: [],
uploadName: "file",
uploadFile: function (e) {
var files = e.dataTransfer
? e.dataTransfer.files
: e.target.files;
var formData = new FormData();
for (var i in files) {
formData.append("upload", files[i]); //containing all the selected images from local
}
PageService.contentUpload(formData)
.then((response) => {
console.log(response.data.path);
editor.AssetManager.add(response.data.path);
})
.catch((error) => {
// this.alert.show(error.response.data.message,{type:'error'});
});
},
},
pageManager: {
pages: this.pagesList,
},
layerManager: {
appendTo: ".layers-container",
},
styleManager: {
appendTo: '.style-container'
},
});
const pageManager = editor.Pages;
const pagesList = pageManager.getAll();
this.pages = pagesList;
this.editorData = editor;
editor.store((res) => (this.callBackAlert = true));
editor.on("storage:start:store", (objectToStore) => {
console.log(objectToStore);
});
Banner(editor);
// Resizing the components
editor.on("component:selected", function (args) {
args.set("resizable", true);
});
What i want to load a custom .wsz skin on page-load on my website.
I still don't understand how to do it to make it work.
Here a snippet with my code:
https://codepen.io/cat999/pen/rNOOjJP
js
const webamp = new Webamp({
initialTracks: [{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
url: "https://cdn.rawgit.com/captbaritone/webamp/43434d82/mp3/llama-2.91.mp3",
duration: 5.322286,
}],
})
webamp.onMinimize(() => {
const webampEl = document.getElementById('webamp')
webampEl.style.display = 'none'
})
webamp.renderWhenReady(document.getElementById('app')).then(() => {
document.getElementById('close').addEventListener('click', (e) => {
e.stopPropagation()
const webampEl = document.getElementById('webamp')
webampEl.style.display = 'none'
})
document.getElementById('open').addEventListener('click', () => {
const webampEl = document.getElementById('webamp')
webampEl.style.display = 'block'
})
})
Here below the skins I would like to see on my page-load
https://srv-file6.gofile.io/download/KwUySB/Aphex_Twin_-_Windowlicker.wsz
Anyone could help on How I should improve my js code to make It work?
Have you seen the Initialization portion of the docs?
https://github.com/captbaritone/webamp/blob/master/docs/usage.md#initialize-the-javascript
Try constructing Webamp by adding an initialSkin option:
const webamp = new Webamp({
initialTracks: [{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
url: "https://cdn.rawgit.com/captbaritone/webamp/43434d82/mp3/llama-2.91.mp3",
duration: 5.322286,
}],
initialSkin: {
url: "https://s3.amazonaws.com/webamp-uploaded-skins/skins/dbaead7a819b238d48ca726abd0617bb.wsz"
},
})
I have an object here in a file called audio.js:
const audio = {
controls: true,
source: [
{
src: 'https://testname.com/Track03.mp3',
type: 'audio/mpeg'
},
{
src: 'https://testname.com/Track03.ogg',
type: 'audio/ogg'
}
]
};
I've included the audio.js file, but am completely lost on how to render these two audio players into my website, using a loop probably.
All I've managed to get done so far is this, which is evidently incomplete, and would like to expand on it if possible.
<div id="audio">
<script>
let audioo = document.createElement('audio');
</script>
</div>
Sorry, I'm new to all of this and can't find any reliable information. Any help would be appreciated.
Here is a way you can generate them dynamically by javascript; and you don't need to put this string inside <div id='audio'></div> to work, you can use it any where in your javascript.
const audio = {
controls: true,
source: [
{
src: 'https://testname.com/Track03.mp3',
type: 'audio/mpeg'
},
{
src: 'https://testname.com/Track03.ogg',
type: 'audio/ogg'
}
]
}
const theDiv = document.querySelector("#audio");
audio.source.forEach(as=>{
let newAudioElement = document.createElement('audio');
newAudioElement.src = as.src;
newAudioElement.type = as.type;
newAudioElement.controls = 'controls';
theDiv.appendChild(newAudioElement);
})
Here is a working example:
// replacing some working audio urls
const audio = {
controls: true,
source: [
{
src: 'https://www.w3schools.com/tags/horse.mp3',
type: 'audio/mp3'
},
{
src: 'https://www.w3schools.com/tags/horse.ogg',
type: 'audio/ogg'
}
]
}
const theDiv = document.querySelector("#audio");
audio.source.forEach(as=>{
let newAudioElement = document.createElement('audio');
newAudioElement.src = as.src;
newAudioElement.type = as.type;
newAudioElement.controls = 'controls';
theDiv.appendChild(newAudioElement);
})
<div id="audio"></div>
Currently I have a toolbar with some buttons, here is how I create it :
HTML
<div id="toolbarContainer1" style="direction: rtl"></div>
Javascript
var dataArray= [
new WinJS.UI.Command(null, { id: 'cmdView3', label: 'View3', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 3', onclick: function () { changeView('view3') } }),
new WinJS.UI.Command(null, { id: 'cmdView2', label: 'View2', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 2', onclick: function () { changeView('view2') } }),
new WinJS.UI.Command(null, { id: 'cmdView1', label: 'View1', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 1', onclick: function () { changeView('view1') } })
];
window.createImperativeToolBar = function () {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), {
data: new WinJS.Binding.List(dataArray)
});
var thisToolbar = document.querySelector('#toolbarContainer1');
thisToolbar.winControl.closedDisplayMode = 'full';
}
I've tried doing adding it like so :
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
It gets appended to the DOM but it looks like the options aren't working. The div (flyout) in the dom has no id as I've set above.
I want to show the flyout on button click :
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("formatTextFlyout").winControl.show(formatTextButton);
}
But obviously because the ID doesn't get set, an error gets logged. Any ideas ?
Here is a fiddle of what I have tried : https://jsfiddle.net/reko91/yg0rs4xc/1/
When you create a win-control like so:
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
The id "formatTextFlyout" is only the the id of this flyout control.
But you use document.getElementById("formatTextFlyout") method to find this control, the problem is here, this method can only find the html element object with the Id "formatTextFlyout", and there is no one. You can refer to getElementById method.
One solution here is you create a Flyout like so:
HTML:
<div id="flyoutContainer"></div>
Javascript:
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("flyoutContainer").winControl.show(formatTextButton);
}
Or
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
flyout.show(selectedButton);
}
If you read the sample of WinJS.UI.Flyout object there, you will find in html file, it creates a Flyout like so:
<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout"
aria-label="{Format text flyout}">
The html element is div and has a id "formatTextFlyout".
Addition: In the website Try WinJS, there are a lot of win-control samples which written with html+javascript+css.
First my code:
Html
<div class="product_image m2" id="m2"><a href="#" id="10" class='multi2'>test..</a></div>
JS
$(document).ready(function(){
$("#m2 a").bind("click", function() {
var value = $( this ).attr( 'id' );
alert(value);
return false;
});
if ($(".multi2").length > 0){
$(".multi2").yoxview({
cacheImagesInBackground:true,
skin: "top_menu",
lang: "hu",
images: [
{ media: { src: 'images/galeria/cella/image01'+value+'.JPG', title: 'Cella hegesztő' }},
{ media: { src: 'images/galeria/cella/image015.JPG', title: 'Cella hegesztő' }},
{ media: { src: 'images/galeria/cella/image013.JPG', title: 'Cella hegesztő' }},
]
});
}
});
So, I use Yoxview. Multi2 class define the images and when user click on link (or thumbnail). lightbox shown and slideshow start.
The slideshow start every time from the first image defined in JS. I would like to change this so i would like to pass the id of href inside in m2 div to the image list.
Unfortunately I can't do this. I try this code but with this the script crash. How can I pass VALUE to image list?
Try code below, this probably will work, but not a good solution.
EDIT
By the way as Kanishka mentioned its not legal to start ID with a number. You can store photo id as an custom attribute <a href="#"... data-photoid="2" ... /> and get it using jquery data() $(this).data('photoid').
$(document).ready(function(){
$("#m2 a").bind("click", function() {
var value = $( this ).attr( 'id' );
if(!$(this).data('yoxed')) {
$(this).yoxview({
cacheImagesInBackground:true,
skin: "top_menu",
lang: "hu",
images: [
{ media: { src: 'images/galeria/cella/image01'+value+'.JPG', title: 'Cella hegeszto' }},
{ media: { src: 'images/galeria/cella/image015.JPG', title: 'Cella hegeszto' }},
{ media: { src: 'images/galeria/cella/image013.JPG', title: 'Cella hegeszto' }}
]
});
$(this).data('yoxed', true).trigger('click');
}
}
return false;
});
});