Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
github.com/chriscamargo/framer-viewnavigationcontroller
fVNC is a simple view controller for FramerJS that allows you to transition between views with just a couple lines of code.
up
, down
, left
, or right
transitions.animationOptions
.Step 1: Include the module in your protoype.
{ViewNavigationController} = require "ViewNavigationController"
Step 2: Create a new view controller.
vnc = new ViewNavigationController
In this case, I've called my view controller vnc
. By default, the view controller will match the size of the device's screen. You can add width
and height
properties to modify the size of the view controller.
Step 3: Create your views and add them to the view controller.
myFirstView = new Layer
name: "initialView"
width: 750, height: 1334
image: "images/screen01.png"
parent: vnc
mySecondView = new Layer
width: 750, height: 1334
image: "images/screen02.png"
parent: vnc
To add them to the view controller, just make sure the it's their parent. You can see I've also set the name
property of myFirstView
to initialView
. This tells the view controller that I want to start with this view appearing first.
Step 4: Set up a button to change views.
myButton = new Layer
width: Screen.width
height: 88
y: 1130
parent: myFirstView
myButton.on Events.Click, ->
vnc.transition(mySecondView)
Now I can quickly create a button that causes our view controller to change views. I don't need to worry about creating a 'back' button for mySecondView
, the view controller has already done that for me. And if I add more views and create more transitions, the view controler will remember which views I've seen, and will step me back in the correct order.
fVNC comes with a few methods built-in to help you do things like transition backward, or remove the automatically created back buttons from an existing view.
To move backward by one history item, simply call the back()
method.
myBackButton.on Events.Click, ->
vnc.back()
Just remember, if there's no prior view in the history stack, there's nothing to go back to, so nothing will happen.
To remove the back button from a view, just call removeBackButton()
and pass in the view you'd like to affect.
vnc.removeBackButton(mySecondView)
This code will prevent the back button from appearing on mySecondView
.
If you'd like to see new features added to fVNC, just drop me a line on Twitter (@chriscamargo), or better yet, submit a pull request.
change:view
event to notify you when a view change happens.removeBackButton
method. Thanks to @geligelu for finding and reporting this one.FAQs
Unknown package
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.