ericwvgg/angularslideables

A "pure" Angular implementation of jQuery-style toggleSlide().

angularslideables's Issues

Compatibility with ng-repeat

Thanks for the directive. However, I discovered that it does not work if the content you are trying to show contains an ng-repeat (the ng-repeat doesn't trigger). I've fixed the code, feel free to update it:

.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
                });
            };
        }
    };
})

bower publish

Could you please publish the directive on bower?

AngularSlideables does not work on div with generated html (ng-bind-html)

I was trying to get it working on a div which loads in content with html tags, but as long as there is an ng-bind-html attribute on the .slideable element it does not work.

The error given is "Uncaught TypeError: Cannot read property 'style' of null", when trying to log the content variable, you get "null".

AngularSlideables does work with html tags in the div and it works when I remove ng-bind-html (which is not an option for me).

Code example:

<ul class="list list-slideout small-12 columns">
            <li ng-repeat="tip in tips_list">
                <h2 slide-toggle="#tip-content-{{tip.id}}">{{ tip.title }}</h2>
                <div id="tip-content-{{tip.id}}" class="list-item-content slideable" ng-bind-html="tip.body">
                    {{ tip.body }}
                </div>
            </li>
</ul>

Programmatically show/hide slideable content

What is the best way to programmatically show/hide the slideable content from a controller/service?

I'd like to avoid something like $('#toggle-slide').click()

Not works properly with scalable content

When slider is open, his height remains the same, even there is another scalable content here. No stratching appears:
http://jsfiddle.net/8ezykq8u/1/

Doesn't hide margin and borders

Slide toggle works for the height and width but doesn't account for hiding the borders on margin

Will not work with bootstrap div's with specified col sizing

Using bootstrap3 any divs containing column/grid sizing is not slideable.

This is my slideable content

content.clientHeight is always 0

I've noticed that the following line always return zero but I can't work out why:

var y = content.clientHeight;

Tried all sort of combinations of scope.$watch, setTimeout, scope.$on('$viewContentLoaded', but the contentHeight is always zero. Html is pretty straightforward:

<div slide-toggle="#headerPanel">BTN</div>
<div id="headerPanel" class="slideable">
    <div>
        <ul>
            <li><a href="/blah">Blah</a></li>
            <li><a href="/this">This</a></li>
            <li><a href="/that">That</a></li>
        </ul>
    </div>
</div>

Hash used in slideToggle directive

I noticed the JSFiddle and the tutorial on Github both show usage as slide-toggle="#derp" but it only works for me if i use without the # (ie slide-toggle="derp")

Trigger in Controller?

I just spent countless of hours to achieve this and I just wonder if it is possible anyway.

How can I trigger in a controller?

< ng-click="TriggerHere()" slide-toggle="#derp">Open Smoothly
div id="derp" class="slideable"
open/hidden content
/div

myApp.controller("ContactControllerHeading", function ($scope, $http) {
$scope.Triggerhere= function() {
/* trigger here this slide-toggle="#derp" */
}

});

thanks a lot

npm publish

Hi, could you publish this over npm?

thanks

Only show one open slideable at a time

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!).

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;
            });
        }
    }
});

how to initialize with the image shown and not hidden

I am trying to find ways to make the default state for the images as shown and give the user the option to hide