source: branches/comu-ver2/html/user_data/packages/default/js/layout_design.js @ 17407

Revision 17407, 18.4 KB checked in by pineray, 16 years ago (diff)

レイアウト管理の調整(未了)。IEで不具合がおきる。

Line 
1/*
2 * This file is part of EC-CUBE
3 *
4 * Copyright(c) 2000-2007 LOCKON CO.,LTD. All Rights Reserved.
5 *
6 * http://www.lockon.co.jp/
7 *
8 * This program is free software; you can redistribute it and/or
9 * modify it under the terms of the GNU General Public License
10 * as published by the Free Software Foundation; either version 2
11 * of the License, or (at your option) any later version.
12 *
13 * This program is distributed in the hope that it will be useful,
14 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16 * GNU General Public License for more details.
17 *
18 * You should have received a copy of the GNU General Public License
19 * along with this program; if not, write to the Free Software
20 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
21 */
22// サイズ管理クラスの定義
23function SC_Size() {
24    this.id = '';               // ID
25    this.left = 0;              // 配置するY軸座標
26    this.top = 0;               // 配置するX軸座標
27    this.width = 0;             // オブジェクトの幅
28    this.height = 0;            // オブジェクトの高さ
29    this.target_id = '';        // 配置場所(左ナビとか)
30    this.margin = 10;           // 上のオブジェクトとの幅
31    this.obj;
32};
33
34// 変数宣言
35var defUnused = 500;    // 未使用領域のデフォルトの高さ
36var defNavi   = 400;    // 左右ナビのデフォルトの高さ
37var defMainNavi  = 100; // メイン上下のデフォルトの高さ
38var defMain   = 200;    // メインのデフォルトの高さ
39
40var NowMaxHeight = 0;       // 現在の最大の高さ
41var MainHeight = 200;
42
43var marginUnused    = 688;  // 未使用領域の左マージン
44var marginLeftNavi  = 180;  // 左ナビの左マージン
45var marginRightNavi = 512;  // 右ナビの左マージン
46var marginMain      = 348;  // メイン上下の左マージン
47var marginMainFootTop= 595; // メイン下の上マージン
48
49var gDragged = "";          // ドラッグ中オブジェクト
50var gDropTarget = "";       // ドラッグ開始時のDropTarget
51
52var arrObj = new Object();  // ブロックオブジェクト格納用
53
54var mouseFlg = false;
55
56var all_elms;               // divタグオブジェクト格納用
57
58// ウィンドウサイズ
59var scrX;
60var scrY;
61
62// イベントの関連付けを行う
63function addEvent( elm, evtType, fn, useCapture) {
64
65    if (elm.addEventListener) {
66        elm.addEventListener(evtType, fn, useCapture);
67        return true;
68
69    }
70    else if (elm.attachEvent) {
71
72        var r = elm.attachEvent('on' + evtType, fn);
73        return r;
74
75    }
76    else {
77        elm['on'+evtType] = fn;
78
79    }
80   
81}
82
83
84// イベントの関連付けを解除
85function removeEvent( elm, evtType, fn, useCapture) {
86
87    if (elm.removeEventListener) {
88
89        elm.removeEventListener(evtType, fn, useCapture);
90        return true;
91
92    }
93    else if (elm.detachEvent) {
94
95        var r = elm.detachEvent('on' + evtType, fn);
96        return r;
97
98    }
99    else {
100
101        elm['on'+evtType] = fn;
102
103    }
104   
105}
106
107// マウスカーソルを変更
108function setCursor ( elm, curtype ) {
109    elm.style.cursor = curtype;
110}
111
112// オブジェクトの透明度を変更   
113function setOpacity(node,val) {
114
115    if (node.filters) {
116        node.filters["alpha"].opacity = val*100;
117    } else if (node.style.opacity) {
118        node.style.opacity = val;
119    }
120}
121
122// Zindexを変更する(前面表示切替)
123function setZindex(node, val) {
124    node.style.zIndex = val;
125//  alert(val);
126}
127
128// 値を取得
129function getAttrValue ( elm, attrname ) {
130
131    if (typeof(elm.attributes[ attrname ]) != 'undefined') {
132        return elm.attributes[ attrname ].nodeValue;
133    }
134
135/*
136//  if (typeof(elm.attributes.getNamedItem(attrname)) != 'object'){
137        val = "";
138        if((typeof ScriptEngineMajorVersion)=='function')
139        {
140            if( Math.floor(ScriptEngineMajorVersion()) == 5 &&
141                navigator.userAgent.indexOf("Win")!=-1) //win-e5対応
142                {
143                val = elm.attributes.item(attrname)
144                }
145            else
146            {
147                val = elm.attributes.getNamedItem(attrname)
148            }
149        } else {
150            val = elm.attributes.getNamedItem(attrname)
151        }
152       
153        alert(val.value);
154       
155        return val.value;
156//  }
157*/
158}
159
160// 値をセット
161function setAttrValue ( elm, attrname, val ) {
162    elm.attributes[ attrname ].nodeValue = val;
163}
164
165// オブジェクトのX座標を取得
166function getX ( elm ) {
167//   return parseInt(elm.style.left);
168    return parseInt(elm.offsetLeft);
169}
170
171// オブジェクトのY座標を取得
172function getY ( elm ) {
173    return parseInt(elm.offsetTop);
174//    return parseInt(elm.style.top);
175}
176
177// X座標を取得
178function getEventX ( evt ) {
179    return evt.clientX ? evt.clientX : evt.pageX;
180}
181
182// Y座標を取得
183function getEventY ( evt ) {
184    return evt.clientY ? evt.clientY : evt.pageY;
185}
186
187// オブジェクトの幅を取得
188function getWidth ( elm ) {
189    return parseInt( elm.style.width );
190}
191
192// オブジェクトの高さを取得
193function getHeight ( elm ) {
194//    return parseInt( elm.style.height );
195    return parseInt( elm.offsetHeight );
196}
197
198// ページの可視領域のX座標を取得する
199function getPageScrollX()
200{
201    var x = 0;
202
203    if (document.body && document.body.scrollLeft != null) {
204        x = document.body.scrollLeft;
205    } else if (document.documentElement && document.documentElement.scrollLeft != null) {
206        x = document.documentElement.scrollLeft;
207    } else if (window.scrollX != null) {
208        x = window.scrollX;
209    } else if (window.pageXOffset != null) {
210        x = window.pageXOffset;
211    }
212   
213    return x;
214}
215
216// ページの可視領域のY座標を取得する
217function getPageScrollY()
218{
219    var y = 0;
220   
221    if (document.body && document.body.scrollTop != null) {
222        y = document.body.scrollTop;
223    } else if (document.documentElement && document.documentElement.scrollTop != null) {
224        y = document.documentElement.scrollTop;
225    } else if (window.scrollY != null) {
226        y = window.scrollY;
227    } else if (window.pageYOffset != null) {
228        y = window.pageYOffset;
229    }
230   
231    return y;
232}
233
234
235// オブジェクトの座標をセット
236function moveElm ( elm, x, y ) {
237    elm.style.left = x + 'px';
238    elm.style.top = y + 'px';
239}
240
241// マウスダウンイベント
242function onMouseDown (evt) {
243
244    var target = evt.target ? evt.target : evt.srcElement;
245    var x = getEventX ( evt );
246    var y = getEventY ( evt );
247
248    //
249    // Save Information to Globals
250    //
251    if (mouseFlg == false) {
252   
253        gDragged = target;
254   
255        gDeltaX = x - getX(gDragged);
256        gDeltaY = y - getY(gDragged);
257   
258        gDraggedId = getAttrValue ( gDragged, 'did' );
259        setCursor ( gDragged, 'move' );
260   
261        gOrgX = getX ( gDragged );
262        gOrgY = getY ( gDragged );
263        gtarget_id = getAttrValue ( gDragged, 'target_id' );
264   
265        //
266        // Set
267        //
268       
269        // ドラッグ中は半透明
270        setOpacity ( gDragged, 0.6 );
271   
272        // ドラッグ中は最前面表示
273        setZindex ( gDragged , 2);
274       
275        addEvent ( document, 'mousemove', onMouseMove, false );
276        addEvent ( document, 'mouseup', onMouseUp, false );
277
278        // ドラッグを開始したときは高さを一度初期化する。
279        NowMaxHeight = defNavi;
280               
281        mouseFlg = true;
282    }
283}
284
285
286// マウスムーブイベント
287function onMouseMove(evt) {
288
289    // 現在の座標を取得
290    var x = getEventX ( evt ) + document.body.scrollLeft;                   // マウス座標 X
291    var y = getEventY ( evt ) + document.body.scrollTop;                    // マウス座標 Y
292    var nowleft = getEventX ( evt ) - gDeltaX;  // オブジェクト座標 LEFT
293    var nowtop = getEventY ( evt ) - gDeltaY;   // オブジェクト座標 TOP
294
295    // オブジェクトを移動
296    moveElm ( gDragged, nowleft, nowtop );
297   
298    for ( var i = 0; i < all_elms.length; i++ ) {
299        // drop-target上にきた場合にのみ処理を行う
300        if ( isEventOnElm ( evt, all_elms[i].id ) ) {
301            if ( all_elms[i].attributes['tid'] ) {
302                var tid = getAttrValue ( all_elms[i], 'tid' );
303               
304                // 背景色の変更 未使用領域は変更しない
305                all_elms[i].style.background="#ffffdd";
306               
307                // target_id の書き換え
308                setAttrValue ( gDragged, 'target_id', tid );
309
310                //objCheckLine.style.top = parseInt(nowtop) + parseInt(gDragged.style.height) / 2 + 'px';
311                //objCheckLine.style.top = y;
312
313                // 配列の再作成
314                fnCreateArr(1, y, x);
315                // 配列の並び替え
316                fnChangeObj(tid);
317            }
318        }else{
319            if ( all_elms[i].attributes['tid'] && all_elms[i].style.background!="#ffffff") {
320                // 背景色の変更
321                all_elms[i].style.background="#ffffff";
322            }
323        }
324    }
325}
326
327// マウスアップイベント       
328function onMouseUp(evt) {
329    // イベントの関連付け解除
330    if (mouseFlg == true) {
331        removeEvent ( document, 'mousemove', onMouseMove, false );
332        removeEvent ( document, 'mouseup', onMouseUp, false );
333        mouseFlg = false;
334    }
335
336    if ( !isOnDropTarget (evt) ) {
337        // 元の位置に戻す
338        moveElm ( gDragged, gOrgX, gOrgY );
339        setAttrValue ( gDragged, 'target_id', gtarget_id );
340
341        // 配列の再作成
342        fnCreateArr(1, gOrgY, gOrgX);
343    }
344   
345    // hidden要素の書き換え
346    var did = getAttrValue( gDragged, 'did' );
347    var target_id = "target_id_"+did;
348    document.form1[target_id].value = getAttrValue( gDragged, 'target_id' );
349   
350    // 半透明、マウスポインタ、最前面処理を戻す
351    setOpacity( gDragged, 1);
352    setCursor ( gDragged, 'move' );
353    setZindex ( gDragged , 1);
354   
355    // 並び替え
356    fnSortObj();
357   
358    // 背景色を戻す
359    for ( var i = 0; i < all_elms.length; i++ ) {
360        // drop-target上にきた場合にのみ処理を行う
361        if ( isEventOnElm ( evt, all_elms[i].id ) && all_elms[i].attributes['tid']) {
362            // 背景色の変更
363            all_elms[i].style.background="#ffffff";
364        }
365    }
366}
367
368// DropTarget上にオブジェクトが来たかを判断する
369function isOnDropTarget ( evt ) {
370   
371    for ( var i=0; i<all_elms.length; i++ ) {
372        if ( isEventOnElm ( evt, all_elms[i].id ) ) {
373            if ( all_elms[i].attributes['tid'] ) {
374                return true;
375            }
376        }
377    }
378    return false;
379}
380function isEventOnElm (evt, drop_target_id) {
381
382    if (drop_target_id == '') {
383        return '';
384    }
385
386    var evtX = getEventX(evt) + getPageScrollX();
387    var evtY = getEventY(evt) + getPageScrollY();
388   
389    var drop_target = $("#" + drop_target_id );
390
391    var offset = drop_target.offset();
392    var x = offset.left;
393    var y = offset.top;
394
395    var width = drop_target.width();
396    var height = drop_target.height();
397   
398//  alert(evtX +" / "+ x +" / "+ evtY +" / "+ y +" / "+ width +" / "+ height);
399
400    return evtX > x && evtY > y && evtX < x + width && evtY < y + height;
401}
402
403// オブジェクトの並び替えを行う
404function fnSortObj(){
405    fnSetTargetHeight();
406    for ( var cnt = 0; cnt < all_elms.length; cnt++ ) {
407
408        // classが drop-target の場合のみ処理を行う
409        if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop-target' ) {
410            var tid = getAttrValue ( all_elms[cnt], 'tid' );
411           
412            // 配列の並び替え
413            fnChangeObj(tid);
414           
415            // 配置
416            fnSetObj( tid, cnt );
417        }
418    }
419}
420
421function alerttest(msg, x, y){
422    alert(msg);
423}
424
425// 配列の作成
426function fnCreateArr( addEvt , top , left ){
427
428    var arrObjtmp = new Object();
429    arrObjtmp['LeftNavi'] = Array();
430    arrObjtmp['RightNavi'] = Array();
431    arrObjtmp['MainHead'] = Array();
432    arrObjtmp['MainFoot'] = Array();
433    arrObjtmp['Unused'] = Array();
434
435    for ( var i = 1; i < all_elms.length; i++ ) {
436        // classが dragged-elm の場合のみ処理を行う
437        if ( getAttrValue ( all_elms[i], 'class' ) == "dragged-elm" ) {
438       
439            // マウスダウンイベントと関連付けを行う
440            if (addEvt == 0) {
441                addEvent ( all_elms[i], 'mousedown', onMouseDown, false );
442            }
443
444            var target_id = getAttrValue ( all_elms[i], 'target_id' ); 
445            var len = arrObjtmp[target_id].length;
446            var did = getAttrValue ( all_elms[i], 'did' );
447           
448            arrObjtmp[target_id][len] = new SC_Size();
449            arrObjtmp[target_id][len].id = did;
450            arrObjtmp[target_id][len].obj = all_elms[i];
451            arrObjtmp[target_id][len].width = getWidth( all_elms[i] );
452            arrObjtmp[target_id][len].height = getHeight( all_elms[i] );
453
454            // ドラッグ中のオブジェクトが存在すれば、そのオブジェクトだけマウスポインタの座標を指定する。
455            if (gDragged != "") {
456                if (did != getAttrValue ( gDragged, 'did' )) {
457                    // top は常にオブジェクトの中心を取得するようにする
458                    arrObjtmp[target_id][len].top = (parseInt(getY( all_elms[i] )) + arrObjtmp[target_id][len].height / 2 );
459                    arrObjtmp[target_id][len].left = getX( all_elms[i] );
460                }else {
461                    arrObjtmp[target_id][len].top = top;
462                    arrObjtmp[target_id][len].left = left;
463                }
464            } else {
465                // top は常にオブジェクトの中心を取得するようにする
466                arrObjtmp[target_id][len].top = i;
467                arrObjtmp[target_id][len].left = getX( all_elms[i] );
468            }
469        }
470    }
471   
472    arrObj = arrObjtmp;
473}
474
475// 配列の並び替え (バブルソートで並び替えを行う)
476function fnChangeObj( tid ){
477    for ( var i = 0; i < arrObj[tid].length-1; i++ ) {
478        for ( var j = arrObj[tid].length-1; j > i; j-- ) {
479            if ( arrObj[tid][j].top < arrObj[tid][i].top ) {
480                var arrTemp = new Array();
481                arrTemp = arrObj[tid][j];
482                arrObj[tid][j] = arrObj[tid][i];
483                arrObj[tid][i] = arrTemp;
484            }
485        }
486    }
487}
488
489// 配置
490function fnSetObj( tid, cnt ){
491    var target_height = 0;
492   
493    drp_left = getX(all_elms[cnt]); //all_elms[cnt].offsetLeft;
494    drp_top = getY(all_elms[cnt]); //all_elms[cnt].offsetTop;
495
496    for ( var j = 0; j < arrObj[tid].length; j++ ) {
497        // 配置する座標の取得
498        var left = parseInt(drp_left) + parseInt(all_elms[cnt].style.width) / 2 - parseInt(arrObj[tid][j].width) / 2;
499        if (j == 0){
500            var top = drp_top + arrObj[tid][j].margin;
501        }else{
502            var top = arrObj[tid][j-1].top + arrObj[tid][j].margin + arrObj[tid][j-1].height
503        }
504
505        // 座標を保持
506        arrObj[tid][j].top = top;
507        arrObj[tid][j].left = left;
508
509        // 配置を行う
510        moveElm ( arrObj[tid][j].obj, left ,top);
511
512        // 高さ計算
513        target_height = target_height + arrObj[tid][j].margin + arrObj[tid][j].height;
514
515        // hiddenの値を書き換え
516        var top_id = "top_" + arrObj[tid][j].id;
517        document.form1[top_id].value = top;
518
519    }
520}
521
522// ドロップターゲットの高さ調整
523function fnSetTargetHeight(){
524
525    var NaviHeight = defNavi;
526    var MainHeadHeight = defMainNavi;
527    var MainFootHeight = defMainNavi;
528    var UnusedHeight = defUnused;
529
530    // 高さ計算
531    $(".drop-target").each(function(){
532        var target_height = 0;
533        var tid = $(this).attr("tid");
534
535        for ( var j = 0; j < arrObj[tid].length; j++ ) {
536            target_height = target_height + arrObj[tid][j].margin + arrObj[tid][j].height;
537        }
538
539        // 下の幅
540        target_height = target_height + 20;
541
542        // 左右ナビ、未使用領域の高さを保持
543        if (tid == 'LeftNavi' || tid == 'RightNavi' || tid == 'Unused') {
544            if (NaviHeight < target_height) {
545                NaviHeight = target_height;
546            }
547        }
548
549        // メイン上部領域の高さを保持
550        if (tid == 'MainHead') {
551            if (target_height > defMainNavi) {
552                MainHeadHeight = target_height;
553            }
554        }
555
556        // メイン下部領域の高さを保持
557        if (tid == 'MainFoot') {
558            if (target_height > defMainNavi) {
559                MainFootHeight = target_height;
560            }
561        }
562    });
563
564    // メイン領域の高さを保持
565//  alert(NaviHeight+"/"+MainHeadHeight+"/"+MainFootHeight);
566    MainHeight = NaviHeight - ( MainHeadHeight + MainFootHeight );
567    if (MainHeight < defMain) {
568        MainHeight = defMain;
569    }
570
571    // メイン部分のほうが大きい場合には左右ナビも大きくする
572    if (NaviHeight < MainHeadHeight + MainFootHeight + MainHeight) {
573        NaviHeight = MainHeadHeight + MainFootHeight + MainHeight; 
574    }
575    // 変更
576    $(".drop-target").each(function(){
577        var tid = $(this).attr("tid");
578
579        // tidによって処理を分ける
580        if (tid == 'LeftNavi' || tid == 'RightNavi') {
581            $(this).height(NaviHeight);
582        }else if (tid == 'MainHead' ) {
583            $(this).height(MainHeadHeight);
584        }else if (tid == 'MainFoot') {
585            $(this).height(MainFootHeight);
586        }else if (tid == 'Unused'){
587            $(this).height(NaviHeight+100);
588        }
589    });
590   
591    // メインテーブルの高さも変更
592    $("#layout-main").height(MainHeight-2);
593}
594
595//ウインドウサイズ取得
596function GetWindowSize(type){
597    var ua = navigator.userAgent;                                               // ユーザーエージェント
598    var nWidth, nHeight;                                                        // サイズ
599    var nHit = ua.indexOf("MSIE");                                              // 合致した部分の先頭文字の添え字
600    var bIE = (nHit >=  0);                                                     // IE かどうか
601    var bVer6 = (bIE && ua.substr(nHit+5, 1) == "6");                           // バージョンが 6 かどうか
602    var bStd = (document.compatMode && document.compatMode=="CSS1Compat");      // 標準モードかどうか
603
604    switch(type){
605        case "width":
606            if(bIE){
607                if (bVer6 && bStd) {
608                    return document.documentElement.clientWidth;
609                } else {
610                    return document.body.clientWidth;
611                }
612            }else if(document.layers){
613                return(innerWidth);
614            }else{
615                return(-1);
616            }
617        break;
618        case "height":
619            if(bIE){
620                if (bVer6 && bStd) {
621                    return document.documentElement.clientHeight;
622                } else {
623                    return document.body.clientHeight;
624                }
625                return(document.body.clientHeight);
626            }else if(document.layers){
627                return(innerHeight);
628            }else{
629                return(-1);
630            }
631        break;
632        default:
633            return(-1);
634        break;
635    }
636}
637
638// ウィンドウサイズが変更になったときは全てのオブジェクトも移動する
639function fnMoveObject() {
640
641    // ウィンドウの幅変更比率を取得
642    var moveX = GetWindowSize("width") - scrX;
643    var BlankX = ( GetWindowSize("width") - 878 ) / 2
644
645    $(".drop-target").each(function(){
646        if ($(this).css("left") == "") {
647            var tid = $(this).attr('tid');
648
649            if (tid == 'LeftNavi') {
650                LeftMargin = marginLeftNavi;
651            }else if (tid == 'RightNavi') {
652                LeftMargin = marginRightNavi;
653            }else if (tid == 'MainHead' || tid == 'MainFoot') {
654                LeftMargin = marginMain;
655            }else{
656                LeftMargin = marginUnused;
657            }
658
659            if (BlankX > 0) {
660                $(this).css("left", BlankX + LeftMargin + 'px');
661            }else{
662                $(this).css("left", LeftMargin + 'px');
663            }
664        }
665    });
666   
667    scrX = GetWindowSize("width");
668    scrY = GetWindowSize("height");
669   
670    fnSortObj();
671}
672// 画面のロードイベントに関連付け
673addEvent ( window, 'load', init, false );
Note: See TracBrowser for help on using the repository browser.