AngularJS directive for slide-down animation with lazy rendering

AngularJS directive for slide-down animation with lazy rendering

In this blog post I am going to talk about a directive I created earlier that is available in my ng-slide-down Github repository.

In the company I am working for we have a lot of widgets that are expanded via jQuery "slideToggle" function, thus when I make new components I have to adhere to existing style. As you have probably guessed new parts are written in Angular.

Another requirement I had to satisfy is that we can have a lot of these widgets on a single and rendering them all in Angular would be wildly inefficient, so it had to only render HTML if widget was expanded.

In order to use resulting directive all you need to is to add a directive ng-slide-down to your HTML element and pass a variable that is going to control it:


<div ng-slide-down="slideDown">

Code

So let's start writing the code (fiddle).


Lazy rendering

In the next step we are going to add an option to stop angular from rendering HTML unless element is expanded


<div ng-slide-down="slideDown" lazy-render>

Final steps

Now we need to take care of a few extra details. Like, for example, what should we do if user closes widget before it's been fully expanded? In this case we should cancel promise. Another case we need to take care of is change in children's height. Final code looks as following

P.S.

Make sure to update your Angular JS because older versions contain bug (fixed) in the way ng-transclude and ng-if directives interact.

Be careful in general when you are using ng-if because it creates new scope.

Popular posts from this blog

HTTP server in Ruby 3 - Fibers & Ractors

Image
This is part #2. Head over to part #1 to learn about HTTP in Ruby. Motivation Historically Ruby's been lacking in the concurrency department. Ruby has "native" threads (prior to 1.9 there were only "green"), which means there can be multiple threads controlled by an OS, but only 1 thread can be executed at a time, this is managed via Global Interpreter Lock (GIL). However, native calls and I/O calls can be executed in parallel. During an I/O call, a thread gives up control and waits for a signal that the I/O has finished. This means I/O heavy applications can benefit from multiple threads. In this article we are going to explore different concurrency modes for our HTTP server: Single-threaded Multi-threaded Fibers Ractors Single-threaded Let's start simple and see how a single threaded HTTP server could look like ( full code ): def start socket = TCPServer.new(HOST, PORT) sock...
Read more

Next.js: restrict pages to authenticated users

Image
Many websites have pages that need to be restricted to authenticated users, for example profile pages or dashboards. Next.js web framework comes with a lot of functionality built-in JS compilation, rendering code on server and caching. When it comes to most other aspecs, it's up to a programmer to build, including such needed functionality as restricting access to some pages only to authenticated users. In this article we are going to build just that: a function that augments a page object, that could be used like that: Here's the implementation in TypeScript: In order to make it work on server we are going to need one more utility function fetchWithCookies . When making HTTP request from inside a Web Browser, the browser automatically sends cookies with each requests and then stores new cookies if a response comes in with set-cookie header. On server-side we need to build this feature ourselves, because neither Next.js nor NodeJS make any a...
Read more

Migration locks for TypeORM

Image
Schema migrations is a must-have functionality for any DB framework. TypeORM provides decent utilities for dealing with migrations, however having a decade of experience in Ruby on Rails I got really spoiled and take some features for granted. One of these features is locking a database while a migration going on so 2 processes running concurrently don't step on each other's toes. This is also important when you run migrations in Kubernetes before launching your app. I was really surprised to find out that this basic feature is not supported , so decided to implement it on my own. Implementation // typeormMigrationUtils.ts import { Connection, createConnection } from 'typeorm' import config from '../ormconfig' import CRC32 from 'crc-32' const MIGRATOR_SALT = 2053462845 async function withAdvisoryLock( connection: Connection, callback: () => Promise<void> ): Promise<boolean> { // generate a unique lock...
Read more