2.3.7-0 • Published 8 years ago

coapps-framework v2.3.7-0

Weekly downloads
5
License
ISC
Repository
github
Last release
8 years ago

Installation


npm install coapps-framework

Usage


This script imports the startApp function from the module

startApp = require("coapps-framework")

To include the Google Api client add this in your index.html, this also calls the gapiLoaded function when the Google Api client has been loaded

  <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=gapiLoaded"></script>

The gapiLoaded function initializes the all Api properties and passes them into the startApp function

window.gapiLoaded = ->
	rtprops =
    clientId: "/*CLIENT-ID*/"
    appId: "/*APP-ID*/"
		appName: "WRITE APP NAME HERE"
    modelComponent: YOUR TOP LEVEL COMPONENT (A react class)
    initModel: YOUR MODEL INITIALIZER FUNCTION
    registerTypes: YOUR MODEL REGISTERTYPE FUNCTION
    modelWrapper: YOUR MODEL modelWrapper FUNCTION
    logo: THE PATH TO YOUR LOGO PICTURE
    mimeType:THIS SPECIFIES THE FILE TYPE (e.g "application/vnd.#{organisation}.#{appname}.google-apps.drive-sdk")
    serialize: YOUR MODEL SERIALIZE FUNCTION
    googleAnalytics: INITIALIZED ga FUNCTION
    keenWritekey: "/*KEEN API WRITE KEY*/"
    keenProjectid: "/*KEEN PROJECT ID KEY*/"
  startApp(rtprops)

Properties

For help with clientId & appId click here

  • appName: (string) The name of your app

  • modelComponent: (A react class) This is the main react component that renders the view of your app

  • initModel:(model)-> () This is the initializer function to your realtime model Need more infomation? click here

  • registerTypes: YOUR MODEL REGISTERTYPE FUNCTION Need more infomation? click here

  • modelWrapper: The name of the custom object that contains the realtime model

  • logo:

  • mimeType

  • serialize: google "serialize" :)

  • googleAnalytics

Make sure the origin for the client configured properly Make sure the google Drive SDK is enabled Tutorial can be found here The open url must More info on URL and matching patterns

open url should look like:

 https://<HOSTNAME>/<PATH>/<TO>/<APP>/#/file/{ids}

In your Model Component the following propertise can be accessed

To call the google share client dialog on a file currently open

@props.emitter.emit 'share'

To return to the home screen

@props.emitter.emit 'home'

Analytics

We include google and keen-js Analytics Api's, to use the google Analytics Api add this script in the Head tag of your index.html page

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
</script>
<!-- End Google Analytics -->

Styling

In your main sass file, add the following

  @import 'node_modules/coapps-framework/assets/stylesheets/index'

Below is a descriptive list of the sass variables, please include them in your stylesheet

$main-color : Color of major components in framrwork: navbar, odd rows of file table, buttons. Blue by default
$page-background-color :  Color of background. Light blue by default
$main-text-color :  Color of major text in framework: header titles, text in even rows of file table. Dark blue by default
$page-header-border-color : Color of the thin line under the headers of each page
$nav-item-default-color : Color of the four navbar items when they are not hovered on
$nav-item-active-color : Color of the four navbar items when they are hovered on or clicked
$nav-item-active-background-color : Color of the four navbar items background boxes when they are hovered on of clicked
$table-odd-text-color : Color of text in odd rows
$brand-color :  Color of the left hand side brand in the navbar
$button-active-color :  Color of buttons when they are hovered on
$loader-color : The color of the loading element
2.3.7-0

8 years ago

2.3.6-0

8 years ago

2.3.5-0

8 years ago

2.3.4-0

8 years ago

2.3.3-0

8 years ago

2.3.2-beta1

8 years ago

2.3.1-beta1

8 years ago

2.2.1

8 years ago

2.3.0-beta1

8 years ago

2.2.0

8 years ago

2.1.0

8 years ago

2.0.7

8 years ago

2.0.6

8 years ago

2.0.5

8 years ago

2.0.4

8 years ago

2.0.3

8 years ago

2.0.2

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.5.7

9 years ago

0.5.6

9 years ago

0.5.5

9 years ago

0.5.4

9 years ago

0.5.3

9 years ago

0.5.2

9 years ago

0.5.0

9 years ago

0.4.10

9 years ago

0.4.9

9 years ago

0.4.8

9 years ago

0.4.7

9 years ago

0.4.6

9 years ago

0.4.5

9 years ago

0.4.4

9 years ago

0.4.3

9 years ago

0.4.2

9 years ago

0.4.1

9 years ago

0.3.4

9 years ago

0.3.3

9 years ago

0.3.2

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.6

9 years ago

0.2.5

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago