Skip to content
Browse files

renames developer toolbar to developer interface, and provides better…

… documentation to some of the examples.
  • Loading branch information...
1 parent e8f48ca commit 082eceb291a6e99c37990df69735c688af0b257a @jejacks0n committed Apr 7, 2013
View
21 examples/assets/developer_toolbar.coffee → examples/assets/developer_interface.coffee
@@ -1,7 +1,14 @@
-class @DeveloperToolbar extends Mercury.View
-
- template: 'developer-toolbar'
- className: 'developer-toolbar'
+# Developer Interface
+#
+# This provides examples for how to do various things with Mercury.
+#
+# We can use the Mercury Core library to create things like views, models, regions, etc. Dive into the code to check out
+# whats possible. It has a lot of comments and is pretty easy to read.
+#
+class @DeveloperInterface extends Mercury.View
+
+ template: 'developer-interface'
+ className: 'developer-interface'
tag: 'ul'
events:
@@ -107,12 +114,12 @@ JST['/mercury/templates/new-region'] = (scope) ->
<div class="region">
<div data-mercury="markdown" id="new_region_#{Math.floor(Math.random() * 10000)}">Lorem ipsum</div>
<div class="region-controls">
- <a class="delete" onclick="DeveloperToolbar.deleteRegion(this)">delete</a>|
- <a class="release" onclick="DeveloperToolbar.releaseRegion(this)">release</a>
+ <a class="delete" onclick="DeveloperInterface.deleteRegion(this)">delete</a>|
+ <a class="release" onclick="DeveloperInterface.releaseRegion(this)">release</a>
</div>
</div>
"""
-JST['/mercury/templates/developer-toolbar'] = (scope) ->
+JST['/mercury/templates/developer-interface'] = (scope) ->
"""
<li data-action="save">save</li>
<li data-action="toggle_interface">toggle interface</li>
View
2 examples/assets/developer_toolbar.scss → examples/assets/developer_interface.scss
@@ -1,4 +1,4 @@
-.developer-toolbar {
+.developer-interface {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
View
17 examples/index.haml
@@ -2,8 +2,8 @@
%html
%head
= csrf_meta_tag
- = javascript_include_tag "mercury/dependencies", "mercury", "developer_toolbar"
- = stylesheet_link_tag "mercury", "developer_toolbar"
+ = javascript_include_tag "mercury/dependencies", "mercury", "developer_interface"
+ = stylesheet_link_tag "mercury", "developer_interface"
%body
%h1 Mercury2 <a href="/teabag">Specs</a>
@@ -95,8 +95,11 @@
}
:javascript
- jQuery(function() {
- if (parent.Mercury) parent.Mercury.trigger('initialize')
- if (!Mercury) return;
- new DeveloperToolbar()
- });
+ // If we're in an an iframe and Mercury is present in the parent we can shortcut the load time by initializing
+ // manually. This will tell Mercury that this document has loaded and it can begin looking for regions.
+ if (parent.Mercury) parent.Mercury.trigger('initialize')
+
+ // If we're editing this page let's instantiate the developer toolbar for example usage/interactions. The developer
+ // toolbar has many examples of how you can interact with Mercury. Also note that if we're in an iframe or not Mercury
+ // will be exposed to us after it's been initialized.
+ if (Mercury) new DeveloperInterface()

0 comments on commit 082eceb

Please sign in to comment.
Something went wrong with that request. Please try again.