mercury-rails 0.6.0 → 0.7.0

data/spec/javascripts/mercury/modals/inserttable_spec.js.coffee

@@ -6,26 +6,27 @@ describe "Mercury.modalHandlers.insertTable", ->
     @modal =
       element: $('#test')
       hide: ->
+    @insertTable = $.extend(@modal, Mercury.modalHandlers.insertTable)
 
   describe "initializing", ->
 
     beforeEach ->
       @tableEditorSpy = spyOn(Mercury, 'tableEditor').andCallFake(=>)
-      Mercury.modalHandlers.insertTable.call(@modal)
+      @insertTable.initialize()
 
     it "selects the first cell", ->
       expect($('#cell1').hasClass('selected')).toEqual(true)
 
     it "sets the table editor up", ->
       expect(@tableEditorSpy.callCount).toEqual(1)
-      expect(@tableEditorSpy.argsForCall[0][0].get(0)).toEqual($('#table').get(0))
+      expect(@tableEditorSpy.argsForCall[0][0].get(0)).toEqual($('table').get(0))
       expect(@tableEditorSpy.argsForCall[0][1].get(0)).toEqual($('#cell1').get(0))
 
   describe "clicking on the cells", ->
 
     beforeEach ->
       @tableEditorSpy = spyOn(Mercury, 'tableEditor').andCallFake(=>)
-      Mercury.modalHandlers.insertTable.call(@modal)
+      @insertTable.initialize()
 
     it "should unselect any selected cells", ->
       jasmine.simulate.click($('#cell2').get(0))
@@ -44,58 +45,56 @@ describe "Mercury.modalHandlers.insertTable", ->
   describe "clicking on the action buttons", ->
 
     beforeEach ->
-      @addRowSpy = spyOn(Mercury.tableEditor, 'addRow').andCallFake(=>)
-      @removeRowSpy = spyOn(Mercury.tableEditor, 'removeRow').andCallFake(=>)
-      @addColumnSpy = spyOn(Mercury.tableEditor, 'addColumn').andCallFake(=>)
-      @removeColumnSpy = spyOn(Mercury.tableEditor, 'removeColumn').andCallFake(=>)
+      @addRowBeforeSpy    = spyOn(Mercury.tableEditor, 'addRowBefore').andCallFake(=>)
+      @addRowSpy          = spyOn(Mercury.tableEditor, 'addRow').andCallFake(=>)
+      @removeRowSpy       = spyOn(Mercury.tableEditor, 'removeRow').andCallFake(=>)
+      @addColumnBeforeSpy = spyOn(Mercury.tableEditor, 'addColumnBefore').andCallFake(=>)
+      @addColumnSpy       = spyOn(Mercury.tableEditor, 'addColumn').andCallFake(=>)
+      @removeColumnSpy    = spyOn(Mercury.tableEditor, 'removeColumn').andCallFake(=>)
       @increaseColspanSpy = spyOn(Mercury.tableEditor, 'increaseColspan').andCallFake(=>)
       @decreaseColspanSpy = spyOn(Mercury.tableEditor, 'decreaseColspan').andCallFake(=>)
       @increaseRowspanSpy = spyOn(Mercury.tableEditor, 'increaseRowspan').andCallFake(=>)
       @decreaseRowspanSpy = spyOn(Mercury.tableEditor, 'decreaseRowspan').andCallFake(=>)
-      Mercury.modalHandlers.insertTable.call(@modal)
+      @insertTable.initialize()
 
     it "adds a row before the selected cell", ->
-      jasmine.simulate.click($('input[name=insertRowBefore]').get(0))
-      expect(@addRowSpy.callCount).toEqual(1)
-      expect(@addRowSpy.argsForCall[0]).toEqual(['before'])
+      jasmine.simulate.click($('[data-action=addRowBefore]').get(0))
+      expect(@addRowBeforeSpy.callCount).toEqual(1)
 
     it "adds a row after the selected cell", ->
-      jasmine.simulate.click($('input[name=insertRowAfter]').get(0))
+      jasmine.simulate.click($('[data-action=addRow]').get(0))
       expect(@addRowSpy.callCount).toEqual(1)
-      expect(@addRowSpy.argsForCall[0]).toEqual(['after'])
 
     it "deletes the row of the selected cell", ->
-      jasmine.simulate.click($('input[name=deleteRow]').get(0))
+      jasmine.simulate.click($('[data-action=removeRow]').get(0))
       expect(@removeRowSpy.callCount).toEqual(1)
 
     it "adds a column before the selected cell", ->
