mercury-rails 0.5.0 → 0.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (94) hide show
  1. data/app/assets/images/mercury/toolbar/{snippetable → snippets}/buttons.png +0 -0
  2. data/app/assets/javascripts/mercury.js +58 -84
  3. data/app/assets/javascripts/mercury/lightview.js.coffee +1 -1
  4. data/app/assets/javascripts/mercury/mercury.js.coffee +1 -1
  5. data/app/assets/javascripts/mercury/modal.js.coffee +1 -1
  6. data/app/assets/javascripts/mercury/modals/insertmedia.js.coffee +13 -9
  7. data/app/assets/javascripts/mercury/native_extensions.js.coffee +0 -6
  8. data/app/assets/javascripts/mercury/page_editor.js.coffee +19 -19
  9. data/app/assets/javascripts/mercury/region.js.coffee +11 -10
  10. data/app/assets/javascripts/mercury/regions/{editable.js.coffee → full.coffee} +18 -18
  11. data/app/assets/javascripts/mercury/regions/image.js.coffee +13 -34
  12. data/app/assets/javascripts/mercury/regions/{markupable.js.coffee → markdown.coffee} +21 -22
  13. data/app/assets/javascripts/mercury/regions/simple.js.coffee +10 -39
  14. data/app/assets/javascripts/mercury/regions/{snippetable.js.coffee → snippets.js.coffee} +8 -7
  15. data/app/assets/javascripts/mercury/snippet.js.coffee +1 -1
  16. data/app/assets/javascripts/mercury/snippet_toolbar.js.coffee +3 -2
  17. data/app/assets/javascripts/mercury/toolbar.button.js.coffee +2 -2
  18. data/app/assets/javascripts/mercury/toolbar.button_group.js.coffee +2 -2
  19. data/app/assets/javascripts/mercury/toolbar.js.coffee +2 -2
  20. data/app/assets/javascripts/mercury/uploader.js.coffee +2 -1
  21. data/app/assets/stylesheets/mercury/all_images.css.erb +2 -2
  22. data/app/assets/stylesheets/mercury/dialog.css +2 -2
  23. data/app/assets/stylesheets/mercury/lightview.css +14 -14
  24. data/app/assets/stylesheets/mercury/modal.css +1 -1
  25. data/app/assets/stylesheets/mercury/toolbar.css +1 -1
  26. data/features/generators/install.feature +1 -1
  27. data/features/loading/loading.feature +2 -2
  28. data/features/regions/{editable → full}/advanced_editing.feature +0 -0
  29. data/features/regions/full/basic_editing.feature +196 -0
  30. data/features/regions/{editable → full}/inserting_links.feature +12 -12
  31. data/features/regions/{editable → full}/inserting_media.feature +15 -15
  32. data/features/regions/{editable → full}/inserting_snippets.feature +15 -15
  33. data/features/regions/{editable → full}/inserting_special_characters.feature +2 -2
  34. data/features/regions/full/inserting_tables.feature +109 -0
  35. data/features/regions/{editable → full}/pasting.feature +0 -0
  36. data/features/regions/{editable → full}/uploading_images.feature +0 -0
  37. data/features/regions/{markupable → markdown}/advanced_editing.feature +0 -0
  38. data/features/regions/{markupable → markdown}/basic_editing.feature +0 -0
  39. data/features/regions/{markupable → markdown}/inserting_links.feature +0 -0
  40. data/features/regions/{markupable → markdown}/inserting_media.feature +0 -0
  41. data/features/regions/{markupable → markdown}/inserting_snippets.feature +0 -0
  42. data/features/regions/{markupable → markdown}/inserting_special_characters.feature +0 -0
  43. data/features/regions/{markupable → markdown}/inserting_tables.feature +0 -0
  44. data/features/regions/{markupable → markdown}/uploading_images.feature +0 -0
  45. data/features/regions/{snippetable → snippets}/advanced_editing.feature +0 -0
  46. data/features/regions/{snippetable → snippets}/basic_editing.feature +0 -0
  47. data/features/regions/{snippetable → snippets}/inserting_snippets.feature +0 -0
  48. data/features/saving/saving.feature +8 -8
  49. data/features/step_definitions/mercury_steps.rb +13 -13
  50. data/features/support/mercury_selectors.rb +3 -3
  51. data/lib/generators/mercury/install/images/images_generator.rb +3 -0
  52. data/lib/generators/mercury/install/install_generator.rb +5 -5
  53. data/lib/mercury/version.rb +1 -1
  54. data/spec/dummy/app/assets/javascripts/application.js +0 -15
  55. data/spec/dummy/{public → app/assets/javascripts}/prototype.js +0 -0
  56. data/spec/dummy/app/assets/stylesheets/application.css.scss +110 -0
  57. data/spec/dummy/public/frame.html +1 -1
  58. data/spec/dummy/public/index.html +92 -216
  59. data/spec/javascripts/mercury/lightview_spec.js.coffee +1 -1
  60. data/spec/javascripts/mercury/modal_spec.js.coffee +1 -1
  61. data/spec/javascripts/mercury/modals/insertmedia_spec.js.coffee +41 -2
  62. data/spec/javascripts/mercury/page_editor_spec.js.coffee +19 -18
  63. data/spec/javascripts/mercury/region_spec.js.coffee +12 -14
  64. data/spec/javascripts/mercury/regions/{editable_spec.js.coffee → full_spec.js.coffee} +16 -16
  65. data/spec/javascripts/mercury/regions/image_spec.js.coffee +3 -3
  66. data/spec/javascripts/mercury/regions/{markupable_spec.js.coffee → markdown_spec.js.coffee} +18 -18
  67. data/spec/javascripts/mercury/regions/simple_spec.js.coffee +3 -3
  68. data/spec/javascripts/mercury/regions/{snippetable_spec.js.coffee → snippets_spec.js.coffee} +53 -53
  69. data/spec/javascripts/mercury/snippet_spec.js.coffee +1 -1
  70. data/spec/javascripts/mercury/snippet_toolbar_spec.js.coffee +2 -2
  71. data/spec/javascripts/mercury/toolbar.button_group_spec.js.coffee +5 -5
  72. data/spec/javascripts/mercury/toolbar.button_spec.js.coffee +6 -6
  73. data/spec/javascripts/mercury/toolbar_spec.js.coffee +4 -4
  74. data/spec/javascripts/mercury/uploader_spec.js.coffee +5 -5
  75. data/spec/javascripts/templates/mercury/page_editor.html +4 -4
  76. data/spec/javascripts/templates/mercury/region.html +1 -1
  77. data/spec/javascripts/templates/mercury/regions/full.html +1 -0
  78. data/spec/javascripts/templates/mercury/regions/image.html +1 -1
  79. data/spec/javascripts/templates/mercury/regions/markdown.html +1 -0
  80. data/spec/javascripts/templates/mercury/regions/simple.html +1 -3
  81. data/spec/javascripts/templates/mercury/regions/snippets.html +4 -0
  82. metadata +65 -75
  83. data/app/assets/javascripts/mercury_loader.js +0 -193
  84. data/app/assets/javascripts/mercury_overrides.js +0 -6
  85. data/app/assets/stylesheets/mercury_overrides.css +0 -17
  86. data/features/regions/editable/basic_editing.feature +0 -196
  87. data/features/regions/editable/inserting_tables.feature +0 -109
  88. data/spec/dummy/app/assets/stylesheets/application.css +0 -13
  89. data/spec/dummy/app/helpers/application_helper.rb +0 -2
  90. data/spec/dummy/public/404.html +0 -26
  91. data/spec/dummy/public/422.html +0 -26
  92. data/spec/dummy/public/canvastest.html +0 -103
  93. data/spec/javascripts/templates/mercury/regions/editable.html +0 -3
  94. data/spec/javascripts/templates/mercury/regions/snippetable.html +0 -4
