├── .gitignore
├── .jshintrc
├── Makefile
├── README.md
├── index.js
├── package.json
├── preview.gif
└── test.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .bundle.js
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "asi": true,
 3 |   "browser": true,
 4 |   "browserify": true,
 5 |   "esnext": true,
 6 |   "forin": true,
 7 |   "latedef": "nofunc",
 8 |   "supernew": true,
 9 |   "unused": true,
10 | 
11 |   "globals": {
12 |     "Framer": true,
13 |     "Layer": true,
14 |     "Utils": true,
15 |     "BackgroundLayer": true,
16 |     "Canvas": true,
17 |     "Screen": true
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | start: node_modules
 2 | 	npm run start
 3 | 
 4 | node_modules: package.json
 5 | 	npm install
 6 | 
 7 | clean:
 8 | 	rm -rf .bundle.js node_modules
 9 | 
10 | .PHONY: clean
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Framer web view module
 3 | 
 4 | A simple web view for your prototyping pleasure.
 5 | 
 6 | <img src="preview.gif" alt="Screenshot" width="398">
 7 | 
 8 | ## Usage
 9 | ```shell
10 | $ framer myProject &
11 | $ cd myProject
12 | $ npm install --save peteschaffner/framer-webview
13 | ```
14 | 
15 | index.js:
16 | ```javascript
17 | var Webview = require('framer-webview')
18 | 
19 | var webview = new Webview({
20 |   url: 'https:google.com/design'
21 |   width: Screen.width,
22 |   height: Screen.height
23 | })
24 | ```
25 | ## API
26 | 
27 | ### Webview#url \<string\>
28 | Web page you would like to render. Defaults to `'https://google.com/design'`
29 | 
30 | ### Webview#contentHeight \<number\>
31 | The height of the web view’s content. This, together with the `height`, will
32 | effect the vertical scroll.
33 | 
34 | **NOTE:** To get the appropriate `contentHeight` for the given `url` open said
35 | `url` in Chrome, emulate your target device, and run
36 | `document.body.offsetHeight` in the console. The output should be your
37 | `contentHeight` value.
38 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Web view
 4 |  *
 5 |  * @class
 6 |  * @param {Object} options
 7 |  * @param {string} options.url=http://google.com/design
 8 |  * @param {number} options.contentHeight=2294 - Height of webpage
 9 |  *
10 |  * NOTE: To get the appropriate `contentHeight` for the given `url`
11 |  * open said `url` in Chrome, emulate your target device, and run
12 |  * `document.body.offsetHeight` in the console. The output is your
13 |  * `contentHeight` value.
14 |  */
15 | 
16 | module.exports = class WebView extends ScrollComponent {
17 |   constructor(opts={}) {
18 |     opts.url = opts.url || "http://google.com/design"
19 |     opts.backgroundColor = opts.backgroundColor || "#333"
20 |     opts.contentHeight = opts.contentHeight || 2294
21 | 
22 |     super(_.extend(opts, {
23 |       scrollHorizontal: false
24 |     }))
25 | 
26 | 
27 |     this._page = new Layer({
28 |       superLayer: this.content,
29 |       width: this.width,
30 |       height: opts.contentHeight,
31 |       backgroundColor: opts.backgroundColor
32 |     })
33 | 
34 |     this._page.html = `<iframe
35 |                          src="${opts.url}"
36 |                          width="${this.width}"
37 |                          height="${opts.contentHeight}">
38 |                        </iframe>`
39 | 
40 |     this._url = opts.url
41 |     this._contentHeight = opts.contentHeight
42 |     this._iframe = this.querySelector('iframe')
43 | 
44 |     // update _page and _iframe `height` accordingly
45 |     this.on('change:width', () => {
46 |       this._page.width = this.width
47 |       this._iframe.width = this.width
48 |     })
49 |   }
50 | 
51 |   get url() { return this._url }
52 |   set url(value) {
53 |     this._url = value
54 |     this._iframe.src = value
55 |   }
56 | 
57 |   get contentHeight() { return this._contentHeight }
58 |   set contentHeight(value) {
59 |     this._contentHeight = value
60 |     this._iframe.height = value
61 |     this._page.height = value
62 |     this.updateContent()
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "framer-webview",
 3 |   "version": "0.1.0",
 4 |   "description": "Web view module for Framer.js",
 5 |   "author": {
 6 |     "name": "Pete Schaffner",
 7 |     "email": "pjschaffner@gmail.com"
 8 |   },
 9 |   "license": "MIT",
10 |   "keywords": [
11 |     "prototyping",
12 |     "framerjs"
13 |   ],
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+ssh://git@github.com/peteschaffner/framer-webview.git"
17 |   },
18 |   "main": "index.js",
19 |   "devDependencies": {
20 |     "framer-cli": "^0.1.0"
21 |   },
22 |   "scripts": {
23 |     "start": "framer preview"
24 |   },
25 |   "framer": { "type": "module" }
26 | }
27 | 


--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peteschaffner/framer-webview/690b88b4e0120513ff240677ce31d8384b3f9896/preview.gif


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 | 
 6 |     <meta name="format-detection" content="telephone=no">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 9 | 
10 |     <script type="text/javascript">
11 |     // This automatically sets the right viewport scale on mobile devices
12 |     (function() {
13 |     var scale = 1 / window.devicePixelRatio
14 |     document.write("<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no\">")
15 |     })()
16 |     </script>
17 | 
18 |     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon/apple-touch-icon-144x144-precomposed.png">
19 |     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon/apple-touch-icon-114x114-precomposed.png">
20 |     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon/apple-touch-icon-72x72-precomposed.png">
21 |     <link rel="apple-touch-icon-precomposed" href="icon/apple-touch-icon-precomposed.png">
22 | 
23 |     <style type="text/css" media="screen">
24 | 
25 |     * {
26 |       margin:0;
27 |       padding:0;
28 |       border:none;
29 |       -webkit-user-select:none;
30 |       -webkit-tap-highlight-color: rgba(0,0,0,0)
31 |     }
32 | 
33 |     body {
34 |       background: white;
35 |       font: 28px/1em "Helvetica";
36 |       color: #FFF;
37 |     }
38 | 
39 |     a {
40 |       color: #bfbfbf;
41 |     }
42 | 
43 |     ::-webkit-scrollbar {
44 |       display: none;
45 |     }
46 | 
47 |     </style>
48 | 
49 |   </head>
50 |   <body>
51 |     <script src="http://builds.framerjs.com/latest/framer.js"></script>
52 |     <script src=".bundle.js"></script>
53 | 
54 |     <script>
55 | 
56 |       var WebView = require('.')
57 | 
58 |       Framer.Device = new Framer.DeviceComponent({
59 |         deviceType: 'iphone-6-silver'
60 |       })
61 |       Framer.Device.setupContext()
62 |       // Make all dimensions relative points (i.e. @1x)
63 |       Framer.Device.contentScale = 2
64 |       Framer.Device.content.width = Screen.width / Framer.Device.contentScale
65 |       Framer.Device.content.height = Screen.height / Framer.Device.contentScale
66 | 
67 |       webview = new WebView({
68 |         width: Screen.width,
69 |         height: Screen.height
70 |       })
71 | 
72 |     </script>
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------