-      jasmine.simulate.click($('input[name=insertColumnBefore]').get(0))
-      expect(@addColumnSpy.callCount).toEqual(1)
-      expect(@addColumnSpy.argsForCall[0]).toEqual(['before'])
+      jasmine.simulate.click($('[data-action=addColumnBefore]').get(0))
+      expect(@addColumnBeforeSpy.callCount).toEqual(1)
 
     it "adds a column after the selected cell", ->
-      jasmine.simulate.click($('input[name=insertColumnAfter]').get(0))
+      jasmine.simulate.click($('[data-action=addColumn]').get(0))
       expect(@addColumnSpy.callCount).toEqual(1)
-      expect(@addColumnSpy.argsForCall[0]).toEqual(['after'])
 
     it "deletes the column of the selected cell", ->
-      jasmine.simulate.click($('input[name=deleteColumn]').get(0))
+      jasmine.simulate.click($('[data-action=removeColumn]').get(0))
       expect(@removeColumnSpy.callCount).toEqual(1)
 
     it "increases the colspan of the selected cell", ->
-      jasmine.simulate.click($('input[name=increaseColspan]').get(0))
+      jasmine.simulate.click($('[data-action=increaseColspan]').get(0))
       expect(@increaseColspanSpy.callCount).toEqual(1)
 
     it "decreases the colspan of the selected cell", ->
-      jasmine.simulate.click($('input[name=decreaseColspan]').get(0))
+      jasmine.simulate.click($('[data-action=decreaseColspan]').get(0))
       expect(@decreaseColspanSpy.callCount).toEqual(1)
 
     it "increases the rowspan of the selected cell", ->
-      jasmine.simulate.click($('input[name=increaseRowspan]').get(0))
+      jasmine.simulate.click($('[data-action=increaseRowspan]').get(0))
       expect(@increaseRowspanSpy.callCount).toEqual(1)
 
     it "decreases the rowspan of the selected cell", ->
-      jasmine.simulate.click($('input[name=decreaseRowspan]').get(0))
+      jasmine.simulate.click($('[data-action=decreaseRowspan]').get(0))
       expect(@decreaseRowspanSpy.callCount).toEqual(1)
 
 
@@ -107,43 +106,43 @@ describe "Mercury.modalHandlers.insertTable", ->
   describe "changing the border", ->
 
     beforeEach ->
-      Mercury.modalHandlers.insertTable.call(@modal)
+      @insertTable.initialize()
 
     it "changes the border of the table", ->
       $('#table_border').val('19')
       jasmine.simulate.keyup($('#table_border').get(0))
-      expect($('#table').attr('border')).toEqual('19')
+      expect($('table').attr('border')).toEqual('19')
 
     it "handles non-numeric values", ->
       $('#table_border').val('2x')
       jasmine.simulate.keyup($('#table_border').get(0))
-      expect($('#table').attr('border')).toEqual('2')
+      expect($('table').attr('border')).toEqual('2')
 
 
   describe "changing the cellspacing", ->
 
     beforeEach ->
-      Mercury.modalHandlers.insertTable.call(@modal)
+      @insertTable.initialize()
 
     it "changes the cellspacing of the table", ->
       $('#table_spacing').val('5')
       jasmine.simulate.keyup($('#table_spacing').get(0))
-      expect($('#table').attr('cellspacing')).toEqual('5')
+      expect($('table').attr('cellspacing')).toEqual('5')
 
     it "handles non-numeric values", ->
       $('#table_spacing').val('12x')
       jasmine.simulate.keyup($('#table_spacing').get(0))
-      expect($('#table').attr('cellspacing')).toEqual('12')
+      expect($('table').attr('cellspacing')).toEqual('12')
 
 
   describe "submitting", ->
 
     beforeEach ->
-      Mercury.modalHandlers.insertTable.call(@modal)
+      @insertTable.initialize()
 
     it "triggers an action", ->
       spy = spyOn(Mercury, 'trigger').andCallFake(=>)
-      jasmine.simulate.click($('#submit').get(0))
+      jasmine.simulate.click($('input[type=submit]').get(0))
       expect(spy.callCount).toEqual(1)
       expect(spy.argsForCall[0][0]).toEqual('action')
       expect(spy.argsForCall[0][1]['action']).toEqual('insertTable')
@@ -154,7 +153,5 @@ describe "Mercury.modalHandlers.insertTable", ->
 
     it "hides the modal", ->
       spy = spyOn(@modal, 'hide').andCallFake(=>)