@@ -78,7 +78,7 @@ When /^(?:|I )(?:change|set) the contents? of (.*?) to (.*?)$/ do |region_locato
78
78
  find("##{region_id}", :message => "Unable to locate a region matching '##{region_id}'")
79
79
  page.driver.execute_script <<-JAVASCRIPT
80
80
  var element = top.jQuery(document).find('##{region_id}');
81
- if (element.data('type') == 'markupable') {
81
+ if (element.data('type') == 'markdown') {
82
82
  element.find('textarea').val(#{content});
83
83
  } else {
84
84
  var region = top.mercuryInstance.getRegionByName('#{region_id}');
@@ -95,19 +95,19 @@ end
95
95
 
96
96
  When /^(?:|I )(?:make|have) a selection (?:in (.*?) )?for "([^"]*)"$/ do |region_locator, selector|
97
97
  step(%Q{I can simulate complex javascript events})
98
- # assume the first editable region if one wasn't provided'
99
- region_selector = region_selector_for(region_locator || 'the editable region')
98
+ # assume the first full region if one wasn't provided'
99
+ region_selector = region_selector_for(region_locator || 'the full region')
100
100
  page.driver.within_frame('mercury_iframe') do
101
101
  find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
102
102
  find("#{region_selector} #{selector}", :message => "Unable to locate a match for '#{selector}' inside '#{region_locator}'")
103
103
  page.driver.execute_script <<-JAVASCRIPT
104
104
  var element = top.jQuery(document).find('#{region_selector}');
105
- if (element.data('type') == 'markupable') {
105
+ if (element.data('type') == 'markdown') {
106
106
  alert('unimplemented');
107
107
  throw('unimplemented');
108
108
  } else {
109
109
  var selectedElement = element.find('#{selector}');
110
- var selection = new top.Mercury.Regions.Editable.Selection(window.getSelection(), document);
110
+ var selection = new top.Mercury.Regions.Full.Selection(window.getSelection(), document);
111
111
  selection.selectNode(selectedElement.get(0));
112
112
  selectedElement.simulate('mouseup');
113
113
  }
@@ -119,8 +119,8 @@ end
119
119
  When /^(?:|I )double click on (.*?) in (.*?)$/ do |locator, region_locator|
120
120
  step(%Q{I can simulate complex javascript events})
121
121
  selector = selector_for(locator)
122
- # assume the first editable region if one wasn't provided'
123
- region_selector = region_selector_for(region_locator || 'the editable region')
122
+ # assume the first full region if one wasn't provided'
123
+ region_selector = region_selector_for(region_locator || 'the full region')
124
124
  page.driver.within_frame('mercury_iframe') do
125
125
  find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
126
126
  find("#{region_selector} #{selector}", :message => "Unable to locate a match for '#{selector}' inside '#{region_locator}'")
@@ -137,7 +137,7 @@ Then /^the contents? of (.*?) should be "([^"]*)"$/ do |region_locator, content|
137
137
  find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
