www/corelib/classes/SelectWidgetClass.js

   1 // atgs[0] : SelectWidgetItemClassのリスト
   2 // args[1] : 選択完了時のコールバック 引数: Cancel->null, Ok->SelectWidgetItemClassの「リスト」(複数選択不可の時も) (省略可)
   3 // args[2] : 複数選択可(省略可、初期値はfalse)
   4 // args[3] : 初期選択位置(省略可、初期値は0);
   5 // args[4] : 最下部にメッセージを表示するかどうか(省略可、初期値はtrue);
   6 var SelectWidgetClass = function(manager, args){
   7         SelectWidgetClass.base.apply(this, arguments);
   8
   9         //位置など
  10         this.size = new Point2D(600, 440);
  11         this.origin = new Point2D(20, 20);
  12
  13         //オプション
  14         this.items = args[0].slice(0);
  15         this.callback = args[1];        //省略可
  16         this.multiSelect = args[2] != undefined ? args[2] : false;
  17         this.defaultCursor = args[3] != undefined ? args[3] : 0;
  18         this.cursor = -1;
  19         this.showMessage = args[4] != undefined ? args[4] : true;
  20         this.fixedMessage = "";
  21
  22         this.enableCancel = true;       //キャンセルボタンを有効にする
  23
  24         //画面配置
  25         this.padding = 20;                                                                      //選択画面内の上下左右の余白
  26         this.itemPadding = 20;                                                          //アイテムの間隔
  27         this.messageHeight = this.showMessage ? 166 : 0;        //メッセージ部分の高さ(マージン部分を含む)
  28         this.messageMergin = 32;                                                        //メッセージ周囲のマージン
  29         this.messageBorder = "3px orange solid";                        //メッセージの外郭
  30         this.buttonHeight = 16;                                                         //ボタン部分の高さ
  31         this.buttonWidth = 96;                                                          //一つのボタンの幅
  32         this.backColor = "rgba(0, 0, 0, 0.75)";                                                 //画面の背景色
  33         this.border = "1px white solid";                                        //画面の最外郭
  34
  35         //内部の変数
  36         this.wBox = null;
  37         this.wMessage = null;
  38         this.okButton = null;
  39         this.cancelButton = null;
  40         this.leftKeyPressed = true;
  41         this.rightKeyPressed = true;
  42         this.selectKeyPressed = true;
  43         this.isHidden = false;
  44
  45 }.extend(WidgetClass, {
  46         attach : function(){
  47                 var wBox, wItem, wMessage, bOk, bCancel;
  48                 wBox = document.createElement('div');
  49                 with(wBox)
  50                 {
  51                         style.position = "absolute";
  52                         style.top = this.origin.y + "px";
  53                         style.left = this.origin.x + "px";
  54                         style.width = this.size.x + "px";
  55                         style.height = this.size.y + "px";
  56                         style.backgroundColor = this.backColor;
  57                         style.border = this.border;
  58                         style.zIndex = "999";
  59                 }
  60                 wItem = document.createElement('div');
  61                 with(wItem)
  62                 {
  63                         style.position = "absolute";
  64                         style.top = this.padding + "px";
  65                         style.left = this.padding + "px";
  66                         style.width = (this.size.x - (this.padding * 2)) + "px";
  67                         style.height = (this.size.y - (this.padding * 2) - this.buttonHeight - this.messageHeight) + "px";
  68                         style.overflow = "hidden";
  69                 }
  70                 wBox.appendChild(wItem);
  71
  72                 var xloc = this.itemPadding, yloc = this.itemPadding;
  73                 var maxHeight = 0;
  74                 for(var i = 0; i < this.items.length; i++)
  75                 {
  76                         var w = this.items[i];
  77                         if(xloc + w.size.x > (this.size.x - (this.padding * 2)) - this.itemPadding)
  78                         {
  79                                 xloc = this.itemPadding;
  80                                 yloc += maxHeight + this.itemPadding;
  81                                 maxHeight = 0;
  82                         }
  83
  84                         wItem.appendChild(w.createHtmlElement(xloc, yloc));
  85                         w.updateHtmlElement()
  86
  87                         xloc += w.size.x + this.itemPadding;
  88
  89                         if(maxHeight < w.size.y) maxHeight = w.size.y;
  90
  91                 }
  92
  93                 wMessage = createMessageBox(
  94                         "",                                                                                                                     //id
  95                         this.size.x - (this.padding * 2) - (this.messageMergin * 2),    //width
  96                         this.messageHeight - (this.messageMergin * 2),                                  //height
  97                         this.messageMergin + this.padding,                                                              //x
  98                         this.size.y - this.padding - this.buttonHeight - this.messageHeight + this.messageMergin,       //y
  99                         wBox,
 100                         "",                                                                                                                             //color
 101                         "white",                                                                                                                //foreColor
 102                         16                                                                                                                              //mergin
 103                 );
 104                 wMessage.style.border = this.messageBorder;
 105                 changeMessageBox(wMessage, "", false);  //初めは空の文字列にしておく
 106                 this.wMessage = wMessage;
 107                 this.okButton = new SelectWidgetItemClass(true, "決定", new Point2D(this.buttonWidth, this.buttonHeight), false, "決定します。");
 108                 bOk = this.okButton.createHtmlElement(this.size.x - this.padding - this.buttonWidth, this.size.y - this.padding - this.buttonHeight)
 109                 wBox.appendChild(bOk);
 110
 111                 if(this.enableCancel)
 112                 {
 113                         this.cancelButton = new SelectWidgetItemClass(true, "キャンセル", new Point2D(this.buttonWidth, this.buttonHeight), false, "キャンセルします。");
 114                         bCancel = this.cancelButton.createHtmlElement(this.size.x - this.padding - (this.buttonWidth * 2) - this.itemPadding * 2, this.size.y - this.padding - this.buttonHeight);
 115                         wBox.appendChild(bCancel);
 116                         this.items.push(this.cancelButton);
 117                 }
 118                 this.items.push(this.okButton);
 119
 120                 this.manager.mainArea.appendChild(wBox);
 121                 this.wBox = wBox;
 122
 123                 // 初期選択状態をつくる
 124                 this.moveCursor(this.defaultCursor);
 125                 var w = this;
 126                 this.manager.pauseStage(function()
 127                 {
 128                         // pauseStageに直接tickを設置するとtick内のthisでmanagerが取得されてしまう
 129                         if(!w.tick())
 130                         {
 131                                 w.manager.resumeStage();
 132                                 //w.manager.removeWidget(w);
 133                         }
 134                 });
 135         },
 136         detach : function(){
 137                 this.manager.mainArea.removeChild(this.wBox);
 138                 this.manager.resumeStage();
 139                 if(this.callback)
 140                 {
 141                         this.callback(this.callbackArg);
 142                 }
 143         },
 144         tick : function(){
 145
 146                 if(this.isHidden)
 147                 {
 148                         return false;
 149                 }
 150
 151                 //カーソルの移動
 152                 if(this.manager.UIManager.keyState.cursorLeft)
 153                 {
 154                         if(!this.leftKeyPressed)
 155                         {
 156                                 this.leftKeyPressed = true;
 157                                 this.moveCursor(this.cursor - 1);
 158                         }
 159                 }else
 160                 {
 161                         this.leftKeyPressed = false;
 162                 }
 163                 if(this.manager.UIManager.keyState.cursorRight)
 164                 {
 165                         if(!this.rightKeyPressed)
 166                         {
 167                                 this.rightKeyPressed = true;
 168                                 this.moveCursor(this.cursor + 1);
 169                         }
 170                 }else
 171                 {
 172                         this.rightKeyPressed = false;
 173                 }
 174                 if(this.manager.UIManager.keyState.select)
 175                 {
 176                         if(!this.selectKeyPressed)
 177                         {
 178                                 this.selectKeyPressed = true;
 179                                 if(!this.select(this.cursor))
 180                                 {
 181                                         this.isHidden = true;
 182                                 }
 183                         }
 184                 }else
 185                 {
 186                         this.selectKeyPressed = false;
 187                 }
 188                 return true;
 189         },
 190         moveCursor : function(c){
 191                 if(c < 0) c = 0;
 192                 if(c >= this.items.length) c = this.items.length - 1;
 193
 194                 if(this.cursor != -1)
 195                 {
 196                         this.items[this.cursor].isActive = false;
 197                         this.items[this.cursor].updateHtmlElement();
 198                 }
 199
 200                 this.cursor = c;
 201                 this.items[this.cursor].isActive = true;
 202                 this.items[this.cursor].updateHtmlElement();
 203
 204                 var message = this.items[this.cursor].message
 205                 if(this.fixedMessage != "") message = this.fixedMessage;
 206                 changeMessageBox(this.wMessage, message, false);
 207         },
 208         select : function(c){   //Widgetを閉じるときはfalseで帰る
 209                 if(c < this.items.length - (this.enableCancel ? 2 : 1))
 210                 {
 211                         if(this.multiSelect)
 212                         {
 213                                 this.items[c].isSelected = !this.items[c].isSelected;
 214                                 this.items[c].updateHtmlElement();
 215                         }else
 216                         {
 217                                 for(var i = 0; i < this.items.length; i++)
 218                                 {
 219                                         this.items[i].isSelected = i == c;
 220                                         this.items[i].updateHtmlElement();
 221                                 }
 222                         }
 223                 }else
 224                 {
 225                         if((c == this.items.length - 2 && this.enableCancel)) //cancel button
 226                         {
 227                                 if(this.callback)
 228                                 {
 229                                         this.callbackArg = null;
 230                                 }
 231                         }else   //ok button
 232                         {
 233                                 if(this.callback)
 234                                 {
 235                                         var list = [];
 236                                         for(var i = 0; i < this.items.length; i++)
 237                                         {
 238                                                 if(this.items[i].isSelected)
 239                                                 {
 240                                                         list.push(this.items[i]);
 241                                                 }
 242                                         }
 243                                         this.callbackArg = list;
 244                                 }
 245                         }
 246                         return false;
 247                 }
 248                 return true;
 249         }
 250 });
 251
 252 // showAsLabel ... true : 第二引数をテキストとして表示する
 253 // value                                : 表示する文字列または画像
 254 // size                                 : 要素のサイズ(Point2D)
 255 // selected                             : 初めから選択されているか(省略可 : 初期値false)
 256 // message                              : SelectWidgetClassの下に表示する文字列
 257 var SelectWidgetItemClass = function(showAsLabel, value, size, selected, message)
 258 {
 259
 260         //属性
 261         this.showAsLabel = showAsLabel;
 262         this.value = value;
 263         this.size = size ? size : new Point2D(48, 48);
 264         this.isActive = false;
 265         this.isSelected = selected != undefined ? selected : false;
 266         this.message = message ? message : "";
 267
 268         //外観
 269         this.border = "none";
 270         this.borderSelected = "1px orange solid";
 271         this.back = "";
 272         this.backSelected = "orange";
 273
 274         //内部変数
 275         this.element = null;
 276 };
 277 SelectWidgetItemClass.prototype = {
 278         createHtmlElement : function(x, y)
 279         {
 280                 if(this.element == null)
 281                 {
 282                         var element = document.createElement('div');
 283                         with(element)
 284                         {
 285                                 style.position = "absolute";
 286                                 style.top = y + "px";
 287                                 style.left = x + "px";
 288                                 style.width = this.size.x + "px";
 289                                 style.height = this.size.y + "px";
 290                                 style.padding = "6px";                                  //showAsLabelの時のための設定。
 291                                 style.overflow = "hidden";
 292                                 style.borderRadius = "6px";
 293                                 style.border = this.border;
 294                                 style.backgroundColor = this.back;
 295                                 style.color = "white";
 296                         }
 297
 298                         if(this.showAsLabel)
 299                         {
 300                                 element.innerText = this.value;
 301                         }else
 302                         {
 303                                 var child = document.createElement('img')
 304                                 child.src = "images/" + this.value;
 305                                 with(child)
 306                                 {
 307                                         style.position = "absolute";
 308                                         style.top = "0";
 309                                         style.left = "0";
 310                                         style.width = "100%";
 311                                         style.height = "100%";
 312                                 }
 313                                 element.appendChild(child);
 314                         }
 315
 316                         this.element = element;
 317                 }
 318
 319                 return this.element;
 320         },
 321         updateHtmlElement : function()
 322         {
 323                 if(this.element != null)
 324                 {
 325                         with(this.element)
 326                         {
 327                                 style.border = this.isActive ? this.borderSelected : this.border;
 328                                 style.backgroundColor = this.isSelected ? this.backSelected : this.back;
 329                         }
 330                 }
 331         }
 332 };
 333