-      jasmine.simulate.click($('#submit').get(0))
+      jasmine.simulate.click($('input[type=submit]').get(0))
       expect(spy.callCount).toEqual(1)
-
-

data/spec/javascripts/mercury/toolbar_spec.js.coffee

@@ -180,6 +180,14 @@ describe "Mercury.Toolbar", ->
       it "returns 0", ->
         expect(@toolbar.height()).toEqual(0)
 
+    describe "when forced", ->
+
+      beforeEach ->
+        @toolbar = new Mercury.Toolbar({appendTo: '#test', visible: false})
+
+      it "returns the element outerheight", ->
+        expect(@toolbar.height(true)).toEqual($('.mercury-toolbar-container').outerHeight())
+
 
   describe "#show", ->
 

data/spec/javascripts/templates/mercury/modals/insertlink.html

@@ -1,30 +1,67 @@
 <form>
-  <fieldset id="link_text_container">
-    <input id="link_text" name="link[text]" type="text"/>
-  </fieldset>
 
-  <label for="link_external_url"><input id="checkbox1" name="link_type" type="radio" value="external_url" checked="checked"/>URL</label>
-  <input class="selectable" id="link_external_url" name="link[external_url]" type="text"/>
-
-  <label for="link_existing_bookmark"><input id="checkbox2" name="link_type" type="radio" value="existing_bookmark"/>Existing Links</label>
-  <select class="selectable" id="link_existing_bookmark" name="link[existing_bookmark]"></select>
+  <div id="link_text_container" class="control-group string optional">
+    <label class="string optional control-label" for="link_text">Link Content</label>
+    <div class="controls">
+      <input class="string optional" id="link_text" name="link[text]" size="50" type="text">
+    </div>
+  </div>
 
-  <label for="link_new_bookmark"><input name="link_type" type="radio" value="new_bookmark"/>Bookmark</label>
-  <input class="selectable" id="link_new_bookmark" name="link[new_bookmark]" type="text"/>
+  <div class="control-group url optional">
+    <label class="url optional control-label" for="link_external_url">
+      <input name="link_type" type="radio" value="external_url" checked="checked"/>URL
+    </label>
+    <div class="controls">
+      <input class="string url optional" id="link_external_url" name="link[external_url]" size="50" type="text">
+    </div>
+  </div>
 
-  <select id="link_target" name="link[target]">
-    <option value="">Self (the same window or tab)</option>
-    <option value="_blank">Blank (a new window or tab)</option>
-    <option value="_top">Top (removes any frames)</option>
-    <option value="popup">Popup Window (javascript new window popup)</option>
-  </select>
+  <div class="control-group select optional">
+    <label class="select optional control-label" for="link_existing_bookmark">
+      <input name="link_type" type="radio" value="existing_bookmark"/>Existing Links
+    </label>
+    <div class="controls">
+      <select class="select optional" id="link_existing_bookmark" name="link[existing_bookmark]"></select>
+    </div>
+  </div>
+  <div class="control-group string optional">
+    <label class="string optional control-label" for="link_new_bookmark">
+      <input name="link_type" type="radio" value="new_bookmark"/>Bookmark
+    </label>
+    <div class="controls">
+      <input class="string optional" id="link_new_bookmark" name="link[new_bookmark]" size="50" type="text">
+    </div>
+  </div>
 
-  <div class="link-target-options" id="popup_options" style="display:none">
-    <input id="link_popup_width" name="link[popup_width]" type="text"/>
-    <input id="link_popup_height" name="link[popup_height]" type="text"/>
+  <div class="control-group select optional">
+    <label class="select optional control-label" for="link_target">Link Target</label>
+    <div class="controls">
+      <select class="select optional" id="link_target" name="link[target]">
+        <option value="">Self (the same window or tab)</option>
+        <option value="_blank">Blank (a new window or tab)</option>
+        <option value="_top">Top (removes any frames)</option>
+        <option value="popup">Popup Window (javascript new window popup)</option>
+      </select>
+    </div>
+  </div>
+  <div id="popup_options" class="link-target-options" style="display:none">
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="link_popup_width">Popup Width</label>
+      <div class="controls">
+        <input class="number optional" id="link_popup_width" name="link[popup_width]" size="50" type="number">
+      </div>
+    </div>
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="link_popup_height">Popup Height</label>
+      <div class="controls">
+        <input class="number optional" id="link_popup_height" name="link[popup_height]" size="50" type="number">
+      </div>
+    </div>
   </div>
 