138
138
  results = page.driver.execute_script <<-JAVASCRIPT
139
139
  var element = top.jQuery(document).find('#{region_selector}');
140
- if (element.data('type') == 'markupable') {
140
+ if (element.data('type') == 'markdown') {
141
141
  return element.find('textarea').val();
142
142
  } else {
143
143
  return element.html();
@@ -222,7 +222,7 @@ When /^(?:|I )(?:drag|drop) (.*?) (?:into|on) (.*?)$/ do |snippet_locator, regio
222
222
  find("##{region_id}", :message => "Unable to locate a region matching '##{region_id}'")
223
223
  page.driver.execute_script <<-JAVASCRIPT
224
224
  var element = top.jQuery(document).find('##{region_id}');
225
- if (element.data('type') == 'markupable') {
225
+ if (element.data('type') == 'markdown') {
226
226
  alert('unimplemented');
227
227
  throw('unimplemented');
228
228
  } else {
@@ -238,12 +238,12 @@ end
238
238
  When /^(?:|I )hover over (.*?)(?: in (.*?))?$/ do |locator, region_locator|
239
239
  step(%Q{I can simulate complex javascript events})
240
240
  selector = selector_for(locator)
241
- region_selector = region_selector_for(region_locator || 'the editable region')
241
+ region_selector = region_selector_for(region_locator || 'the full region')
242
242
  page.driver.within_frame('mercury_iframe') do
243
243
  find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
244
244
  page.driver.execute_script <<-JAVASCRIPT
245
245
  var element = top.jQuery(document).find('#{region_selector}');
246
- if (element.data('type') == 'markupable') {
246
+ if (element.data('type') == 'markdown') {
247
247
  alert('unimplemented');
248
248
  throw('unimplemented');
249
249
  } else {
@@ -263,12 +263,12 @@ end
263
263
  #------------------------------------------------------------------------------
264
264
  #When /^(?:|I )drop an image into (.*?) from a different browser/ do |region_locator|
265
265
  # Given(%Q{I can simulate complex javascript events})
266
- # region_selector = region_selector_for(region_locator || 'the editable region')
266
+ # region_selector = region_selector_for(region_locator || 'the full region')
267
267
  # page.driver.within_frame('mercury_iframe') do
268
268
  # find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
269
269
  # page.driver.execute_script <<-JAVASCRIPT
270
270
  # var element = top.jQuery(document).find('#{region_selector}');
271
- # if (element.data('type') == 'markupable') {
271
+ # if (element.data('type') == 'markdown') {
272
272
  # alert('unimplemented');
273
273
  # throw('unimplemented');
274
274
  # } else {
@@ -126,9 +126,9 @@ module MercurySelectorsHelpers
126
126
  def region_selector_for(locator)
127
127
  case locator.downcase
128
128
 
129
- when 'the first editable region', 'the editable region' then '#editable1'
130
- when 'the first markupable region', 'the markupable region', 'the markdown region' then '#markupable1'
131
- when 'the first snippetable region', 'the first snippet region', 'the snippetable region', 'the snippet region' then '#snippetable1'
129
+ when 'the first full region', 'the full region' then '#full_1'
130
+ when 'the first markdown region', 'the markdown region' then '#markdown_1'
131
+ when 'the first snippets region', 'the first snippet region', 'the snippets region', 'the snippet region' then '#snippets_1'
132
132
 
133
133
  else locator
134
134
  end
@@ -32,6 +32,9 @@ module Mercury
32
32
 
33
33
  def add_gemfile_dependencies
34
34
  prepend_to_file "Gemfile", %Q{gem 'paperclip'}
35
+ if options[:orm] == 'mongoid'
36
+ prepend_to_file "Gemfile", %Q{gem 'mongoid-paperclip', :require => 'mongoid_paperclip'}
37
+ end
35
38
  end
36
39
 
37
40
  # Implement the required interface for Rails::Generators::Migration.
@@ -6,10 +6,10 @@ module Mercury
6
6
  desc "Installs Mercury into your application by copying the configuration file."
7
7
 
8
8
  class_option :full, :type => :boolean, :aliases => '-g',
9
- :desc => 'Full installation will install the layout and css overrides for easier customization.'
9
+ :desc => 'Full installation will install the layout and css files for easier customization.'
10
10
 
11
11
  def copy_config
12
- copy_file 'app/assets/javascripts/mercury.js', 'app/assets/javascripts/mercury.js'
12
+ copy_file 'app/assets/javascripts/mercury.js'
13
13
  end
14
14
 
15
15
  def add_routes
@@ -17,9 +17,9 @@ module Mercury
17
17
  end
18
18
 
19
19
  def copy_layout_and_css_overrides
20
- if options[:full] || yes?("Install the layout and CSS overrides files? [yN]")
21
- copy_file 'app/views/layouts/mercury.html.erb', 'app/views/layouts/mercury.html.erb'
22
- copy_file 'app/assets/stylesheets/mercury_overrides.css', 'app/assets/stylesheets/mercury_overrides.css'
20
+ if options[:full] || yes?("Install the layout file and CSS? [yN]")
21
+ copy_file 'app/views/layouts/mercury.html.erb'
22
+ copy_file 'app/assets/stylesheets/mercury.css'
23
23
  end
24
24
  end
25
25
 
@@ -1,3 +1,3 @@
1
1
  module Mercury
2
- VERSION = '0.5.0'
2
+ VERSION = '0.6.0'
3
3
  end
@@ -1,15 +0,0 @@
1
- // This is a manifest file that'll be compiled into application.js, which will include all the files
2
- // listed below.
3
- //
4
- // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5
- // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6
- //
7
- // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8
- // the compiled file.
9
- //
10
- // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
11
- // GO AFTER THE REQUIRES BELOW.
12
- //
13
- //= require jquery
14
- //= require jquery_ujs
15
- //= require_tree .
@@ -0,0 +1,110 @@
1
+ //
2
+ //= require_self
3
+ //= require_tree .
4
+
5
+ body {
6
+ border: 1px dotted #000;
7
+ padding: 10px;
8
+ }
9
+ body, td {
10
+ font: normal normal normal 12px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
11
+ }
12
+
13
+
14
+ h1 {
15
+ color: #09F;
16
+ margin: 20px 0 0 0;
17
+ font-weight: 200;
18
+ }
19
+ h2 {
20
+ font-weight: 200;
21
+ margin: 15px 0 0 0;
22
+ border-bottom: 1px solid #CCC;
23
+ }
24
+
25
+ #controls {
26
+ position: absolute;
27
+ top: 20px;
28
+ right: 20px;
29
+ padding: 10px;
30
+ margin: 0;
31
+ border: 1px solid #999;
32
+ background: rgba(255, 255, 255, 0.8);
33
+ border-radius: 3px;
34
+ -moz-border-radius: 3px;
35
+ -webkit-border-radius: 3px;
36
+ list-style-type: none;
37
+ a {
38
+ color: #333;
39
+ text-transform: lowercase;
40
+ text-decoration: none;
41
+ cursor: pointer;
42
+ }
43
+ }
44
+
45
+ #forms {
46
+ form {
47
+ display: inline;
48
+ }
49
+ }
50
+
51
+ #links {
52
+ }
53
+
54
+ #dynamic_regions {
55
+ .remove {
56
+ position: absolute;
57
+ right: 0;
58
+ top: -10px;
59
+ border: 1px solid #fff;
60
+ border-radius: 50px;
61
+ -moz-border-radius: 50px;
62
+ -webkit-border-radius: 50px;
63
+ background: #666;
64
+ color: #fff;
65
+ width: 20px;
66
+ height: 20px;
67
+ line-height: 20px;
68
+ text-align: center;
69
+ cursor: pointer;
70
+ }
71
+ }
72
+
73
+ #full_1, #full_2 {
74
+ [data-snippet] {
75
+ width: 33%;
76
+ height: 60px;
77
+ border: 1px solid #600;
78
+ background: #F00;
79
+ border-radius: 3px;
80
+ -moz-border-radius: 3px;
81
+ -webkit-border-radius: 3px;
82
+ }
83
+ }
84
+
85
+ #snippets_1 {
86
+ margin-bottom: 20px;
87
+ .example-snippet {
88
+ float: left;
89
+ width: 33%;
90
+ height: 60px;
91
+ border: 1px solid #999;
92
+ background: #ccc;
93
+ border-radius: 3px;
94
+ -moz-border-radius: 3px;
95
+ -webkit-border-radius: 3px;
96
+ }
97
+ }
98
+
99
+ #snippets_2 {
100
+ margin-bottom: 20px;
101
+ .example-snippet {
102
+ width: 200px;
103
+ height: 60px;
104
+ border: 1px solid #999;
105
+ background: #ccc;
106
+ border-radius: 3px;
107
+ -moz-border-radius: 3px;
108
+ -webkit-border-radius: 3px;
109
+ }
110
+ }
@@ -10,6 +10,6 @@
10
10
  </style>
11
11
  </head>
12
12
  <body>
13
- <iframe src="/editor" width="100%" height="300"></iframe>
13
+ <iframe src="/" width="100%" height="300"></iframe>
14
14
  </body>
15
15
  </html>
@@ -2,27 +2,25 @@
2
2
  <head>
3
3
  <!-- add prototype and styles to ensure that libraries don't collide and css doesn't conflict -->
4
4
  <title>Mercury Editor Regression Testing</title>
5
- <script src="/prototype.js" type="text/javascript"></script>
6
- <style type="text/css">
7
- body { border: 1px dotted #000; padding: 10px; }
8
- input { padding: 20px !important }
9
- .mercury-toolbar-container { display: none !important }
10
- </style>
11
-
12
5
  <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0">
6
+ <link href="/assets/application.css" media="all" rel="stylesheet" type="text/css" />
7
+
8
+ <!-- include prototype so we know we can use any other javascript framework -->
9
+ <script src="/assets/prototype.js" type="text/javascript"></script>
13
10
 
14
11
  <!-- include the loader -->
12
+ <script src="/assets/prototype.js" type="text/javascript"></script>
15
13
  <script src="/assets/mercury/support/history.js" type="text/javascript"></script>
16
- <script src="/assets/mercury_loader.js" type="text/javascript"></script>
14
+ <script src="/mercury/javascripts/mercury_loader.js" type="text/javascript"></script>
17
15
 
18
- <!-- preload snippets -->
16
+ <!-- custom implementation examples -->
19
17
  <script type="text/javascript">
20
- // it's worth mentioning that mercury is not loaded in the first request, but should be loaded in the second.
21
18
  History.Adapter.bind(window, 'statechange', function() {
22
19
  var state = History.getState();
23
20
  console.debug(state.data, state.title, state.url);
24
21
  });
25
22
 
23
+ // preload snippets
26
24
  Event.observe(window, "mercury:ready", function() {
27
25
  Mercury.saveURL = '/contents';
28
26
  Mercury.Snippet.load({
@@ -45,112 +43,29 @@
45
43
 
46
44
  var newRegionIndex = 1;
47
45
  var newRegionType = 0;
48
- var regionTypes = ['editable', 'markupable', 'snippetable'];
46
+ var regionTypes = ['full', 'simple', 'snippets', 'markdown'];
49
47
  function addRegion() {
50
48
  if (newRegionType >= regionTypes.length) newRegionType = 0;
51
49
  var container = new Element('div', {style: 'position:relative;margin-bottom:20px;'});
52
- container.update('<div class="remove" onclick="this.up().remove()">&times;</div><div class="mercury-region" id="new_' + regionTypes[newRegionType] + '_' + newRegionIndex + '" data-type="' + regionTypes[newRegionType] + '">new <b>' + regionTypes[newRegionType] + '</b> region ' + newRegionIndex + '</div>');
53
- $('content').insertBefore(container, $('dynamic_regions'));
54
- Mercury.trigger('reinitialize');
50
+ container.update('<div class="remove" onclick="this.up().remove()">&times;</div><div data-mercury="' + regionTypes[newRegionType] + '" id="new_' + regionTypes[newRegionType] + '_' + newRegionIndex + '">new <b>' + regionTypes[newRegionType] + '</b> region ' + newRegionIndex + '</div>');
51
+ $('dynamic_regions').insert(container, {position: 'top'});
55
52
  newRegionIndex += 1;
56
53
  newRegionType += 1;
54
+ Mercury.trigger('reinitialize');
57
55
  }
58
56
  </script>
59
-
60
- <!-- styles for the content layout -->
61
- <style type="text/css">
62
- body, td {
63
- font: normal normal normal 100%/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
64
- }
65
- h1 {
66
- color: #09F;
67
- margin: 20px 0 0 0;
68
- font-weight: 200;
69
- }
70
- h2 {
71
- font-weight: 200;
72
- margin: 15px 0 0 0;
73
- border-bottom: 1px solid #CCC;
74
- }
75
- #forms form {
76
- display: inline;
77
- }
78
- #content {
79
- min-width: 500px;
80
- width: 70%;
81
- margin: 20px auto;
82
- }
83
- #controls {
84
- position: absolute;
85
- top: 20px;
86
- left: 20px;
87
- padding: 10px;
88
- margin: 0;
89
- border: 1px solid #999;
90
- background: rgba(255, 255, 255, 0.8);
91
- border-radius: 3px;
92
- -moz-border-radius: 3px;
93
- -webkit-border-radius: 3px;
94
- list-style-type: none;
95
- }
96
- #controls div {
97
- color: #333;
98
- text-transform: lowercase;
99
- text-decoration: none;
100
- cursor: pointer;
101
- }
102
- .mercury-snippet {
103
- background: rgba(0, 0, 0, 0.5);
104
- color: #FFF;
105
- width: 300px;
106
- height: 100px;
107
- margin: 1px 0;
108
- border-radius: 3px;
109
- -moz-border-radius: 3px;
110
- -webkit-border-radius: 3px;
111
- }
112
- #snippetable1 {
113
- float: left;
114
- width: 100%;
115
- margin-bottom: 20px;
116
- }
117
- #snippetable1 .mercury-snippet {
118
- float: left;
119
- width: 33%;
120
- border: 1px solid #000;
121
- }
122
- div.remove {
123
- position: absolute;
124
- right: 0;
125
- top: -10px;
126
- border: 1px solid red;
127
- border-radius: 50px;
128
- -moz-border-radius: 50px;
129
- -webkit-border-radius: 50px;
130
- background: #600;
131
- color: #FFF;
132
- width: 20px;
133
- height: 20px;
134
- line-height: 18px;
135
- text-align: center;
136
- cursor: pointer;
137
- }
138
- </style>
139
57
  </head>
140
58
  <body>
141
59
 
142
- <div id="content">
143
-
144
60
  <ul id="controls">
145
- <li><div onclick="alert(Mercury.version)">Mercury Version</div></li>
146
- <li><div onclick="Mercury.trigger('toggle:interface')">Toggle Interface</div></li>
147
- <li><div onclick="addRegion()">Add & Reinitialize Regions</div></li>
148
- <li><div onclick="var num = 1; History.pushState({state: num}, 'Mercury Editor -- With history.pushState!', '?pushstate=' + num);">history.pushState</div></li>
149
- <li><div onclick="History.go(-1);">History.go(-1)</div></li>
150
- <li><div onclick="History.back();">History.back()</div></li>
151
- <li><div onclick="History.forward();">History.forward()</div></li>
61
+ <li><a href="javascript:Mercury.trigger('toggle:interface')">Toggle Interface</a></li>
62
+ <li><a href="javascript:var num = 1; History.pushState({state: num}, 'Mercury Editor -- With history.pushState!', '?pushstate=' + num);">history.pushState</a></li>
63
+ <li><a href="javascript:History.go(-1);">History.go(-1)</a></li>
64
+ <li><a href="javascript:History.back();">History.back()</a></li>
65
+ <li><a href="javascript:History.forward();">History.forward()</a></li>
152
66
  </ul>
