Develop Reference

How can I init accordion in Magento 2 on swatches, on product page

I want to make an accordion for the swatches on the product page.
The switches are built into the file Magento_Swatches/js/swatch-renderer.js
I did a mixin over the _RenderControls function and changed the html structure a bit compared to the original structure.
CODE JS (via mixin)
container.append(
'<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
'attribute-code="' + item.code + '" ' +
'attribute-id="' + item.id + '">' +
label +
'<div class="init-accordion" >' +
'<div data-role="collapsible">' +
'<div class="title-accordion" data-role="trigger">titlu</div>' +
'</div>' +
'<div class="content-accordion" data-role="content">' +
'<div aria-activedescendant="" ' +
'tabindex="0" ' +
'aria-invalid="false" ' +
'aria-required="true" ' +
'role="listbox" ' + listLabel +
'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
options + select +
'</div>' + input +
'</div>' +
'</div>' +
'</div>'
);
I did not put the whole function because it is very long, I only put the part that differs from the original.
I want to initialize an accordion (according to the Magento documentation) on this swatch structure.
The problem is that the accordion does not initialize because the switches are still loaded on the page.
In the template, I would initialize like this
CODE PHTML:
<script>
require(['jquery', 'domReady', 'accordion'], function($, domReady){
domReady(function(){
setTimeout(function(){
$(".init-accordion").accordion({
"active": [1, 2],
"collapsible": true,
"openedState": "active",
"multipleCollapsible": true
});
}, 3000);
});
})
</script>
I used setTimeout and it works, but I want without it.
Do you have any idea how I can do this?
Thank you!

Passing id from element via ng-click

I'm constructing quite a big <span> - element that is being generated dynamically in code.
var span = '<span id="' + dayNumber + '/' + Number(currentMonth + 1) + "/" + Number(date.getFullYear()) + '" class="day ' + respons[0] + '" ng-click="gotoDetail($event)" style="height:' + screenHeigt + 'px; display:table;"><p style="display:table-cell; vertical-align:middle;">' + dayNumber + ' </p></span>';
As you can see, the id consist of a date-string. Via the ng-click-element I would like to pass the id to the gotoDetail($event)-function. When I'm inspecting the parameter of that function, I see however that $event.target.id is empty...
Following code is an older version and does work:
var span = '<span id="' + dayNumber + '/' + currentMonth + '" class="day ' + respons[0] + ' ' + lastMonth + ' " ng-click="gotoDetail($event)">' + dayNumber + '</span>' + string;
I really don't know what I'm doing wrong in the first example...
If I check my html in the chrome-console, there's nothing wrong with the id, the ng-click, or other attributes...
Someone who has an anwser?
EDIT: Code can be found here: https://gist.github.com/anonymous/c29798e0d46f40dcfe69

Blogger data tags don't work in javascript

Hy, I have some issues when adding blogger data tags to javascript.
var summary1 = '<div class="firstWrap">' + '<h3 class="post-title entry-title">' + '</h3>' + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>' + '<span class="readmorebutton">' + '<a expr:href="data:post.url">' + 'Read More »' + '</a>' + '</span>' + '</div>' + imgtag;
div.innerHTML = summary1;
}
The code adds the div first wrap the read more button and the summaries but it won't load the h3 and the a expr:href= data doesn't work.
How can I add the blogger data expr:href=... and other blogger code into javascript so that it works.
Thanks

You must define the expr:href="data:post.url" via Javascript variable in separated script tag. Simply like this:
<script type="text/javascript">
var postlink="<data:post.url/>"
</script>
You can place that script before or after your entry-container.
Then, call the variable in your script:
var summary1 = '<div class="firstWrap">' + '<h3 class="post-title entry-title">' + '</h3>' + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>' + '<span class="readmorebutton">' + '' + 'Read More »' + '' + '</span>' + '</div>' + imgtag;
div.innerHTML = summary1;
}
I use this method in my blogger template, and it's works good for me.

