diff --git a/js/Makefile b/js/Makefile index aae362f..78eae78 100644 --- a/js/Makefile +++ b/js/Makefile @@ -21,3 +21,24 @@ clean: veryclean: clean rm -rf node_modules/ + +SYNDICATE_WEB=$(CURDIR)/../../syndicate-web +deploy: all deploy-copy +deploy-copy: + (git diff --quiet && git diff --cached --quiet) || (echo "Commit changes first."; false) + + [ -d $(SYNDICATE_WEB) ] + [ -f $(SYNDICATE_WEB)/CNAME ] + [ -f $(SYNDICATE_WEB)/_config.yml ] + [ -f $(SYNDICATE_WEB)/index.md ] + + [ ! -d $(SYNDICATE_WEB)/examples ] || (cd $(SYNDICATE_WEB); git rm -rf examples) + [ ! -d $(SYNDICATE_WEB)/dist ] || (cd $(SYNDICATE_WEB); git rm -rf dist) + + git clone .. TEMP_CHECKOUT + cp -a TEMP_CHECKOUT/js/examples $(SYNDICATE_WEB)/examples + cp -a TEMP_CHECKOUT/js/dist $(SYNDICATE_WEB)/dist + rm -rf TEMP_CHECKOUT + + (cd $(SYNDICATE_WEB); git add examples) + (cd $(SYNDICATE_WEB); git add dist) diff --git a/js/examples/index.md b/js/examples/index.md new file mode 100644 index 0000000..19c1236 --- /dev/null +++ b/js/examples/index.md @@ -0,0 +1,63 @@ +--- +--- + +# Syndicate/js Examples + +## Clickable Button + +This is a simple clickable button; each time the button is clicked, +the number on the face of the button is incremented. + +The actor maintaining the counter also maintains the button's label +and listens to click events. It uses the Syndicate/js DOM driver to +publish the button's label text based on its internal state, and the +Syndicate/js jQuery driver to subscribe to button click events. + + - [DEMO](button/) + - [Source code](button/index.js) using the Syndicate/js DSL + +## jQuery Example + +This example is similar to the button example, but uses plain +JavaScript instead of the Syndicate/js DSL, calling out to Syndicate +as a library. It uses the Syndicate/js jQuery driver to receive click +events from the button, but does not use the Syndicate/js DOM driver; +instead, it updates the DOM directly. + + - [DEMO](jquery/) + - [Source code](jquery/index.js) in plain JavaScript + +## Text Entry Widget + +This is a simple text entry GUI control, following a design of +[Hesam Samimi](http://www.hesam.us/cs/cooplangs/textfield.pdf). + +Samimi's design proceeds in two stages. In the first, it calls for two +components: one representing the *model* of a text field, including +its contents and cursor position, and one acting as the *view*, +responsible for drawing the widget and interpreting keystrokes. In the +second stage, a *search* component is added, responsible for searching +the current content of the model for a pattern and collaborating with +the view to highlight the results. + +This Syndicate solution naturally has an actor for each of the three +components. The model actor maintains the current contents and cursor +position as assertions in the shared dataspace. The view actor +observes these assertions and, when they change, updates the display. +It also subscribes to keystroke events and translates them into +messages understandable to the model actor. The addition of the search +actor necessitates no changes to the model actor. The search actor +observes the assertion of the current content of the field in the same +way the view actor does. If it finds a matching substring, it asserts +this fact. The view actor must observe these assertions and highlight +any corresponding portion of text. + +There are two implementations, one using Syndicate events and actions +directly, and one using the high-level Syndicate DSL. + + - High-level DSL implementation + - [DEMO](textfield-dsl/) + - [Source code](textfield-dsl/index.js) using the Syndicate/js DSL + - Low-level implementation + - [DEMO](textfield/) + - [Source code](textfield/index.js) in plain JavaScript