153
67
 
68
+ <!-- begin forms -->
154
69
  <h1>Forms (with various methods and targets)</h1>
155
70
  <div id="forms">
156
71
  <form id="form1" action="/mercury/test_page" method="post" target="_top">
@@ -172,7 +87,9 @@
172
87
  <input type="submit" name="commit" value="get foo">
173
88
  </form>
174
89
  </div>
90
+ <!-- end forms -->
175
91
 
92
+ <!-- begin links -->
176
93
  <h1>Links (With various targets)</h1>
177
94
  <div id="links">
178
95
  <a id="anchor1" href="/mercury/test_page" target="_top">_top</a>
@@ -182,12 +99,17 @@
182
99
  <a id="anchor5" href="/mercury/test_page" class="lightview" target="_self">_self .lightview</a>
183
100
  <a id="anchor6" href="/mercury/test_page" target="foo">foo</a>
184
101
  </div>
102
+ <!-- end links -->
185
103
 
186
- <h1>Dynamic Regions</h1>
187
- <div id="dynamic_regions"></div>
104
+ <!-- begin dynamic regions -->
105
+ <h1>Dynamic Regions (<a href="javascript:addRegion()">Add a Region</a>)</h1>
106
+ <div id="dynamic_regions">
107
+ </div>
108
+ <!-- end dynamic -->
188
109
 
189
- <h1>Editable region</h1>
190
- <div id="editable1" class="mercury-region" data-type="editable">
110
+ <!-- begin full region 1 -->
111
+ <h1>Full region</h1>
112
+ <div id="full_1" data-mercury="full">
191
113
  If the first line of content isn't wrapped in an element you can't set justification (mozilla only bug).
192
114
 
193
115
  <h2>text with a meta tag (that will be removed)</h2>
@@ -202,85 +124,30 @@
202
124
  <h2>table with header and definition cells</h2>
203
125
  <table border="1">
204
126
  <tbody>
205
- <tr>
206
- <th>R1C1</th>
207
- <th colspan="5">R1C2</th>
208
- </tr>
209
- <tr>
210
- <th colspan="2">R2C1</th>
211
- <th rowspan="2">R2C2</th>
212
- <th>R2C3</th>
213
- <th rowspan="5">R2C4</th>
214
- <th>R2C5</th>
215
- </tr>
216
- <tr>
217
- <td colspan="2">R3C1</td>
218
- <td>R3C2</td>
219
- <td>R3C3</td>
220
- </tr>
221
- <tr>
222
- <td>R4C1</td>
223
- <td>R4C2</td>
224
- <td rowspan="4">R4C3</td>
225
- <td>R4C4</td>
226
- <td>R4C5</td>
227
- </tr>
228
- <tr>
229
- <td>R5C1</td>
230
- <td>R5C2</td>
231
- <td>R5C3</td>
232
- <td>R5C4</td>
233
- </tr>
234
- <tr>
235
- <th rowspan="2">R6C1</th>
236
- <th rowspan="2">R6C2</th>
237
- <th>R6C3</th>
238
- <th>R6C4</th>
239
- </tr>
240
- <tr>
241
- <td>R7C1</td>
242
- <td>R7C2</td>
243
- <td>R7C3</td>
244
- </tr>
245
- <tr>
246
- <td colspan="2">R8C1</td>
247
- <td colspan="4">R7C2</td>
248
- </tr>
127
+ <tr><th>R1C1</th><th colspan="5">R1C2</th></tr>
128
+ <tr><th colspan="2">R2C1</th><th rowspan="2">R2C2</th><th>R2C3</th><th rowspan="5">R2C4</th><th>R2C5</th></tr>
129
+ <tr><td colspan="2">R3C1</td><td>R3C2</td><td>R3C3</td></tr>
130
+ <tr><td>R4C1</td><td>R4C2</td><td rowspan="4">R4C3</td><td>R4C4</td><td>R4C5</td></tr>
131
+ <tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td></tr>
132
+ <tr><th rowspan="2">R6C1</th><th rowspan="2">R6C2</th><th>R6C3</th><th>R6C4</th></tr>
133
+ <tr><td>R7C1</td><td>R7C2</td><td>R7C3</td></tr>
134
+ <tr><td colspan="2">R8C1</td><td colspan="4">R7C2</td></tr>
249
135
  </tbody>
