Cloaked overlays

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div id="interactive-box" data-bind="css: { cloaked: $root.childrenCloaked }">
    <div class="child green cloakable">Green</div>
    <div class="child blue cloakable">Blue</div>
    <div class="child red cloakable">Red</div>
    <div class="child gray">Gray</div>
</div>
<div id="switch" data-bind="click: toggleCloak">
    Switch
</div>
<div id="messages">
    
</div>

CSS

#interactive-box {
    background-color: Black;
}

#interactive-box.cloaked .child.cloakable {
    opacity: 0;
    filter: alpha(opacity=0%);
    pointer-events: none;
}

.child {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.green {
    color: Green;
}

.blue {
    color: Blue;
}

.red {
    color: Red;
}

.gray {
    color: Gray;
    
}

#switch {
    cursor: pointer;
}

JavaScript

var Viewmodel = function () {
    var self = this;
    
    this.childrenCloaked = ko.observable(false);
    this.toggleCloak = function () {
        self.childrenCloaked(!self.childrenCloaked());
    };
};

var main = function () {
    var viewmodel = new Viewmodel();
    ko.applyBindings(viewmodel);
    
    $(".child").click(function (evt) {
        $("#messages").append(evt.target.cloneNode(true));
    });
};

$(document).ready(main);