js2/mwEmbed/libClipEdit/pixastic-lib/pixastic-editor/ui.js

   1 (function($) {
   2
   3         var PE = PixasticEditor;
   4
   5         function makeSlider(label, id, min, max, step, defaultVal, onChange) {
   6                 var $ctr = $j("<div></div>", PE.getDocument())
   7                         .addClass("ui-slider-container");
   8
   9                 var $label = $j("<label></label>", PE.getDocument())
  10                         .addClass("ui-slider-label")
  11                         .attr("for", "input-slider-" + id)
  12                         .html(label + ":")
  13                         .appendTo($ctr);
  14
  15                 var $value = $j("<div></div>", PE.getDocument())
  16                         .addClass("ui-slider-value")
  17                         .html(defaultVal());
  18
  19                 var $valueField = $j("<input type='hidden'>", PE.getDocument())
  20                         .attr("id", "input-hidden-" + id)
  21                         .val(defaultVal())
  22                         .appendTo($ctr);
  23
  24                 var performOnChange = true;
  25
  26                 var $slider = $j("<div class='ui-slider'><div class='ui-slider-handle'></div><div class='ui-slider-range'></div></div>", PE.getDocument())
  27                         .appendTo($ctr)
  28                         .attr("id", "input-slider-" + id)
  29                         .slider({
  30                                 slide: function() {
  31                                         $value.html($j(this).slider("value"));
  32                                         $valueField.val($j(this).slider("value"));
  33                                 },
  34                                 change : function() {
  35                                         $value.html($j(this).slider("value"));
  36                                         $valueField.val($j(this).slider("value"));
  37                                         if (onChange && performOnChange)
  38                                                 onChange();
  39                                 },
  40                                 min : min,
  41                                 max : max,
  42                                 step : step,
  43                                 value : defaultVal()
  44                         });
  45
  46                 $value.appendTo($ctr);
  47
  48                 return {
  49                         container : $ctr,
  50                         label : $label,
  51                         slider : $slider,
  52                         valueText : $value,
  53                         valueField : $valueField,
  54                         reset : function() {
  55                                 performOnChange = false;
  56                                 $value.html(defaultVal());
  57                                 $valueField.val(defaultVal());
  58                                 $slider.slider("value", defaultVal());
  59                                 performOnChange = true;
  60                         }
  61                 };
  62         }
  63
  64         function makeCheckbox(label, id, defaultVal, onChange) {
  65                 var $ctr = $j("<div></div>", PE.getDocument())
  66                         .addClass("ui-checkbox-container");
  67
  68                 var $label = $j("<label></label>", PE.getDocument())
  69                         .addClass("ui-checkbox-label")
  70                         .attr("for", "input-checkbox-" + id)
  71                         .html(label + ":")
  72                         .appendTo($ctr);
  73
  74                 var $valueField = $j("<input type='hidden'>", PE.getDocument())
  75                         .attr("id", "input-hidden-" + id)
  76                         .val(defaultVal())
  77                         .appendTo($ctr);
  78
  79                 var performOnChange = true;
  80
  81                 var $checkbox = $j("<input type=\"checkbox\"></input>", PE.getDocument())
  82                         .addClass("ui-checkbox")
  83                         .attr("id", "input-checkbox-" + id)
  84                         .attr("checked", defaultVal())
  85                         .appendTo($ctr)
  86                         .change(function() {
  87                                 $valueField.val(this.checked);
  88                                 if (onChange && performOnChange)
  89                                         onChange();
  90                         });
  91
  92                 return {
  93                         container : $ctr,
  94                         label : $label,
  95                         checkbox : $checkbox,
  96                         valueField : $valueField,
  97                         reset : function() {
  98                                 performOnChange = false;
  99                                 $checkbox.attr("checked", defaultVal());
 100                                 $valueField.val(defaultVal());
 101                                 performOnChange = true;
 102                         }
 103                 };
 104         }
 105
 106         function makeSelect(label, id, values, defaultVal, onChange) {
 107                 var $ctr = $j("<div></div>", PE.getDocument())
 108                         .addClass("ui-select-container");
 109
 110                 var $label = $j("<label></label>", PE.getDocument())
 111                         .addClass("ui-checkbox-label")
 112                         .attr("for", "input-checkbox-" + id)
 113                         .html(label + ":")
 114                         .appendTo($ctr);
 115
 116                 var $valueField = $j("<input type='hidden'>", PE.getDocument())
 117                         .attr("id", "input-hidden-" + id)
 118                         .val(defaultVal())
 119                         .appendTo($ctr);
 120
 121                 var selectHtml = "<select>";
 122                 for (var i=0;i<values.length;i++) {
 123                         selectHtml += "<option value='" + values[i].value + "' "
 124                                 + (defaultVal() == values[i].value ? "selected" : "")
 125                                 + ">" + values[i].name + "</option>";
 126                 }
 127                 selectHtml += "</select>";
 128
 129                 var $select = $j(selectHtml).appendTo($ctr);
 130
 131                 var performOnChange = true;
 132
 133                 $select.change(
 134                         function() {
 135                                 $valueField.val(this.options[this.selectedIndex].value);
 136                                 if (onChange && performOnChange)
 137                                         onChange();
 138                         }
 139                 );
 140
 141                 return {
 142                         container : $ctr,
 143                         label : $label,
 144                         select : $select,
 145                         valueField : $valueField,
 146                         reset : function() {
 147                                 performOnChange = false;
 148                                 var defVal = defaultVal();
 149                                 $select.val(defVal);
 150                                 $valueField.val(defVal);
 151                                 performOnChange = true;
 152                         }
 153                 };
 154         }
 155
 156         function makeNumericInput(label, labelRight, id, min, max, step, defaultVal, onChange) {
 157                 var $ctr = $j("<div></div>", PE.getDocument())
 158                         .addClass("ui-textinput-container");
 159
 160                 var $label = $j("<label></label>", PE.getDocument())
 161                         .addClass("ui-textinput-label")
 162                         .attr("for", "input-numeric-" + id)
 163                         .html(label + ":")
 164                         .appendTo($ctr);
 165
 166                 var $valueField = $j("<input type='hidden'>", PE.getDocument())
 167                         .attr("id", "input-hidden-" + id)
 168                         .val(defaultVal())
 169                         .appendTo($ctr);
 170
 171                 var performOnChange = true;
 172
 173                 function setVal(val) {
 174                         val = Math.min(max, val);
 175                         val = Math.max(min, val);
 176                         $textInput.val(val);
 177                         $valueField.val(val);
 178                 }
 179
 180                 var $textInput = $j("<input type=\"text\"></input>", PE.getDocument())
 181                         .addClass("ui-textinput")
 182                         .addClass("ui-numericinput")
 183                         .appendTo($ctr)
 184                         .val(defaultVal())
 185                         .attr("id", "input-numeric-" + id)
 186                         .change(function() {
 187                                 var val = parseFloat(this.value);
 188                                 setVal(val);
 189                                 if (onChange && performOnChange)
 190                                         onChange();
 191                         })
 192                         .keydown(function(e) {
 193                                 var val = parseFloat($j(this).val());
 194                                 if (e.keyCode == 38) { // up
 195                                         setVal(val + step);
 196                                 }
 197                                 if (e.keyCode == 40) { // down
 198                                         setVal(val - step);
 199                                 }
 200                         });
 201
 202                 if (labelRight) {
 203                         var $labelRight = $j("<label></label>", PE.getDocument())
 204                                 .addClass("ui-textinput-label-right")
 205                                 .html(labelRight)
 206                                 .appendTo($ctr);
 207                 }
 208
 209                 return {
 210                         container : $ctr,
 211                         label : $label,
 212                         textinput : $textInput,
 213                         valueField : $valueField,
 214                         reset : function() {
 215                                 performOnChange = false;
 216                                 setVal(defaultVal());
 217                                 performOnChange = true;
 218                         }
 219                 };
 220         }
 221
 222         function makeButton(text) {
 223                 var $button = $j("<button></button>", PE.getDocument()).html(text);
 224                 return $button;
 225         }
 226
 227
 228         PE.UI = {
 229                 makeSlider : makeSlider,
 230                 makeCheckbox : makeCheckbox,
 231                 makeNumericInput : makeNumericInput,
 232                 makeSelect : makeSelect,
 233                 makeButton : makeButton
 234         }
 235
 236 })(PixasticEditor.jQuery);
 237