-  <input id="submit" type="submit"/>
+  <input name="commit" type="submit" value="Insert Link">
+
 </form>
+
 <a name="link1">Link One</a>
-<a name="link2">Link Two</a>
+<a name="link2">Link Two</a>

data/spec/javascripts/templates/mercury/modals/insertmedia.html

@@ -1,35 +1,77 @@
 <form>
-  <label for="media_image_url"><input id="checkbox1" name="media_type" type="radio" value="image_url" checked="checked"/>URL</label>
-  <input class="selectable" id="media_image_url" name="media[image_url]" type="text"/>
 
-  <label for="media_youtube_url"><input id="checkbox2" name="media_type" type="radio" value="youtube_url"/>YouTube Share URL</label>
-  <input class="selectable" id="media_youtube_url" name="media[youtube_url]" type="text"/>
-
-  <label for="media_vimeo_url"><input name="media_type" type="radio" value="vimeo_url"/>Vimeo URL</label>
-  <input class="selectable" id="media_vimeo_url" name="media[vimeo_url]" type="text"/>
-
-  <div class="media-options" id="image_url">
-    <select id="media_image_alignment" name="media[image_alignment]">
-      <option value="">None</option>
-      <option value="left">Left</option>
-      <option value="right">Right</option>
-      <option value="top">Top</option>
-      <option value="middle">Middle</option>
-      <option value="bottom">Bottom</option>
-      <option value="absmiddle">Absolute Middle</option>
-      <option value="absbottom">Absolute Bottom</option>
-    </select>
+  <div class="control-group url optional">
+    <label class="url optional control-label" for="media_image_url">
+      <input name="media_type" type="radio" value="image_url" checked="checked"/>URL
+    </label>
+    <div class="controls">
+      <input class="string url optional" id="media_image_url" name="media[image_url]" size="50" type="text">
+    </div>
   </div>
 
-  <div class="media-options" id="youtube_url" style="display:none">
-    <input id="media_youtube_width" name="media[youtube_width]" type="text" value="560"/>
-    <input id="media_youtube_height" name="media[youtube_height]" type="text" value="349"/>
+  <div class="control-group url optional">
+    <label class="url optional control-label" for="media_youtube_url">
+      <input name="media_type" type="radio" value="youtube_url"/>Youtube Share URL
+    </label>
+    <div class="controls">
+      <input class="string url optional" id="media_youtube_url" name="media[youtube_url]" size="50" type="text" placeholder="http://youtu.be/Pny4hoN8eII">
+    </div>
+  </div>
+  <div class="control-group url optional">
+    <label class="url optional control-label" for="media_vimeo_url">
+      <input name="media_type" type="radio" value="vimeo_url"/>Vimeo URL
+    </label>
+    <div class="controls">
+      <input class="string url optional" id="media_vimeo_url" name="media[vimeo_url]" size="50" type="text" placeholder="http://vimeo.com/25708134">
+    </div>
   </div>
 
-  <div class="media-options" id="vimeo_url" style="display:none">
-    <input id="media_vimeo_width" name="media[vimeo_width]" type="text" value="400"/>
-    <input id="media_vimeo_height" name="media[vimeo_height]" type="text" value="225"/>
+  <div class="media-options" id="image_url_options">
+    <div class="control-group select optional">
+      <label class="select optional control-label" for="media_image_alignment">Alignment</label>
+      <div class="controls">
+        <select class="select optional" id="media_image_alignment" name="media[image_alignment]">
+          <option value="">None</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+          <option value="top">Top</option>
+          <option value="middle">Middle</option>
+          <option value="bottom">Bottom</option>
+          <option value="absmiddle">Absolute Middle</option>
+          <option value="absbottom">Absolute Bottom</option>
+        </select>
+      </div>
+    </div>
   </div>
+  <div class="media-options" id="youtube_url_options" style="display:none">
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_youtube_width">Width</label>
+      <div class="controls">
+        <input class="number optional" id="media_youtube_width" name="media[youtube_width]" size="50" type="number" value="560">
+      </div>
+    </div>
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_youtube_height">Height</label>
+      <div class="controls">
+        <input class="number optional" id="media_youtube_height" name="media[youtube_height]" size="50" type="number" value="349">
+      </div>
+    </div>
+  </div>
+  <div class="media-options" id="vimeo_url_options" style="display:none">
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_vimeo_width">Width</label>
+      <div class="controls">
+        <input class="number optional" id="media_vimeo_width" name="media[vimeo_width]" size="50" type="number" value="400">
+      </div>
+    </div>
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_vimeo_height">Height</label>
+      <div class="controls">
+        <input class="number optional" id="media_vimeo_height" name="media[vimeo_height]" size="50" type="number" value="225">
+      </div>
+    </div>
+  </div>
+
+  <input class="submit" name="commit" type="submit" value="Insert Media"/>
 
