You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I hacked together this code to only show one slideable at time. I tried calling 'click' on the element that i needed, but that didn't work. So, in my hurry, I resorted to not-so-great programming, but it works and I hope it helps someone (or someone can help me improve this!).
var objects = [];
angular.module('angularSlideables', [])
.directive('slideable', function () {
return {
restrict:'C',
compile: function (element, attr) {
// wrap tag
var contents = element.html();
element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
return function postLink(scope, element, attrs) {
// default properties
attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
element.css({
'overflow': 'hidden',
'height': '0px',
'transitionProperty': 'height',
'transitionDuration': attrs.duration,
'transitionTimingFunction': attrs.easing
});
};
}
};
})
.directive('slideToggle', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var target, content;
var holder = {
element: element,
attrs: attrs
};
objects.push(holder);
attrs.expanded = false;
element.bind('click', function() {
for(var i = 0; i < objects.length; i ++) {
if (objects[i].element != element && objects[i].attrs.expanded) {
// Because the click does not fire...
// objects[i].element[0].click();
var ptarget = document.querySelector(objects[i].attrs.slideToggle);
var pcontent = ptarget.querySelector('.slideable_content');
if(!objects[i].attrs.expanded) {
pcontent.style.border = '1px solid rgba(0,0,0,0)';
var y = pcontent.clientHeight;
pcontent.style.border = 0;
ptarget.style.height = y + 'px';
} else {
ptarget.style.height = '0px';
}
objects[i].attrs.expanded = !objects[i].attrs.expanded;
}
}
if (!target) target = document.querySelector(attrs.slideToggle);
if (!content) content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
} else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
}
}
});
The text was updated successfully, but these errors were encountered:
Hi,
I hacked together this code to only show one slideable at time. I tried calling 'click' on the element that i needed, but that didn't work. So, in my hurry, I resorted to not-so-great programming, but it works and I hope it helps someone (or someone can help me improve this!).
The text was updated successfully, but these errors were encountered: