add toggleButton fixed #281

apps/editor/demo/demo.html

@@ -35,7 +35,7 @@
 
     $('#editSection').neonEditor({
         previewStyle: 'vertical',
-        height: 300,
+        height: 800,
         delay: 300,
         //initialValue: 'a\nb\nc\nd\ne\nf\ng\n\na\nb\nc\nd\ne\nf\ng\n\na\nb\nc\nd\ne\nf\ng\n\n',
         //initialValue: 'test1\ntest2\ntest3\ntest4',

apps/editor/src/js/button.js

@@ -27,19 +27,27 @@ function Button(options) {
         className: options.className
     });
 
-    this.command = options.command;
-    this.event = options.event;
-    this.text = options.text;
-    this.style = options.style;
+    this._setOptions(options);
 
     this.render();
+
+    this.attachEvents({
+        'click': '_onClick'
+    });
 }
 
 Button.prototype = util.extend(
     {},
     UIController.prototype
 );
 
+Button.prototype._setOptions = function(options) {
+    this.command = options.command;
+    this.event = options.event;
+    this.text = options.text;
+    this.style = options.style;
+};
+
 /**
  * Button의 모습을 그린다
  */
@@ -50,10 +58,6 @@ Button.prototype.render = function() {
     if (this.style) {
         this.$el.attr('style', this.style);
     }
-
-    this.attachEvents({
-        'click': '_onClick'
-    });
 };
 
 /**
@@ -66,6 +70,8 @@ Button.prototype._onClick = function() {
     } else {
         this.trigger('event', this.event);
     }
+
+    this.trigger('clicked');
 };
 
 module.exports = Button;

apps/editor/src/js/extensions/scrollFollow.js

@@ -53,15 +53,15 @@ extManager.defineExtension('scrollFollow', function(editor) {
     });
 
     //UI
-    editor.layout.toolbar.addButton({
-        className: 'scrollFollowEnable',
-        command: 'scrollFollow.enable',
-        text: 'SF_ON'
-    });
-
-    editor.layout.toolbar.addButton({
-        className: 'scrollFollowDisable',
+    editor.layout.toolbar.addButton([{
+        classname: 'scrollfollowEnable',
         command: 'scrollFollow.disable',
-        text: 'SF_OFF'
-    });
+        text: 'SF',
+        style: 'background-color: #fff'
+    }, {
+        className: 'scrollFollowDisable',
+        command: 'scrollFollow.enable',
+        text: 'SF',
+        style: 'background-color: #ddd'
+    }]);
 });

apps/editor/src/js/toggleButton.js

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview
+ * @author Sungho Kim([email protected]) FE Development Team/NHN Ent.
+ */
+'use strict';
+
+var Button = require('./button');
+
+var util = ne.util;
+
+/**
+ * ToggleButton
+ * initialize toggle button
+ * @exports ToggleButton
+ * @augments Button
+ * @constructor
+ * @class
+ * @param {object[]} options 옵션
+ * @param {string} options.className 만들어진 RootElement에 추가할 클래스
+ * @param {string} options.command 클릭되면 실행될 커맨드명
+ * @param {string} options.text 버튼안에 들어갈 텍스트
+ * @param {string} options.style 추가적으로 적용될 CSS스타일
+ */
+function ToggleButton(options) {
+    this.options = options;
+    this.current = this.options[0];
+
+    Button.call(this, this.current);
+
+    this._initEvent();
+}
+
+ToggleButton.prototype = util.extend(
+    {},
+    Button.prototype
+);
+
+ToggleButton.prototype._initEvent = function() {
+    var self = this;
+
+    this.on('clicked', function() {
+        self._toggle();
+    });
+};
+
+ToggleButton.prototype._toggle = function() {
+    if (this.current === this.options[0]) {
+        this.current = this.options[1];
+    } else {
+        this.current = this.options[0];
+    }
+
+    this._setOptions(this.current);
+    this.render();
+};
+
+module.exports = ToggleButton;

apps/editor/src/js/toolbar.js

@@ -6,7 +6,8 @@
 'use strict';
 
 var UIController = require('./uicontroller'),
-    Button = require('./button');
+    Button = require('./button'),
+    ToggleButton = require('./toggleButton');
 
 var util = ne.util;
 
@@ -53,7 +54,11 @@ Toolbar.prototype.addButton = function(button) {
     var ev = this.eventManager;
 
     if (!button.render) {
-        button = new Button(button);
+        if (!util.isArray(button)) {
+            button = new Button(button);
+        } else {
+            button = new ToggleButton(button);
+        }
     }
 
     button.on('command', function emitCommandEvent($, commandName) {

apps/editor/test/button.spec.js

@@ -1,8 +1,8 @@
+'use strict';
+
 var Button = require('../src/js/button');
 
 describe('Button', function() {
-    'use strict';
-
     var button;
 
     beforeEach(function() {

apps/editor/test/toggleButton.spec.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var ToggleButton = require('../src/js/toggleButton');
+
+describe('ToggleButton', function() {
+    var button;
+
+    beforeEach(function() {
+        $('body').empty();
+    });
+
+    describe('버튼 생성', function() {
+        it('버튼 태그를 만든다.', function() {
+            button = new ToggleButton([{}]);
+            expect(button.$el.prop('tagName')).toEqual('BUTTON');
+        });
+
+        it('옵션으로 전달된 className이 버튼태그에 적용된다.', function() {
+            button = new ToggleButton([{
+                className: 'myclass'
+            }]);
+            expect(button.$el.hasClass('myclass')).toBe(true);
+        });
+
+        it('옵션으로 전달된 text가 버튼태그에 적용된다.', function() {
+            button = new ToggleButton([{
+                text: 'buttonText'
+            }]);
+
+            expect(button.$el.text()).toEqual('buttonText');
+        });
+
+        it('옵션으로 전달된 style 버튼태그에 적용된다.', function() {
+            button = new ToggleButton([{
+                style: 'display:none'
+            }]);
+
+            expect(button.$el.css('display')).toEqual('none');
+        });
+    });
+
+    describe('toggle button', function() {
+        it('toggle button with second options', function() {
+            button = new ToggleButton([{
+                text: 'first'
+            }, {
+                text: 'second'
+            }]);
+
+            expect(button.text).toEqual('first');
+
+            button._onClick();
+
+            expect(button.text).toEqual('second');
+        });
+    });
+});