Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

moves developer toolbar into examples.

  • Loading branch information...
commit 28885815625da3e59cfd1d765ff3f0073bafddcb 1 parent d496ebe
@jejacks0n authored
View
1  config.ru
@@ -25,6 +25,7 @@ module Mercury
config.assets.paths << 'uploads'
config.assets.paths << 'distro'
+ config.assets.paths << 'examples/assets'
end
Teabag.setup do |config|
View
133 examples/assets/developer_toolbar.coffee
@@ -0,0 +1,133 @@
+class @DeveloperToolbar extends Mercury.View
+
+ template: 'developer-toolbar'
+ className: 'developer-toolbar'
+ tag: 'ul'
+
+ events:
+ 'mousedown': 'focusMercury' # to keep Mercury focused we need to stop the event
+ 'focusout': 'focusMercury' # to keep Mercury focused we need to stop the event
+ 'click [data-action]': 'delegateAction' # delegate actions to Mercury with custom handling for some
+
+ # Releases a given region.
+ # To remove a region from Mercury we need to call release on the region, which we can access using the data('region')
+ # property. Once a region has been released Mercury will no longer track it -- in this case we also remove the
+ # data-mercury attribute so it will not be recreated on reinitialize. In this example interface we also remove the
+ # controls that allow us to remove/delete the region.
+ #
+ @releaseRegion: (el) ->
+ el = $(el).closest('.region')
+ el.find('[data-mercury]').removeAttr('data-mercury').data('region').release()
+ el.find('.region-controls').remove()
+
+
+ # Deletes a given region.
+ # Similar to releasing a region, we first have to release the region itself to tell Mercury that it's no longer
+ # tracked, and then we remove the entire container.
+ #
+ @deleteRegion: (el) ->
+ el = $(el).closest('.region')
+ el.find('[data-mercury]').data('region').release()
+ el.closest('.region').remove()
+
+
+ # Append ourselves to the body.
+ #
+ build: ->
+ @appendTo($('body'))
+
+
+ # Delegates various actions/events to Mercury, and serves as an example for various ways you can interact with Mercury
+ # externally. Check each method that this delegates to, to see more details on how you can potentially interact.
+ #
+ delegateAction: (e) ->
+ target = $(e.target)
+ [action, value] = [target.data('action'), target.data('value')]
+ switch action
+ when 'save' then @save()
+ when 'toggle_interface' then @toggleInterface()
+ when 'reinitialize' then @reinitialize()
+ when 'add_new_region' then @addNewRegion()
+ when 'html'
+ value = switch value
+ when 'html' then '<table>\n <tr>\n <td>1</td>\n <td>2</td>\n </tr>\n</table>'
+ when 'el' then $('<section class="foo"><h1>testing</h1></section>').get(0)
+ when 'jquery' then $('<section class="foo"><h1>testing</h1></section>')
+ Mercury.trigger('action', action, value)
+ else Mercury.trigger('action', action, value)
+
+
+ # Focuses Mercury.
+ # If you have an interface that you don't want to effect the focused state of Mercury, you will need to handle these
+ # events yourself. By triggering the 'focus' event we're telling Mercury that it should refocus it's active region.
+ #
+ focusMercury: (e) ->
+ e.preventDefault()
+ Mercury.trigger('focus')
+
+
+ # Tells Mercury to save. You can do this by calling the save method on the interface, or you can do it by triggering
+ # the save event. In this case we simply console debug the value that would be saved.
+ #
+ save: ->
+ # Mercury.trigger('save')
+ console.debug(Mercury.interface.save())
+
+
+ # You can toggle the interface, which will make it appear as though Mercury isn't on the page. This can be useful for
+ # various things. You can trigger the 'interface' event, which will toggle for you, or you can call toggleInterface on
+ # the interface.
+ #
+ toggleInterface: ->
+ # Mercury.trigger('interface')
+ Mercury.interface.toggleInterface()
+
+ # If you reload your page, or have added new regions you can tell Mercury to go looking for new regions by triggering
+ # the 'reinitialize' method or by calling the reinitialize method on the interface. Each interface class can implement
+ # this differently, but by default this only looks for new regions.
+ #
+ reinitialize: ->
+ # Mercury.trigger('reinitialize')
+ Mercury.interface.reinitialize()
+
+
+ # In our example we want to be able to add and remove regions as an example of how you can use Mercury to create all
+ # sorts of complex interactions and page designs. If you provided a complex region management tool you could make the
+ # entire page something that can be structured simply with using different region types. In our example we only add
+ # new markdown regions into a set place. Once we've added a region we then tell Mercury to reinitialize.
+ #
+ addNewRegion: ->
+ $('#new_regions').after(@renderTemplate('new-region'))
+ @reinitialize()
+
+
+@JST ||= {}
+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>
+ </div>
+ </div>
+ """
+JST['/mercury/templates/developer-toolbar'] = (scope) ->
+ """
+ <li data-action="save">save</li>
+ <li data-action="toggle_interface">toggle interface</li>
+ <li data-action="reinitialize">reinitialize</li>
+ <li data-action="add_new_region">add new region</li>
+ <hr/>
+ <li data-action="style" data-value="border:1px solid red">style</li>
+ <li data-action="style" data-value="foo">class</li>
+ <hr/>
+ <li data-action="html" data-value="html">html (with html)</li>
+ <li data-action="html" data-value="el">html (with element)</li>
+ <li data-action="html" data-value="jquery">html (with jQuery)</li>
+ <hr/>
+ <li data-action="link" data-value='{"url": "https://github.com/jejacks0n/mercury", "text": "Project Home"}'>link</li>
+ <li data-action="image" data-value='{"url": "http://goo.gl/sZb1K", "text": "Test Image"}'>image</li>
+ <hr/>
+ <li><input type="text"/></li>
+ """
View
42 examples/assets/developer_toolbar.scss
@@ -0,0 +1,42 @@
+.developer-toolbar {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ cursor: default;
+
+ position: fixed;
+ z-index: 10000;
+ right: 10px;
+ bottom: 30px;
+ border: 1px solid #fff;
+ border-radius: 5px;
+ color: #fff;
+ background: rgba(0, 0, 0, .7);
+ padding: 10px;
+ margin: 0;
+ list-style: none;
+ li {
+ cursor: pointer;
+ &:hover {
+ color: #f00;
+ }
+ }
+}
+
+.region {
+ position: relative;
+ .region-controls {
+ position: absolute;
+ right: 0;
+ top: -10px;
+ background: rgba(0, 0, 0, .6);
+ border-radius: 4px;
+ color: #fff;
+ padding: 2px;
+ a {
+ padding: 0 7px;
+ font-style: normal;
+ cursor: pointer;
+ }
+ }
+}
View
16 examples/index.haml
@@ -2,9 +2,8 @@
%html
%head
= csrf_meta_tag
- = javascript_include_tag "mercury/dependencies", "mercury"
- = stylesheet_link_tag "mercury"
- %script jQuery(function() { if (parent.Mercury) parent.Mercury.trigger('initialize') })
+ = javascript_include_tag "mercury/dependencies", "mercury", "developer_toolbar"
+ = stylesheet_link_tag "mercury", "developer_toolbar"
%body
%h1 Mercury2 <a href="/teabag">Specs</a>
@@ -17,6 +16,10 @@
%hr
-# -----------------------------------------------------------------------------------------------------------------
+ %h2#new_regions New Regions
+
+ %hr
+ -# -----------------------------------------------------------------------------------------------------------------
%h2 HTML Regions
#html1(data-mercury="html")
@@ -90,3 +93,10 @@
.highlight {
background: yellow;
}
+
+:javascript
+ jQuery(function() {
+ if (parent.Mercury) parent.Mercury.trigger('initialize')
+ if (!Mercury) return;
+ new DeveloperToolbar()
+ });
View
39 lib/javascripts/mercury/views/base_interface.coffee
@@ -1,8 +1,6 @@
#= require mercury/core/view
-#= require mercury/views/modules/developer_toolbar
class Mercury.BaseInterface extends Mercury.View
- @include Mercury.View.Modules.DeveloperToolbar
logPrefix: 'Mercury.BaseInterface:'
tag: 'mercury'
@@ -10,7 +8,10 @@ class Mercury.BaseInterface extends Mercury.View
events:
'mousedown': 'focusActiveRegion'
'focusout': 'focusActiveRegion'
+ 'mercury:focus': 'focusActiveRegion'
'region:focus': 'onRegionFocus'
+ 'region:release': 'onRegionRelease'
+ 'mercury:reinitialize': 'reinitialize'
constructor: ->
if parent != window && parent.Mercury
@@ -48,6 +49,11 @@ class Mercury.BaseInterface extends Mercury.View
@addAllRegions()
+ reinitialize: ->
+ @initialize()
+ @focusActiveRegion()
+
+
buildInterface: ->
@buildToolbar()
@buildStatusbar()
@@ -77,7 +83,7 @@ class Mercury.BaseInterface extends Mercury.View
bindDefaultEvents: ->
- Mercury.on 'mode', => @focusActiveRegion()
+ Mercury.on 'mode', (mode) => @setMode(mode)
Mercury.on 'action', => @focusActiveRegion()
@@ -87,7 +93,7 @@ class Mercury.BaseInterface extends Mercury.View
addAllRegions: ->
@addRegion(el) for el in @regionElements()
- @region = @regions[0]
+ @region ||= @regions[0]
Mercury.trigger('mode', 'preview') unless @config('interface:enabled')
@@ -96,6 +102,7 @@ class Mercury.BaseInterface extends Mercury.View
addRegion: (el) ->
+ return if $(el).data('region')
region = Mercury.Region.create(el)
@regions.push(region)
@@ -105,10 +112,32 @@ class Mercury.BaseInterface extends Mercury.View
@region?.focus()
+ setMode: (mode) ->
+ @["#{mode}Mode"] = !@["#{mode}Mode"]
+ @focusActiveRegion()
+
+
+ toggleInterface: ->
+ @interfaceHidden ?= @config('interface:enabled')
+ @interfaceHidden = !@interfaceHidden
+ if @interfaceHidden
+ Mercury.trigger('interface:show')
+ Mercury.trigger('mode', 'preview') if @previewMode
+ else
+ Mercury.trigger('interface:hide')
+ Mercury.trigger('mode', 'preview') unless @previewMode
+
+
onRegionFocus: (region) ->
@region = region
+ onRegionRelease: (region) ->
+ @region = @regions[0] if region == @region
+ index = @regions.indexOf(region)
+ @regions.splice(index, 1) if index > -1
+
+
onUnload: ->
return null if @config('interface:silent') || !@hasChanges()
return @t('You have unsaved changes. Are you sure you want to leave without saving them first?')
@@ -122,5 +151,5 @@ class Mercury.BaseInterface extends Mercury.View
save: ->
data = {}
for region in @regions
- data[region.name] = region.toJSON()
+ data[region.name] = region.toJSON(true)
data
View
60 lib/javascripts/mercury/views/modules/developer_toolbar.coffee
@@ -1,60 +0,0 @@
-Mercury.View.Modules.DeveloperToolbar =
-
- included: ->
- @on('init', @buildDeveloperToolbar)
-
-
- buildDeveloperToolbar: ->
- @append(@renderTemplate('developer-toolbar'))
- @delegateEvents 'click .mercury-developer-toolbar [data-action]': 'developerAction'
-
-
- developerAction: (e) ->
- target = $(e.target)
- act = target.data('action')
- val = target.data('value')
- switch act
- when 'interface'
- @hidden ?= @config('interface:enabled')
- @hidden = !@hidden
- if @hidden then Mercury.trigger('interface:show') else Mercury.trigger('interface:hide')
- Mercury.trigger('mode', 'preview')
- when 'html'
- val = switch val
- when 'html' then '<table>\n <tr>\n <td>1</td>\n <td>2</td>\n </tr>\n</table>'
- when 'el' then $('<section class="foo"><h1>testing</h1></section>').get(0)
- when 'jquery' then $('<section class="foo"><h1>testing</h1></section>')
- Mercury.trigger('action', act, val)
- else Mercury.trigger('action', act, val)
-
-
-@JST ||= {}
-JST['/mercury/templates/developer-toolbar'] = (scope) ->
- """
- <ul class="mercury-developer-toolbar">
- <li data-action="interface">toggle interface</li>
- <hr/>
- <li data-action="block" data-value="none">none</li>
- <li data-action="block" data-value="h1">h1</li>
- <li data-action="block" data-value="h2">h2</li>
- <li data-action="block" data-value="h3">h3</li>
- <li data-action="block" data-value="h4">h4</li>
- <li data-action="block" data-value="h5">h5</li>
- <li data-action="block" data-value="h6">h6</li>
- <li data-action="block" data-value="pre">pre</li>
- <li data-action="block" data-value="paragraph">paragraph</li>
- <li data-action="block" data-value="blockquote">blockquote</li>
- <hr/>
- <li data-action="style" data-value="border:1px solid red">style</li>
- <li data-action="style" data-value="foo">class</li>
- <hr/>
- <li data-action="html" data-value="html">html (with html)</li>
- <li data-action="html" data-value="el">html (with element)</li>
- <li data-action="html" data-value="jquery">html (with jQuery)</li>
- <hr/>
- <li data-action="link" data-value='{"url": "https://github.com/jejacks0n/mercury", "text": "Project Home"}'>link</li>
- <li data-action="image" data-value='{"url": "http://goo.gl/sZb1K", "text": "Test Image"}'>image</li>
- <hr/>
- <li><input type="text"/></li>
- </ul>
- """
View
22 lib/stylesheets/mercury/views/_base_interface.scss
@@ -1,22 +1,2 @@
-/* Mercury.Interface
+/* Mercury.BaseInterface
*----------------------------------------------------------------------------*/
-mercury .mercury-developer-toolbar {
- position: fixed;
- z-index: 10000;
- right: 10px;
- bottom: 30px;
- border: 1px solid #fff;
- border-radius: 5px;
- color: #fff;
- background: rgba(0, 0, 0, .7);
- padding: 10px;
- margin: 0;
- list-style: none;
- li {
- cursor: pointer;
- &:hover {
- color: $primary_color;
- }
- }
-}
-
Please sign in to comment.
Something went wrong with that request. Please try again.