-  <input id="submit" type="submit"/>
-</form>
+</form>

data/spec/javascripts/templates/mercury/modals/inserttable.html

@@ -1,27 +1,73 @@
 <form>
-  <div id="table_display">
-    <table id="table" border="1" cellspacing="0"><tr><td id="cell1"></td></tr><tr><td id="cell2"></td></tr></table>
+
+  <div id="table_display" class="control-group optional">
+    <div class="controls">
+      <table border="1" cellspacing="0">
+        <tr>
+          <td id="cell1">&nbsp;</td>
+        </tr>
+        <tr>
+          <td id="cell2">&nbsp;</td>
+        </tr>
+      </table>
+    </div>
   </div>
 
-  <input class="action" name="insertRowBefore" type="button" value="Add Before">
-  <input class="action" name="insertRowAfter" type="button" value="Add After">
-  <input class="action" name="deleteRow" type="button" value="Remove">
-  <input class="action" name="insertColumnBefore" type="button" value="Add Before">
-  <input class="action" name="insertColumnAfter" type="button" value="Add After">
-  <input class="action" name="deleteColumn" type="button" value="Remove">
-  <input class="action" name="increaseRowspan" type="button" value="+">
-  <input class="action" name="decreaseRowspan" type="button" value="-">
-  <input class="action" name="increaseColspan" type="button" value="+">
-  <input class="action" name="decreaseColspan" type="button" value="-">
+  <div class="control-group buttons optional">
+    <label class="buttons optional control-label">Rows</label>
+    <div class="controls btn-group">
+      <button class="btn" data-action="addRowBefore">Add Before</button>
+      <button class="btn" data-action="addRow">Add After</button>
+      <button class="btn" data-action="removeRow">Remove</button>
+    </div>
+  </div>
+  <div class="control-group buttons optional">
+    <label class="buttons optional control-label">Columns</label>
+    <div class="controls btn-group">
+      <button class="btn" data-action="addColumnBefore">Add Before</button>
+      <button class="btn" data-action="addColumn">Add After</button>
+      <button class="btn" data-action="removeColumn">Remove</button>
+    </div>
+  </div>
+  <hr/>
+  <div class="control-group buttons optional">
+    <label class="buttons optional control-label">Row Span</label>
+    <div class="controls btn-group">
+      <button class="btn" data-action="increaseRowspan">+</button>
+      <button class="btn" data-action="decreaseRowspan">-</button>
+    </div>
+  </div>
+  <div class="control-group buttons optional">
+    <label class="buttons optional control-label">Column Span</label>
+    <div class="controls btn-group">
+      <button class="btn" data-action="increaseColspan">+</button>
+      <button class="btn" data-action="decreaseColspan">-</button>
+    </div>
+  </div>
 
-  <select id="table_alignment" name="table[alignment]">
-    <option value="">None</option>
-    <option value="left">Left</option>
-    <option value="right" id="right_option">Right</option>
-  </select>
+  <div class="control-group select optional">
+    <label class="select optional control-label" for="table_alignment">Alignment</label>
+    <div class="controls">
+      <select class="select optional" id="table_alignment" name="table[alignment]">
+        <option value="">None</option>
+        <option value="right">Right</option>
+        <option value="left">Left</option>
+      </select>
+    </div>
+  </div>
+  <div class="control-group number optional">
+    <label class="number optional control-label" for="table_border">Border</label>
+    <div class="controls">
+      <input class="number optional" id="table_border" name="table[border]" size="50" type="number" value="1">
+    </div>
+  </div>
+  <div class="control-group number optional">
+    <label class="number optional control-label" for="table_spacing">Spacing</label>
+    <div class="controls">
+      <input class="number optional" id="table_spacing" name="table[spacing]" size="50" type="number" value="0">
+    </div>
+  </div>
 
-  <input id="table_border" type="text" value="1"/>
-  <input id="table_spacing" type="text" value="0"/>
+  <input class="submit" name="commit" type="submit" value="Insert Table"/>
 
-  <input id="submit" type="submit"/>
 </form>