A module to enable loading additional CSS and JS dynamically in Framer
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
DynamicLoader.coffee
LICENSE
README.md
package.json

README.md

framer-DynamicLoader

A module that braeks the barriars between 3rd party web development libraries and Framer, which enable loading additional CSS and JS dynamically in Framer.

Demo

Demo loading Chartist.js with DynamicLoader in Framer. Here is live demo. demo

Please check the demo branch.

Getting started

Add it in your Framer project

  • Create a new Framer project
  • Download DynamicLoader.coffee and put it in the module folder of the project
  • At the top of your code, write {DynamicLoader} = require "DynamicLoader"

Install with npm

If you're familiar with npm, you could install with following commands.

$ cd <myProject>.framer
$ npm install framer-dynamicloader
$ ln node_modules/framer-dynamicloader/DynamicLoader.coffee modules/

Quickstart

If you only have one file to load...

DynamicLoader.add('script.js').then(->
// When script.js loaded successfully...
// Put your code Here
)

If you have many files to load...

#Load files in series
DynamicLoader.series(['one.js', 'two.css', ...]).then(->
// When all script loaded one by one successfully...
).catch(->
// When a script loaded failed...
)

#Load files in parallel
DynamicLoader.series(['one.js', 'two.css', ...]).then(->
// When all script loaded successfully...
.catch(->
// When a script loaded failed...
)

Usage

Framer-DynamicLoader was built with Promise model and supports Promise operation. Check the idea about Promise.

How to load local script

Put the script under your framer project and use reletive path to link the file.
Here is my suggested way to load local file:

project.framer  
├── app.coffee  
├── app.js  
├── index.html 
├── module
|		└── DynamicLoader.coffee
├── vendor	<< put the file here  
|		├── A.css
|		└──  B.js	
...

In your app.coffee

{DynamicLoader} = require "DynamicLoader"
DynamicLoader.series(['./vendor/A.css', './vendor/B.js').then(->
...
)

Feedback

Feel free to contact me if you have any questions about this project.
Please send a message to me here on GitHub, @luciendeer on Twitter. Cheers!