Forum Discussion
Using classnames as Selector instead of acc-name
The upcoming Advanced Javascript API gives you the option to select an element by getting its ObjectID. Although this works fine and for sure has pluses above using the accessibility name ( especially when accessibility is key ) it has disadvantages. So i showed my approach for using classnames and classLists for selecting elements for Javascript and GSAP use. Showing that here too now, as its for sure usefull for everyone. This function adds several classes to ALL elements visible in your Storyline. Thus creating an alternative for the ObjectID and when elements have the same acctext ( copying/pasting or duplicating a slide ) the class will remain intact.
This solves directly also the issue of not being able to copy elements because of unique ObjectIDs.
When your imported or created assets have similar names. "icon 1.svg", "icon 2.svg", "asset 1.png", "asset 2.png". As adding a class doesnot support spaces in the string, the acc_name will be split into multiple classes and added to your elements onscreen.
In the above sample this will end up in a classList with classes for 'icon', 'asset' and the numbering "1.svg", "2.svg", "1.png" and "2.png". You could finetune that and split it on the period.
Now you can duplicate slides and all still works.
You can now target all icons by using:
AND (both classes) Selects all elements with both classes
var icons = document.getElementsByClassName("icon 1.svg");
var licons = document.querySelectorAll(".icon.1.svg");
OR (at least one class) Selects all elements with className icon
var icons = document.querySelectorAll(".icon");
var icons = document.getElementsByClassName(".icon");
gsap.to(icons[1],{scale:3, duration: 1});
As you can see here this works fine.
Combo GSAP and WAAPI no problems at all.
https://360.articulate.com/review/content/f6d2d2b0-30f3-4af1-bd4b-ea07532c94e4/review
Only issue so far is with Groups...as they have an acc-text with an space at the end "Group ".
And addClass functionality not that forgiving ( code breaks due to an empty value ) thus i excluded that one for now. There might be more cases with issues.
This is my function for this...
function getElementsFromStoryLine(){
visibleStorylineElements = document.getElementsByClassName('slide-object shown');
for (var i = 0; i < visibleStorylineElements.length; i++) {
let dataModelID = visibleStorylineElements[i].getAttribute('data-model-id');
let dataAccText = visibleStorylineElements[i].getAttribute('data-acc-text');
if(dataAccText.includes("Group")){
}else{
let accClasses = dataAccText.split(" ");
visibleStorylineElements[i].classList.add(...accClasses);
}
console.log('dataAccText '+dataAccText+" | dataModelID "+dataModelID);
}
var icons = document.getElementsByClassName("Asset");
gsap.to(icons[1],{scale:3, duration: 1});
}
I will add the Storyline sample later today...
- MathNotermans-9Community Member
As said the sample from above added here. It will work fine in the current Storyline, BETA access not needed. WAAPI as is, is pure free MDN code ( https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts ) so available in any browser.
Alas its far less developed then GSAP for example...but as you can see in the sample added you can easily mix-and-match the 2.
Only actual difference between this one and the same in the BETA version is that you can quickly select the elements in the Javascript editor to get the ObjectID.
Main lines to notice in the code are these:visibleStorylineElements[i].classList.add(...accClasses); //adds all classes to visible Storyline elements var icons = document.getElementsByClassName("Asset");// now you can select by Class
Happy animating...