/**
* The view of one resource category.
* @class ResourceCategoryView
*/
function ResourceCategoryView() {
xnode.Div.call(this);
this.title = new xnode.Div();
this.title.className = "title";
this.appendChild(this.title);
this.title.addEventListener("click", this.onTitleClick.bind(this));
var icon = new xnode.Div();
icon.className = "dropdown icon";
this.title.appendChild(icon);
this.titleSpan = new xnode.Span();
this.title.appendChild(this.titleSpan);
this.content = new xnode.Div();
this.content.className = "content";
this.appendChild(this.content);
this.descriptionP = new xnode.P();
this.content.appendChild(this.descriptionP);
this.itemTable = new xnode.Table();
this.itemTable.className = "ui table unstackable definition";
this.content.appendChild(this.itemTable);
this.itemTableBody = new xnode.Tbody();
this.itemTable.appendChild(this.itemTableBody);
this.accordion = new xnode.Div();
this.accordion.className = "ui styled fluid accordion";
this.content.appendChild(this.accordion);
}
/**
* The value view for a color. This should have a color picker!
* Candidates:
* - http://www.digitalmagicpro.com/jPicker/
* @class ResourceColorValueView
*/
function ResourceColorValueView() {
xnode.Div.call(this);
this.defaultValueView = new xnode.Div();
this.defaultValueView.style.position = "absolute";
this.defaultValueView.style.height = "25px";
this.defaultValueView.style.width = "70px";
this.defaultValueView.style.top = "12px";
this.defaultValueView.style.background = "#ff0000"
this.defaultValueView.style.borderRadius = "5px";
this.defaultValueView.style.padding = "3px";
this.defaultValueView.style.textAlign = "center";
this.defaultValueView.style.border = "1px solid #e0e0e0";
this.appendChild(this.defaultValueView);
this.valueInput = new xnode.Input();
this.valueInput.style.position = "absolute";
this.valueInput.style.left = "calc(50% - 10px)";
this.valueInput.style.height = "25px";
this.valueInput.style.width = "70px";
this.valueInput.style.top = "12px";
this.valueInput.style.background = "#ff0000"
this.valueInput.style.borderRadius = "5px";
this.valueInput.style.padding = "3px";
this.valueInput.style.textAlign = "center";
this.valueInput.style.border = "1px solid #e0e0e0";
this.valueInput.style.outline = 0;
this.valueInput.addEventListener("change", this.onValueInputChange.bind(this));
this.appendChild(this.valueInput);
}
/**
* The value view for a string.
* @class ResourceStringValueView
*/
function ResourceStringValueView() {
xnode.Div.call(this);
this.defaultValueView = new xnode.Div();
this.defaultValueView.style.position = "absolute";
this.defaultValueView.style.width = "50%";
this.defaultValueView.style.top = "15px";
this.appendChild(this.defaultValueView);
this.valueDiv = new xnode.Div();
this.valueDiv.style.position = "absolute";
this.valueDiv.style.right = "10px";
this.valueDiv.style.top = "10px";
this.valueDiv.style.width = "50%";
this.valueDiv.className = "ui input fluid mini";
this.appendChild(this.valueDiv);
this.valueInput = new xnode.Input();
this.valueInput.type = "text";
this.valueDiv.appendChild(this.valueInput);
this.valueInput.addEventListener("change", this.onValueInputChange.bind(this));
}
function App() {
xnode.Div.call(this);
this.style.position = "absolute";
this.style.left = "0";
this.style.top = "0";
this.style.right = "0";
this.style.bottom = "0";
var b = new xnode.Button("test");
b.style.position = "absolute";
b.style.left = "300px";
b.style.top = "10px";
this.appendChild(b);
b.on("click", this.onButtonClick.bind(this));
this.collection = new Collection();
this.collection.addItem("hello");
this.collection.addItem("world");
this.collectionView = new CollectionView();
this.collectionView.style.position = "absolute";
this.collectionView.style.left = "10px";
this.collectionView.style.top = "10px";
this.collectionView.style.width = "200px";
this.collectionView.style.bottom = "10px";
this.collectionView.style.border = "1px solid black";
this.collectionView.setDataSource(this.collection);
this.collectionView.setItemRendererClass(ItemRenderer);
this.collectionView.style.overflow = "scroll";
this.appendChild(this.collectionView);
console.log("creating app...");
}
function ItemRenderer() {
xnode.Div.call(this);
this.style.height = "20px";
this.style.background = "#ff0000";
//this.style.width = "50%";
this.innerHTML = "hello";
}
function FiddleClient(domContainer, session, basePath) {
xnode.Div.call(this);
this.fiddleClientModel = new FiddleClientModel();
this.fiddleClientModel.setSession(session);
this.fiddleClientView = new FiddleClientView();
this.appendChild(this.fiddleClientView);
domContainer.appendChild(this);
};
/**
* Main application view.
* @class AppView
*/
function AppView() {
xnode.Div.call(this);
this.style.position = "absolute";
this.style.top = 0;
this.style.left = 0;
this.style.right = 0;
this.style.bottom = 0;
this.resourcePaneView = new ResourcePaneView();
this.appendChild(this.resourcePaneView);
}
/**
* The left part of the app, showing the resources.
* @class ResourcePaneView
*/
function ResourcePaneView() {
xnode.Div.call(this);
this.style.position = "absolute";
this.style.top = "10px";
this.style.left = "10px";
this.style.width = "50%";
this.style.bottom = "10px";
this.tabHeaders = new xnode.Div();
this.tabHeaders.className = "ui top attached tabular menu";
this.appendChild(this.tabHeaders);
}
/**
* CollectionView.
* @class CollectionView
*/
function CollectionView() {
xnode.Div.call(this);
this.manager=new CollectionViewManager(this);
}
/**
* Removes itself on click outside.
* @class ContextDiv
*/
function ContextDiv() {
xnode.Div.call(this);
}