This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Repository files navigation

Welcome to Authorly

Here be Dragons

Setup the application

  1. Clone the repository on your machine
  2. Create a suitable config/database.yml (production runs on MySQL)
  3. bundle install
  4. bundle exec rake db:create:all
  5. bundle exec rake db:migrate
  6. bundle exec rake db:seed
  7. bundle exec rails server starts the server

Setup for getting transcoded video and audio versions

bundle exec zencoder_fetcher --loop --interval 10 --url 'http://127.0.0.1:3000/zencoder' <ZENCODER_API_KEY>

Setup for creating mobile applications

Install dependencies:

  1. Install redis

  2. Clone the mobile code

    cd ../.. git clone git@github.com:curiousminds/interapptive.git mv interapptive Crucible

Start workers:

  1. redis-server starts redis
  2. bundle exec rake environment resque:work QUEUE='ios_compilation' RAILS_ENV=development starts the compilation queue

Start compilation from the web application ('Compile to iOS' icon). Currently does not work because the code assumes it is run by a certain user, needs the keychain password in config/keychain_password.txt. Stopped trying to make this work on my machine. 2013-06-19@dira

Tests

Rails tests

`bundle exec rake`

Continuous testing:

`bundle exec guard -i`

Javascript tests

  1. Install PhantomJS

In the browser:

`bundle exec guard -i`

The output contains the URL where it mounted the jasmine runner (something like http://localhost:[port]/jasmine). That URL works in the browser and you have the full UI (i.e. you can click on a test and it will only run that test)

Command line:

`guard-jasmine`
or
`bundle exec rake guard:jasmine`

Write Javascript tests

Write your model, view or collections tests under corresponding directories inside spec/javascripts/coffeescripts.

Builder

Synopsis

Builder is a custom widget framework/base class that provides a relevant API for making and running different type of widgets, which are objects that can be added to the canvas. Builder abstracts cocos2d-js which is a two-dimensional drawing library that's primarily used functionally. In this way, Builder provides a nice inheritable OO interface, which is great for testing and great for reuse.

Find it in app/assets/javascripts/builder/.

Some important Cocos2d Concepts

First, you should see this link for more information about the core concepts of Cocos.

To summarize, however:

  • A scene is pretty self-explanatory. Think levels on a video game, or multiple, independent televisions screens. They're mostly independent of each other, but they have some logic for transitioning between each other
  • The director, a singleton object that handles transitions between scenes, and handles main window instantiation in py-cocos2d;
  • Layers are used to handle z-orientation of groups of items. Frequently are the location where event handlers are defined, and respond to events from front to back until one layer handles an event.
  • Sprites are 2d images that can be transformed.
  • Events are part of a standard Subscribe pattern. In short, some items act as emitters, which send out notifications when they receive certain stimulus. Other objects that have subscribed to the notifications will receive this notification and can chose to respond to it (called Listeners, usually).
    • Cocos uses events to specify user input, window status change, and to communicate across parts of a framework (decoupling).
  • CocosNode is the superclass of the above (omitting the director?), and provides some default common functionality like positioning, controlling child elements, time management, and rendering.

cc is the Cocos2d namespace.

Cocos2d-html links:

Loading

  1. application.js, with all generic js
  2. /storybook/show starts loading cocos2d
  3. the cocos2d configuration indicates that, when cocos2d is ready, builder should be laoded
  4. cocos2d automatically loads /main.js, which is redirected (from Rails) to /assets/init_storybook.js
  5. which initializes the builder and makes the canvas work

Widgets

Widgets are represented by two classes - a Backbone Model (that stores and manages the widget data) and a Builder View (which takes care of representing it on the UI and managing events).

How widgets work

  1. The WidgetLayer manages widget space. It performs the following tasks too:

    • sets up a double-click watcher for the canvas;
    • defines methods for adding and removing widgets;
    • defines a method for getting a widget at a point
    • handles touch behaviour/moving and translates that into mouse behaviour.
  2. The Widget parent class is what all widgets inherit from. It defines:

    • abstract mouseover/mouseout/dblclick responses;
    • abstract highlighting
    • opacity setters and getters

Fixtures

Reside in /spec/fixtures

Loading:

> cp spec/fixtures/stranger-in-the-woods.yml db/data.yml
> bundle exec rake db:data:load

Grab the JSON - in the web inspector console:

> storybook = App.currentSelection.get('storybook')
> json = (new App.JSON(storybook)).app
> JSON.stringify(json)

Run the iOS simulator:

  • copy the json from the web inspector console (without the encompassing quotes)

  • paste it over HelloWorld/Resources/structure-ipad.json (in the interapptive project)

  • fix the asset paths by running

    sed -i '' 's/read_it_myself/read-it-myself/g;s/auto_play/autoplay/g;s/read_to_me/read-to-me/g;s//assets/sprites///g;s/https://interapptive.s3.amazonaws.com/[a-z_]/[0-9]///g' HelloWorld/Resources/structure-ipad.json

  • run the iOS project ( HelloWorld/ios in the interraptive repo)

About

Authorly web-based storybook builder

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages