Skip to content

techvalidate/pano-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f41629e · Jun 26, 2019
Jun 24, 2019
Aug 16, 2018
Mar 28, 2018
May 4, 2018
Aug 16, 2018
May 17, 2019
Jun 24, 2019
Jun 24, 2019
Mar 28, 2018
Mar 28, 2018
Aug 10, 2018
Aug 17, 2018
May 17, 2019

Repository files navigation

Pano JS

Installation

In your package.json:

"pano-js": "git+ssh://[email protected]:techvalidate/pano-js"

Build

  • yarn build
  • yarn watch

Usage

In your webpack application.js pack:

require('pano-js')

// ...or

import 'pano-js'

Modules

  import Pano from 'pano-js'

  const FlyoutModal = Pano.Controllers.Modals.Flyout
  const UI = Pano.UI

  //...or
  import { Controllers, UI} from 'pano-js'

  const FlyoutModal = Controllers.Modals.Flyout

  UI.click('.btn' ...)

Dependencies

  • jQuery v3.2.1

Loading Pano-JS Stimulus controllers in your application

Stimulus typically uses require contexts to load the controllers in your application. Pano-JS comes a collection of common controllers for modals, popovers, etc. You'll want to load them differently. The stimulus application will allow you to register controllers manually.

Pano-JS exports a helper function called registerControllers that takes your application instance and the imported Controllers hash, and will register them auto-magically.

import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
import { Controllers, registerControllers } from 'pano-js'

const application = Application.start()
const context = require.context('../guide/controllers', true, /\.js$/)

// Load all Pano-JS controllers
registerControllers(application, Controllers)
// Load all application controllers
application.load(definitionsFromContext(context))

Development

You can use yarn link to easily make updates to Pano-JS and see real time updates in your application.

  1. Run yarn link in the pano-js repo to set up the link
  2. Run yarn link pano-js in your application, this sets up the symlink in your node_modules folder.
  3. Run yarn webpack -w to have webpack watch changes in pano-js
  4. Run webpack-dev-server in your application Tip: When using webpacker, make sure to set watchOptions in your environment.js to allow webpack to detect changes in your pano-jsfolder
     const config = environment.toWebpackConfig()
     config.watchOptions = { ignored: [/node_modules([\\]+|\/)+(?!\pano-js)/]}

Another Tip: When you're in the pano test_app, to watch for changes run bin/webpack -w, rather than bin/webpack-dev-server. This will not reload your browser, but you can use another gem like Guard.

To unlink run yarn unlink pano-js and then run yarn again to reinstall from github.