Skip to content

Instantly share code, notes, and snippets.

@sapslaj
Created May 3, 2015 04:46
Show Gist options
  • Select an option

  • Save sapslaj/acb4121fc52de2ff35cf to your computer and use it in GitHub Desktop.

Select an option

Save sapslaj/acb4121fc52de2ff35cf to your computer and use it in GitHub Desktop.
Qt-like GUI in the browser (CuddleJS)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="todo_styles.css">
</head>
<body>
<div id="appcontainer"></div>
<script src="cuddle.js"></script>
<script src="todo_item.js"></script>
<script src="todo_list.js"></script>
<script>
var app = new CuddleApplication(new TodoList);
app.setContainer("#appcontainer");
app.run();
</script>
</body>
</html>
class TodoItem extends CWidget
constructor: (todoText) ->
@text = todoText || "Default Text"
@checkBox = new CCheckBox()
@label = new CLabel()
@label.setText(@text)
layout = new CHboxLayout()
layout.addWidget(@checkBox)
layout.addWidget(@label)
@checkbox.event("checked", @checked)
@checkbox.event("unchecked", @unchecked)
setText: (newText) ->
@text = newText
@label.setText(@text)
check: (e) ->
@label.addClass("checked")
uncheck: (e) ->
@label.removeClass("checked")
class TodoList extends CWidget
constructor: () ->
@lineEdit = new CLineEdit()
@button = new CPushButton("Add to List")
submissionLayout = new CHboxLayout()
@mainLayout = new CVBoxLayout()
submissionLayout.addWidget(@lineEdit)
submissionLayout.addWidget(@button)
@mainLayout.addLayout(submissionLayout)
setCentralLayout(@mainLayout)
@button.event("click", @buttonClickEvent)
buttonClickEvent: (event) ->
todoText = @lineEdit.text
@mainLayout.addWidget(new TodoItem(todoText))
.unchecked {
font-style: normal;
}
.checked {
font-style: italic;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment