iframe-step-v4

iframe-step.js

/*global YUI, alert, document*/
YUI.add("iframe-step", function (Y) {

    var Lang = Y.Lang,
        MODULE_ID = "iframe-step",
        _log;

    _log = function (msg, type, module) {
        type = type || "info";
        module = module || MODULE_ID;
        Y.log(msg, type, module);
    };

    function IframeStep(config) {
        IframeStep.superclass.constructor.apply(this, arguments);
    }

    IframeStep.NAME = "iframestep";

    IframeStep.ATTRS = {
        activeItem : {
            value: null,
            readOnly: true
        },
        frames : {
            value: {},
            validator: Y.Lang.isObject
        },
        offset : {
            value: 0,
            validator: Y.Lang.isNumber
        }
    };

    IframeStep.HTML_PARSER = {

        frames: function (srcNode) {
            var frames = [];
            srcNode.all("li").each(function (el) {
                frames.push({
                    title       : el.one("a").getHTML(),
                    url         : el.one("a").get("href"),
                    rendered    : false
                });
            });
            return frames;
        }
    };

    IframeStep.MYNODE_TEMPLATE = "<div id={mynodeid}></div>";

    Y.extend(IframeStep, Y.Widget, {

        move: function (offset) {
            var that = this,
                frames,
                node,
                itemNode,
                rendered,
                url;

            offset = (Lang.isString(offset)) ? parseInt(offset, 10) : offset;
            if (Lang.isBoolean(offset)) {
                offset = (offset) ? that.get("offset") + 1 : that.get("offset") - 1;
                _log("offset is boolean. boolean = " + offset);
            } else if (Lang.isNumber(offset)) {
                _log("offset is number. offset = " + offset);
            }
            if (offset >= that.get("frames").length || 0 > offset) {
                alert("Steps is not exist!");
                return true;
            }
            _log("offset:" + offset);
            frames = that.get("frames")[offset];
            node = that.get("contentBox");
            itemNode = node.all("li").item(offset);
            rendered = frames.rendered;
            that.get("activeItem").replaceClass(that.getClassName("selected"), that.getClassName("disable"));
            _log("rendered : " + rendered);
            if (rendered) {
                itemNode.replaceClass(that.getClassName("disable"), that.getClassName("selected"));
            } else {
                url = frames.url;
                _log(url);
                itemNode.append('<iframe src="' + url + '"></iframe>');
                itemNode.addClass(that.getClassName("selected"));
                frames.rendered = true;
            }
            that._set("activeItem", itemNode);
            //step button
            if (offset === 0) {
                node.addClass("first");
            } else if (that.get("frames").length - 1 === offset) {
                node.replaceClass("first", "last").removeClass("interval");
            } else {
                node.removeClass("first").removeClass("last").addClass("interval");
            }
            that._set("offset", offset);
            this.fire("change", {offset: offset});
        },

        next: function () {
            _log("next");
            this.move(true);
        },

        prev: function () {
            _log("prev");
            this.move(false);
        },

        initializer: function () {
            _log("initializer");
        },

        destructor : function () {

        },

        renderUI : function () {
            _log("renderUI");
            var that = this,
                url,
                node,
                offset,
                itemNode,
                frames,
                i,
                steps;
            node = that.get("contentBox");
            offset = that.get("offset");
            if (offset >= that.get("frames").length || 0 > offset) {
                _log("Steps is not exist!Please reset offset.");
                return true;
            }
            frames = that.get("frames")[offset];
            url = frames.url;
            _log(url);
            itemNode = node.all("li").item(offset);
            itemNode.append('<iframe src="' + url + '"></iframe>');
            itemNode.addClass(that.getClassName("selected"));
            _log("activeItem:" + that.get("activeItem"));
            that._set("activeItem", itemNode);
            _log("rendered : " + that.get("frames")[offset].rendered);
            frames.rendered = true;
            node.append('<button>Prev</button><button>Next</button><button>End</button>');
            for (i = 0; 2 >= i; i++) {
                steps = ["prev-step", "next-step", "end-step"];
                node.all("button").item(i).addClass(that.getClassName(steps[i]));
            }
        },

        bindUI : function () {
            var that = this,
                node,
                nextNode,
                prevNode;
            node = that.get("contentBox");
            prevNode = node.one("." + that.getClassName("prev-step"));
            nextNode = node.one("." + that.getClassName("next-step"));
            prevNode.on("click", function (e) {
                that.prev();
            });
            nextNode.on("click", function (e) {
                that.next();
            });
        },

        syncUI : function () {
            //button UI
            _log("syncUI");
            var that = this,
                node,
                offset;
            node = that.get("contentBox");
            offset = that.get("offset");
            if (offset === 0) {
                node.addClass("first");
            } else if (that.get("frames").length - 1 === offset) {
                node.replaceClass("first", "last").removeClass("interval");
            } else {
                node.removeClass("first").removeClass("last").addClass("interval");
            }
        },

        _defAttrAVal : function () {

        },

        _setAttrA : function (attrVal, attrName) {

        },

        _getAttrA : function (attrVal, attrName) {

        },

        _validateAttrA : function (attrVal, attrName) {

        },

        _afterAttrAChange : function (e) {

        },

        _uiSetAttrA : function (val) {

        },

        _defMyEventFn : function (e) {

        }
    });

    Y.IframeStep = IframeStep;

}, "0.0.1", {requires: ["widget"]});

Oo_test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<script src="iframe-step.js"></script>
<script type="text/javascript">
YUI().use("iframe-step", function (Y) {

    var obj = new Y.IframeStep({
        offset: 0,
        srcNode: "#foo"
    });
    obj.render();

    Y.one("form").on("submit", function (e) {
        e.preventDefault();
        //obj.move();
        obj.move(Y.one("input[name=page]").get("value"));
    });
    obj.on("change", function (e) {
        Y.log("change event triggered!");
        Y.log(e);
    });
});

</script>
<style type="text/css">
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .yui3-iframestep li a {
        display: none;
    }
    .yui3-iframestep iframe {
        visibility: hidden;
    }
    .yui3-iframestep-selected iframe {
        visibility: visible;
    }
    .yui3-iframestep-disable iframe {
        position:absolute;
        top:-1000em;
        left:-1000em;
    }
    .first .yui3-iframestep-prev-step, .first .yui3-iframestep-end-step, .interval .yui3-iframestep-end-step {
        visibility: hidden;
    }
    .last .yui3-iframestep-next-step {
        visibility: hidden;
    }

</style>
</head>
<body>

    <div id="foo">
        <ul>
            <li class="yui3-iframestep-selected"><a href="a.html">page1</a></li>
            <li><a href="b.html">page2</a></li>
            <li><a href="c.html">step3</a></li>
            <li><a href="d.html">end</a></li>
        </ul>
    </div>

    <!--
    <div id="foo" class="yui3-widget yui3-iframestep yui3-iframestep-first">
        <div class="yui3-iframestep-content">
            <div class="yui3-iframestep-title">page1</div>
            <ul>
                <li class="yui3-iframestep-selected">
                    <iframe src="a.html"></iframe>
                </li>
                <li class="">
                    <iframe src="b.html"></iframe>
                </li>
            </ul>
            <div class="yui3-iframestep-buttons">
                <button class="yui3-iframestep-button-prev">Prev</button>
                <button class="yui3-iframestep-button-next">Next</button>
            </div>
        </div>
    </div>
-->


    <form>
        <input type="text" name="page" value="0">
    </form>

</body>
</html>