EFOLAB_simple

既存のコンテンツコンテナを最大限利用するパターン

/**
 * このプログラムは、既存コンテンツをそのままでレスポンシブルのレイアウトに変更するものです。
 * 従来のver3.6とは目的が違います．
 */
( function() {"use strict";
        var TESTFLAG = true;
        //var EVENT_NAME = 'touchstart';
        var EVENT_NAME = 'click';

        var Main, Container, Page, MenuAssy, InquiryAssy, GrobalNavAssy, Css;

        Css = function() {
            this.PAGE_CSS_JSON = {
                "/" : "top.css",
                "/index.html" : "top.css",
                "/guide/service.html" : "guide_service.css"
            };
            this.CLASS_NAME = "EFOLAB_class";
            this.containerCss = null;
            this.pageCss = null;
            this.initilize();
        };
        Css.prototype = {
            initilize : function() {
                this.containerCss = document.createElement('link');
                this.containerCss.rel = "stylesheet";
                this.containerCss.className = this.CLASS_NAME;
                document.head.appendChild(this.containerCss);

                this.pageCss = document.createElement('link');
                this.pageCss.rel = "stylesheet";
                this.pageCss.className = this.CLASS_NAME;
                document.head.appendChild(this.pageCss);
                
                this.removeDefaultCssDisable();

            },
            setNewContainerCss : function() {
                this.containerCss.href = "EFOLAB_simple/newContainer.css";
            },
            setPageCss : function(pagePath) {
                this.pageCss.href = "EFOLAB_simple/" + this.PAGE_CSS_JSON[pagePath];
            },
            removeDefaultCssDisable : function() {
                var head = document.head;
                var sheets = document.getElementsByTagName('link');
                for (var i = 0; i < sheets.length; i++) {
                    var sheet = sheets[i];
                    if (sheet.rel === "stylesheet") {
                        /**
                         * スマホ用のCSSファイルかどうかを判別します。
                         */
                        if (sheet.className !== this.CLASS_NAME) {
                            console.log(sheet);
                            sheet.setAttribute('disabled', true);
                            /**
                             * removeしないと、android-firefoxで既存cssが無効にりません。
                             */
                            head.removeChild(sheet);
                        }
                    }
                }
            },
        };
        Page = function(container) {
            this.container = container;
            this.css = new Css();
            this.path = document.location.href.split(document.domain)[1];

            this.start();
        };
        Page.prototype = {

            start : function() {
                /**
                 * CSSをセットします。
                 */
                this.css.setNewContainerCss();
                this.css.setPageCss(this.path);

                var self = this;
                if (document.body) {
                    this.pageSetting();
                } else {
                    document.addEventListener('DOMContentLoaded', function(event) {
                        self.pageSetting.call(self);
                    }, false);
                }
                //window.addEventListener('DOMContentLoaded', function(event){self.setHeightToContainers.call(self);}, false);
            },
            pageSetting : function() {
                // this.appendContentsToContainer();
                // this.appendContainerToBody();
                this.containerSetting();
                this.setEventListenerToSlide();
            },
            containerSetting:function(){
                this.container.topContainer = document.getElementById('top-head');
                this.container.contentsContainer = document.getElementById('wrap');
                this.container.mainContainer =document.getElementById('cont');
                this.container.subContainer = document.getElementById('subcol');
                
                this.container.topContainer.appendChild(this.container.menuAssy);
                this.container.mainContainer.insertBefore(document.getElementById('main-visual2'),this.container.mainContainer.firstChild);
                this.container.mainContainer.appendChild(document.getElementById('footer'));
                
                document.body.appendChild(this.container.subContainer);
            },
            appendContainerToBody : function() {
                var body = document.body;
                body.innerHTML = "";
                body.insertBefore(this.container.getouterContainer(), body.firstChild);

            },
            appendContentsToContainer : function() {
                this.container.topContainer.appendChild(document.getElementById('main-visual'));
                this.container.subContainer.appendChild(document.getElementById('subcol'));
                this.container.articleContainer.appendChild(document.getElementById('main-visual2'));
                this.container.articleContainer.appendChild(document.getElementById('maincol'));
                // this.container.asideContainer.appendChild(document.getElementsByTagName('aside')[0]);
                this.container.footerContainer.appendChild(document.getElementById('footer'));

            },
            setHeightToContainers : function() {
                /*
                * 動的な高さが取れない。既存のスタイル設定の影響か？--違う。
                * 実行するタイミングが悪かった。コンテンツの配置がすべて完了してから実行するよう変更しました。
                * つまり、window.onloadイベント発火時にメソッド実行します。
                * しかし、まだ、android-firefoz,PC-operaなどで、コンテンツの高さより、若干小さくコンテンツ設定してしまっております。修正必要。
                */

                //メインコンテンツ要素の高さの合計をセット
                var mainClientHeight = 0;
                var subClientHeight = 0;
                var MARGIN = 0;
                mainClientHeight = this.container.mainContainer.clientHeight;
                subClientHeight = this.container.subContainer.clientHeight;
                var contents_height = mainClientHeight > subClientHeight ? mainClientHeight : subClientHeight;
                this.container.mainContainer.setAttribute('style', 'height:' + (contents_height + MARGIN) + 'px;');
                this.container.contentsContainer.setAttribute('style', 'height:' + (contents_height + MARGIN) + 'px;');
                this.container.outerContainer.setAttribute('style', 'height:' + (contents_height + MARGIN ) + 'px;');
            },
            setEventListenerToSlide : function() {
                console.log("setEvetn");
                //menuアンカーにイベントをセット
                //クリックイベントだと、android標準ブラウザのイベント取得が一度目では発火しません。
                this.container.menuAssy.addEventListener(EVENT_NAME, this, false);
                //XXX:フリックイベントに対応する場合はここにイベントを追記します。
                /*
                 this.container.mainContainer.addEventListener('touchstart', this, false);
                 this.container.mainContainer.addEventListener('touchmove', this, false);
                 this.container.mainContainer.addEventListener('touchend', this, false);
                 this.container.mainContainer.addEventListener('click', this, false);
                 */
            },
            moveSlideMenu : function() {
                
                //スタイルシート（newContainer)にsubContainer.style.visibility:hiddenを設定しておきます。
                var target = this.container.mainContainer;
                var callback = function(event) {
                    console.log(event);
                };

                // XXX:検査する順序は以下の通りにしておく必要があります。逆にすると初回アクセス時に動作しません。
                //!初回アクセス時にはスタイルleftの値は""が戻る.理由は不明。
                if (target.style.left === '50%') {
                    target.setAttribute('style', 'left:0px;');
                } else {
                    target.setAttribute('style', 'left:50%;');
                }
            },
            handleEvent : function(event) {
                console.log(event);
                console.log(this.container);
                if (event.target === this.container.menuAssy || event.target === this.container.menuAnchor) {
                    if (event.type === EVENT_NAME) {
                        console.log('slide');
                        event.preventDefault();
                        this.moveSlideMenu();
                    }
                }
            }
        };
        MenuAssy = function() {
            this.menuAssy = null;
            this.menuAnchor = null;
            this.initilize();
        };
        MenuAssy.prototype = {
            initilize : function() {
                this.menuAssy = document.createElement('div');
                this.menuAnchor = document.createElement('a');
                this.menuAssy.id = "menuAssy";

                this.menuAnchor.innerHTML = "MENU";

                var span = document.createElement('span');
                span.innerHTML = "&equiv;";

                //append
                this.menuAnchor.appendChild(span);
                this.menuAssy.appendChild(this.menuAnchor);
            },
            getMenuAssy : function() {

                return this.menuAssy;
            },
            getMenuAnchor : function() {
                return this.menuAnchor;
            }
        };
        InquiryAssy = function() {

        };
        GrobalNavAssy = function() {

        };

        Container = function() {
            console.log('Contaienr');
            this.topContainer = null;
            this.contentsContainer = null;
            this.mainContainer = null;
            this.subContainer = null;

            this.menuAssy = null;
            this.menuAnchor = null;
            
            this.initialize();
        };
        Container.prototype = {
            initialize : function() {

                var menuAssy = new MenuAssy();
                this.menuAssy = menuAssy.getMenuAssy();
                this.menuAnchor = menuAssy.getMenuAnchor();
            },

        };
        
        Main = function() {
            console.log('Main');
            this.container = {};

            this.initilize();

        };
        Main.prototype = {
            initilize : function() {
                this.container = new Container();
                new Page(this.container);
            }
        };
        new Main();

    }());