Specific HTML code generator using Jquery

I made a website, but now I came with an idea to make a code generator. You have to insert text in text boxes and it will generate code.
$("input").keyup(function() {
$("#result").text(
'<div width="' + $("#width").val() +
'px" height="' + $("#height").val() +
'px">' + $("#content").val() +
'</div>');
});
I found this solution on http://jsfiddle.net/NzFeb/ but it doesn't work somehow with my code.
You can see what I did (CSS and Markup) at http://go.filiparag.com/mnmuis-generator but now I need Jquery code.
What I have done with Jquery (it doesn't work):
$("input").keyup(function() {
$("#code").text(
'<!--POST-->
<div id="post"> <div id="' + $("#tag").val() + '" class="tag_post"></div>
<a href="' + $("#image-link").val() + '" data-lightbox="' + $("#title").val() + '" title="' + $("#title").val() + '">
<img src="' + $("#image-link").val() + '" width="'IMAGE_WIDTH'" height="'IMAGE_HEIGHT'" id="post-image-right"/> </a>
<text id="post-title">' + $("#title").val() + '</text> <br>
<text id="post-short-story">' + $("#short-story").val() + '</text> <br> <br>
<text id="post-text">
' + $("#story").val() + '
</text>
</div>
<!--POST END-->'
);
});
These id's are from <input type="text"> and <textarea>.

If i understand your problem correctly, this is the desired code or result http://jsfiddle.net/NzFeb/
if so then your problem is here
' width="'IMAGE_WIDTH'" height="'IMAGE_HEIGHT'"'
// is IMAGE_WIDTH a variable or part of the string
// if its a variable use the plus sign
' width="' + IMAGE_WIDTH + '" height="' + IMAGE_HEIGHT + '"'
// if its part of the string remove the single qoute
' width="IMAGE_WIDTH" height="IMAGE_HEIGHT"'
if the fiddle i pointed to is not the desired code then, change text() to html()
$("#code").html(
side note: <text> is not a valid html tag

Jquery / Javascript: There is a NaN on my HTML

I am writing an HTML loop using javascript. It will loop through a series of images and display them with additional information. It appears that there is always a NaN showing on the HTML output as shown here.
Here is the javascript in question:
var caption = '<p></p>';
if($.isEmptyObject(data[i].caption) !== true)
{
caption = '<p class="caption" style="top:'+data[i].height+'px;">'+
data[i].caption +
'</p>';
}
var li = '<li data-uk-modal="{target:#modal-open-image}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ data[i].height +'"'
+ 'caption="'+ data[i].caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ caption +
+ '<div class="uk-overlay-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '<p> counter: ' + data[i].counter + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';
$photo.append(li);
I would think the problem would lie on the caption variable. the data[i] is an array of from a database query.
I need to check if there is something on the data[i].caption. I tried using length, but that doesn't work, so I check if the object exist. Though I am not sure if that works.
My question, is how to display properly check if the caption is empty, and if none it will not add anything on the var li.
Thanks.

You can code it in one line:
( (data && data[i] && data[i].caption) ? " your stuff " : "")
But pay attention that checking 'data[i].caption' in javascript means that: zero is false, empty string is false.
Furthermore if you referring a number you can add a condition using the method isNaN

Please use this one in place of the '+ caption +'
isNaN(data[i].caption) ? '' : data[i].caption
or if(isNaN(data[i].caption)==true){
//do somthing
}else{
//do somthing
}

Thanks for the feedback. I manage to gobble up the solutions you game me and I ended up with this.
var height = (data[i].height == null)?0:data[i].height;
var caption= (data[i].caption== null)?'':data[i].caption;
var li = '<li data-uk-modal="{target:\'#modal-open-image\'}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ height +'"'
+ 'caption="'+ caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ '<p class="caption" style="top:' + height +'px;">'
+ caption
+ '</p>'
+ '<div class="uk-thumbnail-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Reciever: '+ data[i].reciever + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';