mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-05 18:20:36 -08:00
Attaching HTML files to CLOG
This commit is contained in:
David Botton
parent
30bbaa2807
commit
01d199abf1
7 changed files with 220 additions and 21 deletions
|
|
@ -46,7 +46,8 @@ script."
|
|||
(put-line function)
|
||||
(new-line function)
|
||||
(alert-box function)
|
||||
(generate-id function))
|
||||
(generate-id function)
|
||||
(debug-mode function))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -369,3 +370,10 @@ HTML <br />."
|
|||
"Create an alert box on CONNECTION-ID with MESSAGE"
|
||||
(execute connection-id (format nil "alert('~A');" (escape-string message))))
|
||||
|
||||
;;;;;;;;;;;;;;;;
|
||||
;; debug-mode ;;
|
||||
;;;;;;;;;;;;;;;;
|
||||
|
||||
(defun debug-mode (connection-id)
|
||||
"Turn on javascript debug mode in the boot.js file"
|
||||
(execute connection-id "clog_debug = true"))
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ the javascript clog[] but is not in the DOM. (private)"
|
|||
(let ((web-id (cc:generate-id)))
|
||||
(cc:execute
|
||||
connection-id
|
||||
(format nil "clog['~A']=$(\"~A\"); clog['~A'].first().prop('id','~A')"
|
||||
(format nil
|
||||
"clog['~A']=$(\"~A\").get(0); $(clog['~A']).first().prop('id','~A')"
|
||||
web-id html web-id web-id))
|
||||
(make-clog-element connection-id web-id :clog-type clog-type)))
|
||||
|
||||
|
|
@ -48,7 +49,8 @@ the javascript clog[] but is not in the DOM. (private)"
|
|||
(defun attach (connection-id html-id)
|
||||
"Create a new clog-obj and attach an existing element with HTML-ID on
|
||||
CONNECTION-ID to it and then return it. The HTML-ID must be unique. (private)"
|
||||
(cc:execute connection-id (format nil "clog['~A']=$('#~A')" html-id html-id))
|
||||
(cc:execute connection-id
|
||||
(format nil "clog['~A']=$('#~A').get(0)" html-id html-id))
|
||||
(make-clog-element connection-id html-id))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -64,7 +66,8 @@ CONNECTION-ID to it and then return it. The HTML-ID must be unique. (private)"
|
|||
as child of CLOG-OBJ and if :AUTO-PLACE (default t) place-inside-bottom-of
|
||||
CLOG-OBJ"))
|
||||
|
||||
(defmethod create-child ((obj clog-obj) html &key (auto-place t) (clog-type 'clog-element))
|
||||
(defmethod create-child ((obj clog-obj) html &key (auto-place t)
|
||||
(clog-type 'clog-element))
|
||||
(let ((child (create-with-html (connection-id obj) html :clog-type clog-type)))
|
||||
(if auto-place
|
||||
(place-inside-bottom-of obj child)
|
||||
|
|
@ -75,13 +78,13 @@ CLOG-OBJ"))
|
|||
;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric attach-as-child (clog-obj html-id &key clog-type)
|
||||
(:documentation "Create a new CLOG-Element or sub-type of CLOG-TYPE and attach
|
||||
an existing element with HTML-ID. The HTML-ID must be unique."))
|
||||
(:documentation "Create a new CLOG-Element or sub-type of CLOG-TYPE and
|
||||
attach an existing element with HTML-ID. The HTML-ID must be unique."))
|
||||
|
||||
(defmethod attach-as-child ((obj clog-obj) html-id
|
||||
&key (clog-type 'clog-element))
|
||||
(cc:execute (connection-id obj)
|
||||
(format nil "clog['~A']=$('#~A')" html-id html-id))
|
||||
(format nil "clog['~A']=$('#~A').get(0)" html-id html-id))
|
||||
(make-clog-element (connection-id obj) html-id :clog-type clog-type))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -102,7 +105,8 @@ an existing element with HTML-ID. The HTML-ID must be unique."))
|
|||
(:documentation "Set css style."))
|
||||
|
||||
(defmethod set-style ((obj clog-element) style-name value)
|
||||
(jquery-execute obj (format nil "css('~A','~A')" style-name (escape-string value))))
|
||||
(jquery-execute obj (format nil "css('~A','~A')"
|
||||
style-name (escape-string value))))
|
||||
(defsetf style set-style)
|
||||
|
||||
;;;;;;;;;;;;;;;
|
||||
|
|
@ -125,7 +129,8 @@ an existing element with HTML-ID. The HTML-ID must be unique."))
|
|||
(:documentation "Set html tag attribute."))
|
||||
|
||||
(defmethod set-attribute ((obj clog-element) attribute-name value)
|
||||
(jquery-execute obj (format nil "attr('~A','~A')" attribute-name (escape-string value))))
|
||||
(jquery-execute obj (format nil "attr('~A','~A')"
|
||||
attribute-name (escape-string value))))
|
||||
(defsetf attribute set-attribute)
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -823,11 +828,12 @@ resizeable sets if element can be resized by user."))
|
|||
;; positioning ;;
|
||||
;;;;;;;;;;;;;;;;;
|
||||
|
||||
(deftype positioning-type () '(member :static :relative :absolute :sticky :fixed))
|
||||
(deftype positioning-type ()
|
||||
'(member :static :relative :absolute :sticky :fixed))
|
||||
|
||||
(defgeneric positioning (clog-element)
|
||||
(:documentation "Get/Setf positioning. Determins how the properties left, right,
|
||||
top and bottom are interpreted.
|
||||
(:documentation "Get/Setf positioning. Determins how the properties left,
|
||||
right, top and bottom are interpreted.
|
||||
|
||||
Static - According to document flow, position properties have no
|
||||
affect.
|
||||
|
|
@ -1122,7 +1128,8 @@ parent in the DOM."))
|
|||
;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric outer-height (clog-element)
|
||||
(:documentation "Get outer-height. Includes padding and border but not margin."))
|
||||
(:documentation "Get outer-height. Includes padding and border but not
|
||||
margin."))
|
||||
|
||||
(defmethod outer-height ((obj clog-element))
|
||||
(jquery-query obj "outerHeight()"))
|
||||
|
|
@ -1142,7 +1149,8 @@ parent in the DOM."))
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric outer-height-to-margin (clog-element)
|
||||
(:documentation "Get outer-height-to-margin. Includes padding and border and margin."))
|
||||
(:documentation "Get outer-height-to-margin. Includes padding and border and
|
||||
margin."))
|
||||
|
||||
(defmethod outer-height-to-margin ((obj clog-element))
|
||||
(jquery-query obj "outerHeight(true)"))
|
||||
|
|
@ -1152,7 +1160,8 @@ parent in the DOM."))
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric outer-width-to-margin (clog-element)
|
||||
(:documentation "Get outer-width-to-margin. Includes padding and border and margin."))
|
||||
(:documentation "Get outer-width-to-margin. Includes padding and border and
|
||||
margin."))
|
||||
|
||||
(defmethod outer-width-to-margin ((obj clog-element))
|
||||
(jquery-query obj "outerWidth(true)"))
|
||||
|
|
@ -1333,7 +1342,8 @@ underneath its border box, padding box, or content box."))
|
|||
;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric background-size (clog-element)
|
||||
(:documentation "Get/Setf background-size. auto | w h | % = cover of parent | contain"))
|
||||
(:documentation "Get/Setf background-size.
|
||||
auto | w h | % = cover of parent | contain"))
|
||||
|
||||
(defmethod background-size ((obj clog-element))
|
||||
(style obj "background-size"))
|
||||
|
|
@ -1350,7 +1360,8 @@ underneath its border box, padding box, or content box."))
|
|||
;;;;;;;;;;;;
|
||||
|
||||
(deftype border-style-type ()
|
||||
'(member :none :hidden :dotted :dashed :solid :double :groove :ridge :inset :outset))
|
||||
'(member :none :hidden :dotted :dashed :solid
|
||||
:double :groove :ridge :inset :outset))
|
||||
|
||||
(defgeneric border (clog-element)
|
||||
(:documentation "Get border. <line-width> <line-style> <line-color>"))
|
||||
|
|
@ -1367,7 +1378,8 @@ underneath its border box, padding box, or content box."))
|
|||
line-width - size or medium|thin|thick|length|initial|inherit"))
|
||||
|
||||
(defmethod set-border ((obj clog-element) line-width line-style line-color)
|
||||
(setf (style obj "border") (format nil "~A ~A ~A" line-width line-style line-color)))
|
||||
(setf (style obj "border") (format nil "~A ~A ~A"
|
||||
line-width line-style line-color)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;
|
||||
;; border-radius ;;
|
||||
|
|
@ -1426,7 +1438,8 @@ line-width - size or medium|thin|thick|length|initial|inherit"))
|
|||
line-width - size or medium|thin|thick|length|initial|inherit"))
|
||||
|
||||
(defmethod set-outline ((obj clog-element) line-color line-style line-width)
|
||||
(setf (style obj "outline") (format nil "~A ~A ~A" line-color line-style line-width)))
|
||||
(setf (style obj "outline") (format nil "~A ~A ~A"
|
||||
line-color line-style line-width)))
|
||||
|
||||
;;;;;;;;;;;;
|
||||
;; margin ;;
|
||||
|
|
@ -1462,7 +1475,8 @@ line-width - size or medium|thin|thick|length|initial|inherit"))
|
|||
(:documentation "Set padding. Each can be - <length>|initial|inherit"))
|
||||
|
||||
(defmethod set-padding ((obj clog-element) top right bottom left)
|
||||
(setf (style obj "padding") (format nil "~A ~A ~A ~A" top right bottom left)))
|
||||
(setf (style obj "padding") (format nil "~A ~A ~A ~A"
|
||||
top right bottom left)))
|
||||
(defsetf padding set-padding)
|
||||
|
||||
;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -326,6 +326,32 @@ have this set true. Autofocus on element when form loaded. "))
|
|||
(setf (property obj "value") value))
|
||||
(defsetf value set-value)
|
||||
|
||||
;;;;;;;;;;;;;;;;;
|
||||
;; radio-value ;;
|
||||
;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric radio-value (clog-obj name)
|
||||
(:documentation "Returns the value of the selected radio button in a
|
||||
group called NAME."))
|
||||
|
||||
(defmethod radio-value ((obj clog-obj) name)
|
||||
(cc:query (connection-id obj)
|
||||
(format nil "$('input:radio[name=~A]:checked').val()"
|
||||
name)))
|
||||
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;
|
||||
;; name-value ;;
|
||||
;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric name-value (clog-obj name)
|
||||
(:documentation "Returns the value of input item called NAME."))
|
||||
|
||||
(defmethod name-value ((obj clog-obj) name)
|
||||
(cc:query (connection-id obj)
|
||||
(format nil "$('input[name=~A]').val()" name)))
|
||||
|
||||
;;;;;;;;;;;;;
|
||||
;; pattern ;;
|
||||
;;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ application."
|
|||
"CLOG-Element - Properties"
|
||||
(access-key generic-function)
|
||||
(advisory-title generic-function)
|
||||
(class-name generic-function)
|
||||
(css-class-name generic-function)
|
||||
(editablep generic-function)
|
||||
(draggablep generic-function)
|
||||
(visiblep generic-function)
|
||||
|
|
@ -322,6 +322,8 @@ application."
|
|||
(name generic-function)
|
||||
(default-value generic-function)
|
||||
(value generic-function)
|
||||
(radio-value generic-function)
|
||||
(name-value generic-function)
|
||||
(pattern generic-function)
|
||||
(minimum generic-function)
|
||||
(maximum generic-function)
|
||||
|
|
|
|||
76
static-files/tutorial/tut-11.html
Normal file
76
static-files/tutorial/tut-11.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!doctype HTML>
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<meta charset="utf-8">
|
||||
<meta namei="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- The CLOG boot file are jQuery are loaded at bottom of this HTML File. -->
|
||||
|
||||
<!-- Latest compiled and minified Bootstrap 3 CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
|
||||
</HEAD>
|
||||
<BODY>
|
||||
|
||||
<form id='form1' class="form-horizontal">
|
||||
<fieldset>
|
||||
|
||||
<!-- Form Name -->
|
||||
<legend>Form Name</legend>
|
||||
|
||||
<!-- Multiple Radios (inline) -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="radios">Inline Radios</label>
|
||||
<div class="col-md-4">
|
||||
<label class="radio-inline" for="radios-0">
|
||||
<input type="radio" name="radios" id="radios-0" value="1" checked="checked">
|
||||
1
|
||||
</label>
|
||||
<label class="radio-inline" for="radios-1">
|
||||
<input type="radio" name="radios" id="radios-1" value="2">
|
||||
2
|
||||
</label>
|
||||
<label class="radio-inline" for="radios-2">
|
||||
<input type="radio" name="radios" id="radios-2" value="3">
|
||||
3
|
||||
</label>
|
||||
<label class="radio-inline" for="radios-3">
|
||||
<input type="radio" name="radios" id="radios-3" value="4">
|
||||
4
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text input-->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="textinput">Text Input</label>
|
||||
<div class="col-md-4">
|
||||
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
|
||||
<span class="help-block">help</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button (Double) -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="button1id">Double Button</label>
|
||||
<div class="col-md-8">
|
||||
<button id="button1id" name="button1id" class="btn btn-success">Good Button</button>
|
||||
<button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- CLOG Boot file -->
|
||||
<script src="/js/boot.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
72
tutorial/11-tutorial.lisp
Normal file
72
tutorial/11-tutorial.lisp
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
;; Creating code GUIs from scratch is great, but in the real world often design
|
||||
;; is left to artists and code is left to engineers. CLOG is an amazign solution
|
||||
;; for that model of app development. Any existing web page can be come a CLOG
|
||||
;; app by simply adding the following two lines to an existing HTML file:
|
||||
;;
|
||||
;; <script src="/js/jquery.min.js" type="text/javascript"></script>
|
||||
;; <script src="/js/boot.js" type="text/javascript"></script>
|
||||
;;
|
||||
;; The first line adds jquery which CLOG uses to enhance browser compatability.
|
||||
;; The second line add the "boot" file.
|
||||
;;
|
||||
;; For this tutorial we generated the clog/static-files/tutorial/tut-11.html
|
||||
;; by using the form generator at https://bootsnipp.com/forms?version=3
|
||||
;; then used the the template from https://getbootstrap.com/docs/3.3/
|
||||
;; and added CLOG's boot.js script line. It was neccesary to add an id to the
|
||||
;; form (id='form1') as the generator did not add one.
|
||||
;;
|
||||
;; - We tell clog to use the boot file "/tutorial/tut-11.html"
|
||||
;; - We set a blank on-submit to overide the behavior in the bootstrap
|
||||
;; buttons to submit the from HTML style.
|
||||
;; - We are going to attach to the "Good Button" an on-click handler
|
||||
;; to handle getting the values
|
||||
;; - We attach to each control in the on-click handler that we want
|
||||
;; value for and query them
|
||||
;; - We attach an on-click handler that resets the form to the
|
||||
;; "Scary Button"
|
||||
|
||||
(defpackage #:clog-user
|
||||
(:use #:cl #:clog)
|
||||
(:export start-tutorial))
|
||||
|
||||
(in-package :clog-user)
|
||||
|
||||
(defun on-new-window (body)
|
||||
(clog-connection:debug-mode (clog::connection-id body))
|
||||
|
||||
(let* ((form (attach-as-child body "form1" :clog-type 'clog-form))
|
||||
(good-button (attach-as-child body "button1id"))
|
||||
(scary-button (attach-as-child body "button2id")))
|
||||
|
||||
(defun on-click-good (obj)
|
||||
(let ((alert-div (create-div body)))
|
||||
|
||||
(place-before form alert-div)
|
||||
(setf (hiddenp form) t)
|
||||
|
||||
; Bootstrap specific markup
|
||||
(setf (css-class-name alert-div) "alert alert-success")
|
||||
(setf (attribute alert-div "role") "alert")
|
||||
|
||||
(setf (inner-html alert-div)
|
||||
(format nil "<pre>radios value : ~A</pre><br>
|
||||
<pre>textinput value : ~A</pre><br>"
|
||||
(radio-value form "radios")
|
||||
(name-value form "textinput")))))
|
||||
|
||||
(defun on-click-scary (obj)
|
||||
(reset form))
|
||||
|
||||
;; We need to overide the boostrap default to submit the form html style
|
||||
(set-on-submit form (lambda (obj)()))
|
||||
|
||||
(set-on-click good-button #'on-click-good)
|
||||
(set-on-click scary-button #'on-click-scary)
|
||||
|
||||
(run body)))
|
||||
|
||||
(defun start-tutorial ()
|
||||
"Start turtorial."
|
||||
|
||||
(initialize #'on-new-window :boot-file "/tutorial/tut-11.html")
|
||||
(open-browser))
|
||||
|
|
@ -43,3 +43,4 @@ Tutorial Summary
|
|||
- 08-tutorial.lisp - Mice Love Containers
|
||||
- 09-tutorial.lisp - Tabs, pannels and forms
|
||||
- 10-tutorial.lisp - Canvas
|
||||
- 11-tutorial.lisp - Attaching to existing HTML
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue