|
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="KnockoutjsMetroTile._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
var colorCount = -1;
$(document).ready(function () {
BindViewModel();
});
function BindViewModel() {
var Tile = function (title, description, color) {
var self = this;
self.title = ko.observable(title);
self.description = ko.observable(description);
self.tileColor = ko.observable(color);
self.editPanel = ko.observable(false);
self.expandEdit = function () {
self.editPanel(true);
};
self.collapseEdit = function () {
self.editPanel(false);
};
};
var TileModel = function () {
var self = this;
self.lines = ko.observableArray([new Tile("Batman", "The Dark Night Rises", "#525252"), new Tile("Transformer", "Revenge of the Fallen", "#DA532C")]);
self.addTile = function () {
self.lines.push(new Tile("Title", "Description", RandomColor()))
};
self.removeTile = function (line) { self.lines.remove(line) };
};
ko.applyBindings(new TileModel());
}
function RandomColor() {
colorCount++;
if (colorCount == 0)
return "#00A300";
else if (colorCount == 1)
return "#603CBA";
else if (colorCount == 2)
return "#B91D47";
else if (colorCount == 3)
return "#FFC40D";
else if (colorCount == 4)
return "#2B5797";
else {
colorCount = -1;
return "#99B433"
}
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<a id="aCreate" class="btn-add-tile" data-bind='click: addTile'>Add Tile</a>
<div class="tile-container" data-bind='foreach: lines'>
<div class="tile-area">
<div class="tile-elem" data-bind="style: { background: tileColor }">
<p class="tile-description" data-bind="text: description">
</p>
</div>
<span class="tile-title" data-bind="text: title" style=""></span>
<div class="bottom-bar">
<span class="arrow" data-bind='click: expandEdit, ifnot:editPanel'>
<img src="Styles/images/MetroDown.png" alt="Open edit panel" /></span>
<span class="arrow" data-bind='click: collapseEdit, if:editPanel'>
<img src="Styles/images/MetroUp.png" alt="Close edit panel" /></span>
<span class="close-btn" data-bind='click: $parent.removeTile'>
<img src="Styles/images/MetroClose.png" alt="Remove tile" /></span>
</div>
<div data-bind="if: editPanel">
<div class="edit-panel">
<label>Title:</label>
<input class="text-title" data-bind="value: title, valueUpdate: 'afterkeydown'" maxlength="12" />
<label>Description:</label>
<textarea class="txtdesc" rows="2" data-bind="value: description, valueUpdate: 'afterkeydown'"></textarea>
</div>
</div>
</div>
</div>
</asp:Content>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.