250
136
  </table>
251
137
 
252
138
  <h2>table without tbody or border</h2>
253
139
  <table>
254
- <tr>
255
- <th>R1C1</th>
256
- <th colspan="2">R1C2</th>
257
- </tr>
258
- <tr>
259
- <td rowspan="2">R2C1</td>
260
- <td>R2C2</td>
261
- <td>R2C3</td>
262
- </tr>
263
- <tr>
264
- <td>R3C1</td>
265
- <td>R3C2</td>
266
- </tr>
140
+ <tr><th>R1C1</th><th colspan="2">R1C2</th></tr>
141
+ <tr><td rowspan="2">R2C1</td><td>R2C2</td><td>R2C3</td></tr>
142
+ <tr><td>R3C1</td><td>R3C2</td></tr>
267
143
  </table>
268
144
 
269
145
  <h2>fixed width table (column where all colspans > 1, row where all rowspans > 1)</h2>
270
146
  <table border="1" width="200">
271
147
  <tbody>
272
- <tr>
273
- <td rowspan="2">R1C1</td>
274
- <td colspan="2" rowspan="2">R1C2</td>
275
- </tr>
148
+ <tr><td rowspan="2">R1C1</td><td colspan="2" rowspan="2">R1C2</td></tr>
276
149
  <tr></tr>
277
- <tr>
278
- <td>R3C1</td>
279
- <td colspan="2">R3C2</td>
280
- </tr>
281
- <tr>
282
- <td>R4C1</td>
283
- <td colspan="2">R4C3</td>
150
+ <tr><td>R3C1</td><td colspan="2">R3C2</td></tr>
284
151
  </tr>
285
152
  </tbody>
286
153
  </table>
@@ -298,47 +165,67 @@
298
165
  <img alt="clippy" src="/assets/mercury/temp-logo.png"><a href="#bookmark1">link for #bookmark1</a>
299
166
 
300
167
  <h2>snippet that's pre-loaded</h2>
301
- <div class="mercury-snippet" data-snippet="snippet_0">snippet0</div>
168
+ <div data-snippet="snippet_0">snippet0</div>
302
169
 
303
170
  <h2>bookmark links</h2>
304
171
  <a name="bookmark1">Bookmark1</a><br/><a name="bookmark2">Bookmark2</a>
305
172
 
306
173
  <br/><br/>
307
174
  Additional content not wrapped in anything
308
-
309
- <h2>youtube and vimeo iframes with content surrounding it</h2>
310
- <!--123<iframe style="width: 560px; height: 349px; " src="http://www.youtube.com/embed/0pXYp72dwl0?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>123321-->
311
- <!--<iframe style="width: 400px; height: 225px; " src="http://player.vimeo.com/video/615344?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff" frameborder="0"></iframe>123-->
312
175
  </div>
176
+ <!-- end full region 1 -->
313
177
 
314
- <h1>Snippetable region</h1>
315
- <div id="snippetable1" class="mercury-region" data-type="snippetable">
316
- <div class="mercury-snippet" data-snippet="snippet_2">snippet2</div>
317
- <div class="mercury-snippet" data-snippet="snippet_3">snippet3</div>
318
- <div class="mercury-snippet" data-snippet="snippet_4">snippet4</div>
319
- <div class="mercury-snippet" data-snippet="snippet_5">snippet5</div>
320
- <div class="mercury-snippet" data-snippet="snippet_6">snippet6</div>
321
- <div class="mercury-snippet" data-snippet="snippet_7">snippet7</div>
322
- <div class="mercury-snippet" data-snippet="snippet_8">snippet8</div>
323
- <div class="mercury-snippet" data-snippet="snippet_9">snippet9</div>
178
+ <!-- begin full region 2 -->
179
+ <h1>Full region (single snippet and no content)</h1>
180
+ <div id="full_2" data-mercury="full">
181
+ <div data-snippet="snippet_1">snippet1</div>
324
182
  </div>
183
+ <!-- end full region 2 -->
325
184
 
326
- <h1>Editable region (single snippet and no content)</h1>
327
- <div id="editable2" class="mercury-region" data-type="editable">
328
- <div class="mercury-snippet" data-snippet="snippet_10">snippet10</div>
185
+ <!-- begin full region 3 -->
186
+ <h1>Full region (fixed width/height and overflow)</h1>
187
+ <div id="full_3" data-mercury="full" style="width:200px;height:90px;">
188
+ wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
189
+ <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/><a href="#offset_test">8</a><br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15
329
190
  </div>
