1 /**
  2  * font formatting for kissy editor
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("editor/plugin/font/ui", function (S, Editor, Button, MenuButton) {
  6 
  7     var FontSelect = MenuButton.Select.extend({
  8 
  9         initializer:function () {
 10             var self = this,
 11                 editor = self.get("editor");
 12             self.on("click", function (ev) {
 13                 var v = ev.target.get("value"),
 14                     cmdType = self.get("cmdType");
 15                 editor.execCommand(cmdType, v);
 16             });
 17 
 18             editor.on("selectionChange", function () {
 19                 if (editor.get("mode") == Editor.SOURCE_MODE) {
 20                     return;
 21                 }
 22 
 23                 var cmdType = self.get("cmdType"),
 24                     menu = self.get("menu"),
 25                     children = menu.get && menu.get("children");
 26 
 27                 if (children) {
 28                     // Check if the element is removable by any of
 29                     // the styles.
 30                     var currentValue = editor.queryCommandValue(cmdType);
 31                     if (currentValue !== false) {
 32                         currentValue = (currentValue + "").toLowerCase();
 33                         for (var j = 0; j < children.length; j++) {
 34                             var item = children[j];
 35                             var value = item.get("value");
 36                             if (currentValue == value.toLowerCase()) {
 37                                 self.set("value", value);
 38                                 return;
 39                             }
 40                         }
 41                     }
 42                     self.set("value", null);
 43                 }
 44             });
 45         }
 46     });
 47 
 48 
 49     var FontButton = Button.extend({
 50 
 51         initializer:function () {
 52             var self = this,
 53                 editor = self.get("editor"),
 54                 cmdType = self.get("cmdType");
 55             self.on("click", function () {
 56                 var checked = self.get("checked");
 57                 if (checked) {
 58                     editor.execCommand(cmdType);
 59                     editor.focus();
 60                 } else {
 61                     editor.execCommand(cmdType, false);
 62                     editor.focus();
 63                 }
 64             });
 65             editor.on("selectionChange", function () {
 66 
 67                 if (editor.get("mode") == Editor.SOURCE_MODE) {
 68                     return;
 69                 }
 70                 var cmdType = self.get("cmdType");
 71                 if (editor.queryCommandValue(cmdType)) {
 72                     self.set("checked", true);
 73                 } else {
 74                     self.set("checked", false);
 75                 }
 76             });
 77         }
 78     }, {
 79         ATTRS:{
 80             checkable:{
 81                 value:true
 82             },
 83             mode:{
 84                 value:Editor.WYSIWYG_MODE
 85             }
 86         }
 87     });
 88 
 89     return {
 90         Button:FontButton,
 91         Select:FontSelect
 92     };
 93 }, {
 94     requires:['editor', '../button/', '../menubutton/']
 95 });
 96