Hi, First off, I am grateful to be in this community, and I can’t wait to join you.
I am currently developing a theme from scratch, which I will be porting to Classicpress. I have been converting the functions of my wp plugin into my theme, that way I would have less plugin, and a high chance of compatibility with Classicpress (Sorry if this is off).
Main Question: I ported an open source code into my theme, and it worked as expected. My main challenge is the app is not responsive, and there is no way I can target the class, as it is called directly from Js with:
var a = new AudioSynthView();
a.draw();
That would draw the app (Piano) in between some div class, I can style the div classes, but there is no way I can style the app to make it responsive.
First of all… neat app! I just spent about 10 minutes composing a masterpiece! Well, I’m sure my mom would say it was nice.
Anyway, after looking at the code, you’d need to use media queries to change the CSS that applies to the keyboard when the viewport is smaller. Notably, though, if you fit the entire keyboard on a narrow screen in vertical orientation, the individual keys are going to be hard to touch since they’ll be exceptionally narrow and close to one another.
Here’s a fiddle that demonstrates how to target the outer container.
Haha, the app is really cool thou - it’s an open source code I founded on github, so I had to create a fiddle for that, and then hard-code it into my theme.
I taught of using a media query, the issue I have is that the main app can’t be resized with CSS, that’s my challenge. Try inspecting it on fiddle, you’ll see what I mean.
for(var n in notes) {
//...
thisKey.style.width = '40px';
thisKey.style.left = 40 * iWhite + 'px';
iWhite++;
//...
visualKeyboard.style.width = iWhite * 40 + 'px';
So, if you insert this via iframe, I can’t see a way to make it really responsive. Adding a scrollable wrapper is the only “solution” probably.
But if this JS source is editable, you can rewrite it avoiding the fixed numbers. Eg. using not 40px but something relative to viewport width dived by the white keys count. Or, otherwise, calculting white keys count depending on viewport width and fixed key with, which is a bit more complex as you’ll probably need to update switching octaves etc.
That looks promising, Yh, the Js code is editable, what would really make it look interesting is if I can change the key span to two octaves on mobile, the default is 3 octaves.
With the sizes of all components in fixed widths and heights (inline, no less), it’s going to be very tough to make this responsive. You can resize at breakpoints with !important declarations in CSS, but it will be a chore.
Guess he could convert it to percentage or em / rem, too. Also, there are several JS “media query” emulators / helpers around, eg. HeadJS (without the async loader), that come in VERY handy for this specific purpose.
I also dont see why it shouldnt be possible to convert the display rendering part from absolute to relative values. But even then, it should be possible to do some easier realignments just by replacing the hardcoded values with a handful of fancy variables. These get changed based on the result of the above mentioned JS media query helpers, et voila! Semi-responsive as is in “classic size-based” responsiveness.
Well, I’m not a true coder to digg in deeply, but in general this task does not seem very difficult.
Define minimal key width.
Limit default keyboard size to 1 octave (7 responsive keys).
Check the container width to fit several octaves (width / 7 keys * minimal key width ).
Switch keyboard depending on visivble ocatves count.
All calculations might be moved to a public method kinda ‘calcKeyboardWidth’ triggered by event kinda ‘keyboardResize’. So resizing the window would call it and adapt everything.
So it should not be responsive, it should be adaptive.
You just gave me the right solution, but I don’t think I can do that, it’s beyond me! I would ditch this code of a thing, wasted more time than I expected. Thanks for your support everyone, I have never had support like this before, it’s going to be peaceful around here. Lucky to find Classicpress
Beginner myself. When I joined here I was studying html, css and php after deciding that after more then 10 years of WordPress learning along I needed a structured approach to code.
Well… I won my fear of coding recently thanks to the community.
So maybe you feel this code is too much now. Just don’t throw it away. Keep it and play with it when you have leisure time… If I was able to put my head on starting a plugin just by persevering, you can too!
I’d suggest breaking it into several parts for a better overview. JS doesnt really mind if its split up into several files, as long as it forms a big something at the execution time
Thanks, @ElisabettaCarrara, I would never throw the code away, I have been reading the code line by line, marking points, and figuring the way it’s gonna work.
I taught of giving up before, then I realize from my favourite statement "No Pain, No Gain’
I would update this post as soon as I am done. Cheers.
ps - Seems I can’t send more than 13 messages as a new user
@norske Wahoo! Scrollable wrapper all the way, it’s even better as a scrollable wrapper on mobile than making the keys tiny. I love it this way, and I should be packing my bags, and T-shirt into Classicpress today.
Yh, I don’t know what’s going on, but I am just super happy of how I have structured my theme, I feel safe around here, and this would be the first time I will be adding - Powered by Classicpress (You guys are too supportive, and active), I believe this community is gonna be super successful
