Streaming live at 10am (PST)

Webflow Javascript APIs/Docs?


#1

So today I was integrating Google's Picasa API with my Webflow site and noticed that the Webflow "Light Box" wasn't working as expected after grabbing the Picasa assets via .ajax().

After a quick look at the Webflow.js, it was apparent that it initializes the lightbox stuff on load, and is not watching the DOM for new nodes with the w-lightbox class. Anyway, no big deal, I was able to re-initialize the lightbox code via $('.w-lightbox').webflowLightBox() (after digging into the code a bit more) and my integration worked fine.

After that, I wanted to figure out how to "pad" or "offset" the scroll-to-anchor behavior to compensate for my fixed header. I read that Webflow requires certain conditions (eg. <header> directly on <body>, etc.) and it just worked. Well that's wonderful -- no hacking necessary. I just changed my <div> out for a <header>. Hooray.

Both of these situations got me wondering -- what documentation is available for the Webflow.js Javascript? I found this, but nothing else really. Is there a status on a public github repo? Breaking out the modules?


#2

Hi @dkenzik, nice work digging into the source of webflow.js +1

While we do intend to create a repo for those modules, there are still some ideas we would like to explore in regards to developer support, before we make it official.

The JavaScript landscape is evolving very quickly– ES6, Babel, Webpack, etc.. and we are doing our best to stay ahead of the game.


#3

@danro - Thanks for the response. I'm happy to hear the Webflow team is staying current with JS tech. It's definitely evolving!

Until you are prepared to fully open-source Webflow.js, is there any way you can at least publish the current raw version of it somewhere?

Just this morning I made a change to support HTML in the Lightbox Image Caption area (a very simply .text() to .html() change around the beautified code's line 829). Next, I need to dig into supporting dynamically sized captions (the hard single-line limit is a potential stopper for my current project which is using many Picasa albums that have links in their captions)

My concern with beautifying the code, and then make changes there, is that it will be terribly inefficient to keep track of changes that I make and re-apply them for subsequent versions or even future PRs. My preference is to just maintain small patches of these changes that I can then apply as necessary against the canonical source, swiftly and easily (of course until it's fully open-source.)

Anything your team can do in the meantime to facilitate this type of workflow?

-Dave


#4

Hi Dave,

Currently, the best we can do is provide the generated JS that gets shipped on every publish / export. We only minify certain parts of this file (the 3rd party plugins), to help with readability.

For your particular case with the async lightbox captions, I would recommend you try processing the caption elements after your ajax call. Something like this might work:

$('.w-lightbox-caption').each(function(i, el) {
  el.innerHTML = el.textContent;
});

... or if you need to process them more than once, you could do this:

$('.w-lightbox-caption').each(function(i, el) {
  el._caption = el._caption || el.textContent;
  el.innerHTML = el._caption;
});

Hope that helps, thank you for your patience with our developer workflow!

-Dan


#5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.