Add Controllable mixin

sir-trevor.css

@@ -380,10 +380,17 @@ ul.st-text-block {
   right: 0;
   opacity: 0; }
 
-.st-block__inner:hover .st-block__ui {
+.st-block__control-ui {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0; }
+
+.st-block__inner:hover .st-block__ui,
+.st-block__inner:hover .st-block__control-ui {
   opacity: 1; }
 
-.st-block-ui-btn {
+.st-block-ui-btn, .st-block-control-ui-btn {
   display: block;
   float: left;
   width: 3em;
@@ -399,17 +406,30 @@ ul.st-text-block {
   margin-bottom: 0;
   cursor: pointer; }
 
-.st-block--with-errors .st-block-ui-btn,
-.st-block--delete-active .st-block-ui-btn {
+.st-block-control-ui-btn {
+  width: 2em;
+  height: 1.75em;
+  font-size: 1.5em;
+  line-height: 1.25em;
+  height: 1.25em;
+  border: 2px solid #34e0c2;
+  border-left: 0;
+  border-bottom: 0; }
+
+.st-block--with-errors .st-block-ui-btn, .st-block--with-errors .st-block-control-ui-btn,
+.st-block--delete-active .st-block-ui-btn,
+.st-block--delete-active .st-block-control-ui-btn {
   color: #d70014;
   border-color: #d70014; }
 
-.st-block-ui-btn:hover {
+.st-block-ui-btn:hover, .st-block-control-ui-btn:hover,
+.st-block-control-ui-btn:hover {
   color: #fff;
   background: #34e0c2; }
 
-.st-block--with-errors .st-block-ui-btn:hover,
-.st-block--delete-active .st-block-ui-btn:hover {
+.st-block--with-errors .st-block-ui-btn:hover, .st-block--with-errors .st-block-control-ui-btn:hover,
+.st-block--delete-active .st-block-ui-btn:hover,
+.st-block--delete-active .st-block-control-ui-btn:hover {
   background-color: #d70014; }
 
 .st-block--delete-active .st-block__ui-delete-controls {

sir-trevor.js

@@ -4,7 +4,7 @@
  * Released under the MIT license
  * www.opensource.org/licenses/MIT
  *
- * 2013-11-13
+ * 2013-11-18
  */
 
 (function ($, _){
@@ -820,6 +820,36 @@
     }
 
   };
+  SirTrevor.BlockMixins.Controllable = {
+
+    mixinName: "Controllable",
+
+    initializeControllable: function() {
+      SirTrevor.log("Adding controllable to block " + this.blockID);
+      this.$control_ui = $('<div>', {'class': 'st-block__control-ui'});
+      _.each(
+        this.controls,
+        function(handler, cmd) {
+          // Bind configured handler to current block context
+          this.addUiControl(cmd, _.bind(handler, this));
+        },
+        this
+      );
+      this.$inner.append(this.$control_ui);
+    },
+
+    getControlTemplate: function(cmd) {
+      return $("<a>",
+        { 'data-icon': cmd,
+          'class': 'st-icon st-block-control-ui-btn st-block-control-ui-btn--' + cmd
+        });
+    },
+
+    addUiControl: function(cmd, handler) {
+      this.$control_ui.append(this.getControlTemplate(cmd));
+      this.$control_ui.on('click', '.st-block-control-ui-btn--' + cmd, handler);
+    }
+  };
   /* Adds drop functionaltiy to this block */
 
   SirTrevor.BlockMixins.Droppable = {
@@ -1498,6 +1528,7 @@
         if (this.pastable) { this.withMixin(SirTrevor.BlockMixins.Pastable); }
         if (this.uploadable) { this.withMixin(SirTrevor.BlockMixins.Uploadable); }
         if (this.fetchable) { this.withMixin(SirTrevor.BlockMixins.Fetchable); }
+        if (this.controllable) { this.withMixin(SirTrevor.BlockMixins.Controllable); }
 
         if (this.formattable) { this._initFormatting(); }
 

spec/javascripts/units/block/controllable.spec.js

@@ -0,0 +1,46 @@
+describe("Controllable Block", function(){
+
+  var element, editor, block, testHandler;
+
+  beforeEach(function(){
+    element = $("<textarea>");
+    editor = new SirTrevor.Editor({ el: element });
+
+    testHandler = jasmine.createSpy();
+
+    SirTrevor.Blocks.ControllableBlock = SirTrevor.Block.extend({
+      controllable: true,
+      controls: {
+        'test': testHandler
+      }
+    });
+
+    block = new SirTrevor.Blocks.ControllableBlock({}, editor.ID);
+  });
+
+  describe("render", function(){
+
+    beforeEach(function(){
+      spyOn(block, 'withMixin').andCallThrough();
+      block = block.render();
+    });
+
+    it("gets the controllable mixin", function(){
+      expect(block.withMixin)
+        .toHaveBeenCalledWith(SirTrevor.BlockMixins.Controllable);
+    });
+
+    it("adds an element to $control_ui", function(){
+      expect($(block.$control_ui).find('.st-block-control-ui-btn').length)
+        .toBe(1);
+    });
+
+    it("runs the handler on click", function(){
+      $(block.$control_ui.find('.st-block-control-ui-btn')).trigger('click');
+      expect(testHandler)
+        .toHaveBeenCalled();
+    });
+
+  });
+
+});

src/block.js

@@ -112,6 +112,7 @@ SirTrevor.Block = (function(){
       if (this.pastable) { this.withMixin(SirTrevor.BlockMixins.Pastable); }
       if (this.uploadable) { this.withMixin(SirTrevor.BlockMixins.Uploadable); }
       if (this.fetchable) { this.withMixin(SirTrevor.BlockMixins.Fetchable); }
+      if (this.controllable) { this.withMixin(SirTrevor.BlockMixins.Controllable); }
 
       if (this.formattable) { this._initFormatting(); }
 
@@ -354,4 +355,4 @@ SirTrevor.Block = (function(){
 
   return Block;
 
-})();
+})();

src/block_mixins/controllable.js

@@ -0,0 +1,30 @@
+SirTrevor.BlockMixins.Controllable = {
+
+  mixinName: "Controllable",
+
+  initializeControllable: function() {
+    SirTrevor.log("Adding controllable to block " + this.blockID);
+    this.$control_ui = $('<div>', {'class': 'st-block__control-ui'});
+    _.each(
+      this.controls,
+      function(handler, cmd) {
+        // Bind configured handler to current block context
+        this.addUiControl(cmd, _.bind(handler, this));
+      },
+      this
+    );
+    this.$inner.append(this.$control_ui);
+  },
+
+  getControlTemplate: function(cmd) {
+    return $("<a>",
+      { 'data-icon': cmd,
+        'class': 'st-icon st-block-control-ui-btn st-block-control-ui-btn--' + cmd
+      });
+  },
+
+  addUiControl: function(cmd, handler) {
+    this.$control_ui.append(this.getControlTemplate(cmd));
+    this.$control_ui.on('click', '.st-block-control-ui-btn--' + cmd, handler);
+  }
+};

src/sass/block-ui.scss

@@ -5,7 +5,14 @@
   opacity: 0;
 }
 
-.st-block__inner:hover .st-block__ui {
+.st-block__control-ui {
+  position: absolute;
+  bottom: 0; left: 0;
+  opacity: 0;
+}
+
+.st-block__inner:hover .st-block__ui,
+.st-block__inner:hover .st-block__control-ui {
   opacity: 1;
 }
 
@@ -25,13 +32,25 @@
   cursor: pointer;
 }
 
+.st-block-control-ui-btn {
+  @extend .st-block-ui-btn;
+  width: 2em; height: 1.75em;
+  font-size: 1.5em;
+  line-height: 1.25em;
+  height: 1.25em;
+  border: 2px solid $accent-color;
+  border-left: 0;
+  border-bottom: 0;
+}
+
 .st-block--with-errors .st-block-ui-btn ,
 .st-block--delete-active .st-block-ui-btn {
   color: $error-color;
   border-color: $error-color;
 }
 
-.st-block-ui-btn:hover {
+.st-block-ui-btn:hover,
+.st-block-control-ui-btn:hover {
   color: #fff;
   background: $accent-color;
 }
@@ -55,4 +74,4 @@
   background: #fff;
   color: $error-color;
   padding: 0.4em 0;
-}
+}

website/source/partials/docs/_4.html.markdown

@@ -44,6 +44,9 @@ Provides support for uploadable content and mixins in the uploader into the bloc
 **`ajaxable`**
 Gives a way to fetch content remotely through a editor managed queue.
 
+**`controllable`**
+Provides a second, smaller UI in the lower left block corner to control its contents. Requires the `controls`-object so be specified in the block configuration (`'command-name': handler`).
+
 The **droppable, uploadable and pastable** components have the ability to override the default HTML that gets built as the UI. This can easily be done through the `uploadable_options.html`, `droppable_options.html` or `pastable_options.html` objects on the block. Each takes a string that is passed to an underscore `_.template` method.
 
 <a name="4-3"></a>