191
+ <!-- end full region 3 -->
330
192
 
331
- <h1>Snippetable region (iframe snippet that contains flash)</h1>
332
- <div id="snippetable2" class="mercury-region" data-type="snippetable">
333
- <div class="mercury-snippet" data-snippet="snippet_11">snippet11</div>
334
- <div class="mercury-snippet" data-snippet="snippet_12">snippet12</div>
335
- <iframe class="mercury-snippet" data-snippet="snippet_13" width="560" height="349" src="http://www.youtube.com/embed/0pXYp72dwl0?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>
193
+ <!-- begin simple region 1 -->
194
+ <h1>Simple region (h1 tag)</h1>
195
+ <h1 id="simple_1" data-mercury="simple">This is a simple region</h1>
196
+ <!-- end simple region 1 -->
197
+
198
+ <!-- begin simple region 2 -->
199
+ <h1>Simple region (h2 tag with fixed width)</h1>
200
+ <h2 id="simple_2" data-mercury="simple" style="width:200px">This is a simple region which is much longer. It should wrap when displaying, and when editing.</h2>
201
+ <!-- end simple region 2 -->
202
+
203
+ <!-- begin snippets region 1 -->
204
+ <h1>Snippets region</h1>
205
+ <div id="snippets_1" data-mercury="snippets">
206
+ <div class="example-snippet" data-snippet="snippet_2">snippet2</div>
207
+ <div class="example-snippet" data-snippet="snippet_3">snippet3</div>
208
+ <div class="example-snippet" data-snippet="snippet_4">snippet4</div>
209
+ <div class="example-snippet" data-snippet="snippet_5">snippet5</div>
210
+ <div class="example-snippet" data-snippet="snippet_6">snippet6</div>
211
+ </div>
212
+ <br clear="both"/>
213
+ <!-- end snippets region 1 -->
214
+
215
+ <!-- begin snippets region 2 -->
216
+ <h1>Snippets region (iframe snippet that contains flash)</h1>
217
+ <div id="snippets_2" data-mercury="snippets">
218
+ <div class="example-snippet" data-snippet="snippet_7">snippet7</div>
219
+ <div class="example-snippet" data-snippet="snippet_8">snippet8</div>
220
+ <iframe class="example-snippet" data-snippet="snippet_9" width="560" height="349" src="http://www.youtube.com/embed/0pXYp72dwl0?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>
336
221
  </div>
222
+ <!-- end snippets region 2 -->
337
223
 
338
- <h1>Markupable region (with markdown)</h1>
339
- <div id="markupable1" class="mercury-region" data-type="markupable">
224
+ <!-- begin markdown region 1 -->
225
+ <h1>Markdown region</h1>
226
+ <div id="markdown_1" data-mercury="markdown">
340
227
  ## notes ##
341
- **whitespace** in markupable regions is _important_.
228
+ **whitespace** in markdown regions is _important_.
342
229
 
343
230
  ## ordered list ##
344
231
  1. list item 1
@@ -370,23 +257,12 @@
370
257
  ## paragraph with bold, italics, etc. ##
371
258
  Turkey corned beef ham, chuck ham hock **venison _drumstick_ ** tongue ribeye. Beef tongue pancetta, short ribs meatball headcheese jowl bacon swine t-bone shoulder venison. Hamburger short loin turkey flank short ribs tail. Chicken tri-tip sausage, bresaola sirloin turkey hamburger <sub>headcheese</sub> shank rump. Pork ground round t-bone, ham hock sirloin biltong chicken fatback pork belly pastrami pancetta jowl tail. Cow ribeye pork chop, flank sirloin tail short loin pork loin chicken boudin pastrami. Boudin chuck shankle, spare ribs pancetta <sup>fatback</sup> bresaola.
372
259
  </div>
260
+ <!-- end markdown region 1 -->
373
261
 
374
- <h1>Editable region (fixed width/height and overflow)</h1>
375
- <div id="editable3" class="mercury-region" data-type="editable" style="width:200px;height:90px;">
376
- wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
377
- <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/><a href="#offset_test">8</a><br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15
378
- </div>
379
-
380
- <h1>Simple region (h1 tag)</h1>
381
- <h1 id="simple-field" class="mercury-region" data-type="simple">This is a simple editable field</h1>
382
-
383
- <h1>Simple region (h2 tag with wrapping)</h1>
384
- <h2 id="simple-field-wrapping" class="mercury-region" data-type="simple" style="width:200px">This is a simple editable field which is much longer. It should wrap when displaying, and when editing.</h2>
385
-
262
+ <!-- begin image region 1 -->
386
263
  <h1>Image region</h1>
387
- <img id="bunny-image" class="mercury-region" data-type="image" src="/images/bunny.gif" />
388
-
389
- </div>
264
+ <img id="image_1" data-mercury="image" src="/images/bunny.gif" alt=""/>
265
+ <!-- end image region 1 -->
390
266
 
391
267
  </body>
392
268
  </html>