Commit 096c9730 authored by Jake Read's avatar Jake Read

working example of tiny-ui-program-within-other-small-program

parent e9252031
......@@ -233,8 +233,8 @@ function heapSendsStateChange(data) {
}
function heapSendsUiChange(data){
if(true) console.log('HEAP SENDS CHANG UI IN MODULE', data)
//
if(true) console.log('HEAP SENDS MSG TO UI ELEMENT IN MDL', data)
program.modules[data.id].ui[data.key].lump.onMessage(data.msg)
}
/*
......@@ -254,7 +254,7 @@ function putState(rep, key) {
}
// save ui position to server for reload
function putUi(rep) {
function putPosition(rep) {
var data = {
description: {
id: rep.description.id,
......@@ -265,7 +265,7 @@ function putUi(rep) {
}
}
socketSend('put ui change', data)
socketSend('put position change', data)
}
// input / output click handling
......
......@@ -36,7 +36,7 @@ function addRepToView(rep) {
function rmOnMouseUp(evt) {
rep.description.position.left = parseInt(domElem.style.left, 10)
rep.description.position.top = parseInt(domElem.style.top, 10)
putUi(rep)
putPosition(rep)
document.removeEventListener('mousemove', domElemMouseMove)
document.removeEventListener('mouseup', rmOnMouseUp)
}
......@@ -120,7 +120,7 @@ function addRepToView(rep) {
wrapper.appendChild(rep.dom.domElem)
if (uiSetFlag) {
putUi(rep)
putPosition(rep)
}
}
......@@ -273,30 +273,17 @@ function writeUiElement(container, rep, key) {
}
ui.script.onload = function(msg){
console.log('script loaded')
// how many of these functions exist ?
console.log('UI script loaded')
// each ui script writes this function to
// window. (global scope) on load,
// so we can use it now to get hooks
registerNewModule(rep.description.id, key)
// that function will be used to append to
console.log('UI script hooked, having lump at', program.modules[rep.description.id].ui[key].lump)
container.appendChild(program.modules[rep.description.id].ui[key].lump.domElem)
}
// now we'll hook it up to the socket ?
/*
// give it access to the socket,
ui.thing.sendToHeap = function(msg) {
var data = {
id: rep.description.id,
key: key,
msg: msg
}
socketSend('put ui change', data)
}
container.appendChild(ui.thing.domElement)
rep.dom.ui[key] = ui.thing.domElement
*/
}
// bezier utilities
var svgns = 'http://www.w3.org/2000/svg'
......
(function(){
socketSend('console', 'loading new iife')
// client-side button object
var btn = {}
this.init = function(){
socketSend('console', 'hello from' + this.parentId + this.key)
// make the dom object
var li = document.createElement('li')
li.innerHTML = 'button test'
li.addEventListener('click', function(evt){
// example of how to send data back to server
var data = {
id: btn.parentId,
key: btn.key,
msg: 'onclick'
}
socketSend('put ui change', data)
})
// append it to the dom so that it can be appended on init
btn.domElem = li
btn.onMessage = function(msg){
console.log('got message in client side ui object', msg)
if(msg.call == 'setText'){
btn.domElem.innerHTML = msg.argument
}
}
// expect this to only be used once
// it's basically our init function
window.registerNewModule = function(id, key){
this.parentId = id
this.key = key
this.init()
btn.parentId = id
btn.key = key
// affectionately named lump of code, insert ourselves here
program.modules[id].ui[key].lump = btn
socketSend('console', 'hello from' + btn.parentId + btn.key)
}
})()
\ No newline at end of file
......@@ -51,8 +51,8 @@ function STest() {
ui.addElement('btnex', './ui/uiButton.js', onButtonData)
function onButtonData(evt){
console.log('button change evt', evt)
ui.btnex.isPressed = true
console.log('on module callback', evt)
ui.btnex.setText('hello from ss')
}
return stest
......
......@@ -4,14 +4,22 @@ function UI() {
ui.addElement = function(keyName, srcPath, callback){
var src = require(srcPath)
ui[keyName] = new src()
ui[keyName].keyName = keyName
ui[keyName].callback = callback
ui[keyName].sendToUi = function(msg){
var data = {
id: ui.parentId,
key: keyName,
msg: msg
}
ui.socket.send('put ui change', data)
}
}
ui.init = function(parentModId, socket){
// get hookups from top level program
this.parentId = parentModId
this.socket = socket
// and wrap state objects in getters / setters
for (key in this) {
if (isUiKey(key)) {
// see if they have init functions?
......@@ -37,4 +45,5 @@ module.exports = {
/* bless u mdn
https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
https://developers.google.com/web/fundamentals/primers/modules
*/
\ No newline at end of file
function UIButton() {
var uiButton = {
type: 'button',
clientPath: 'ui/uiButton.js',
isPressed: false
}
// server-side button object
var uiButton = {
type: 'button',
clientPath: 'ui/uiButton.js',
callback: null, // this is loaded into our scope on load
isPressed: false
}
return uiButton
uiButton.onMessage = function(msg) {
console.log('message into server side object', msg)
this.callback(msg)
}
uiButton.setText = function(text) {
// ex. of how to send data up to client
var msg = {
call: 'setText',
argument: text
}
this.sendToUi(msg)
}
return uiButton
}
module.exports = UIButton
\ No newline at end of file
module.exports = UIButton
\ No newline at end of file
......@@ -116,6 +116,9 @@ function socketRecv(evt) {
break
case 'put ui change':
uiRequestUiChange(data)
break
case 'put position change':
uiRequestMdlPositionChange(data)
break
default:
console.log('ERR server recv with non recognized type', recv)
......@@ -287,7 +290,13 @@ function uiRequestLinkChange(data) {
socketSend('put module change', nRep)
}
function uiRequestUiChange(data) {
function uiRequestUiChange(data){
console.log('UI PUSH UI DATA DOWN', data)
var mdlUiElem = program.modules[data.id].ui[data.key]
mdlUiElem.onMessage(data.msg)
}
function uiRequestMdlPositionChange(data) {
console.log('UI REQUEST ADD / CHANGE UI INFO TO MODULE', data)
var mod = program.modules[data.description.id]
mod.description.position = data.description.position
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment