Home Explore Help
Sign In
pascal
/
pas2js
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

* Additional explanations

Michaël Van Canneyt 3 years ago
parent
4dc6f58766
commit
09237327b2
4 changed files with 192 additions and 126 deletions
Unified View Show Diff Stats
  1. 36 0
      demo/modules/simple/README.md
  2. 52 42
      demo/modules/simple/classes/index.html
  3. 52 42
      demo/modules/simple/classusingvar/index.html
  4. 52 42
      demo/modules/simple/htmlutils/index.html

+ 36 - 0
demo/modules/simple/README.md
View File 

@@ -0,0 +1,36 @@
 
+# Modules demo
 
+
 
+These demos demonstrate the use of modules. There are 3 demos which
 
+basically do the same thing, just using different techniques.
 
+
 
+Functionally the module offers 2 things:
 
+
 
+* a way to clear HTML below a certain tag (identified by it's ID): the **ClearPage** function.
 
+  the **DefaultClearID** variable is used to determine the HTML tag if no tag is specified in the **ClearPage** function.
 
+
 
+* a way to set the HTML page's title which is visible in the tab caption or browser window
 
+  title bar. This is done with the **SetPageTitle** function.
 
+
 
+## htmlutils
 
+
 
+In the *htmlutils* demo, the 2 functions and a variable are exported:
 
+* ClearPage
 
+* SetPageTitle
 
+* DefaultClearID
 
+
 
+## Classes
 
+
 
+In the *classes* demo, the 2 functions and a variable are made part of a class
 
+ **THTMLUtils** , and only a function to create an instance of this class is exported.
 
+
 
+Exported:
 
+* CreateUtils
 
+
 
+## ClassesUsingVar
 
+
 
+In the *classesusingvar* demo, the function to create an object is removed and
 
+replaced by a variable that contains an instance of the **THTMLUtils** class.
 
+This variable is then exported.
 
+
 
+Exported:
 
+* Utils

+ 52 - 42
demo/modules/simple/classes/index.html
View File 

@@ -9,52 +9,62 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
    <div class="box">
 
    <div class="box">
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <label class="label">Clear</label>
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-             <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
 
-           </div>
 
-           <div class="control">
 
-             <button id="btnClear" class="button is-info">Clear</button>
 
+     <div class="columns">
 
+       <div class="column is-8">
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <label class="label">Clear</label>
 
            </div>
 
            </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                 <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
 
+               </div>
 
+               <div class="control">
 
+                 <button id="btnClear" class="button is-info">Clear</button>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
 
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <label class="label">Title</label>
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-             <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <label class="label">Title</label>
 
            </div>
 
            </div>
 
-           <div class="control">
 
-             <button id="btnSetTitle" class="button is-info">Set title</button>
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                 <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
 
+               </div>
 
+               <div class="control">
 
+                 <button id="btnSetTitle" class="button is-info">Set title</button>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <!-- empty label needed -->
 
            </div>
 
            </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <!-- empty label needed -->
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-            <label class="checkbox">
 
-              <input id="cbUseDefaultClearID" type="checkbox" >
 
-              Use DefaultBelowID
 
-              </label>
 
-           </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                <label class="checkbox">
 
+                  <input id="cbUseDefaultClearID" type="checkbox" >
 
+                  Use DefaultBelowID
 
+                  </label>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
+       </div> <!-- .column -->
 
+       <div class="column is-4">
 
+         <div class="content">
 
+         <p>Enter the name of a tag ID (<code>content</code>, <code>content2</code>) to clear HTML below that ID. Specifying no ID will clear the whole page</p>
 
+         <p>Enter a title to set the title of this page. See the effect in the browser tab or window title bar.
 
+         </div> <!-- .content -->
 
+       </div> <!-- .column -->
 
+     </div> <!-- .columns -->
 
    </div> <!-- ?box -->
 
    </div> <!-- ?box -->
 
    <div id="all">
 
    <div id="all">
 
      <div class="section" id="content">
 
      <div class="section" id="content">

+ 52 - 42
demo/modules/simple/classusingvar/index.html
View File 

@@ -9,52 +9,62 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
    <div class="box">
 
    <div class="box">
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <label class="label">Clear</label>
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-             <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
 
-           </div>
 
-           <div class="control">
 
-             <button id="btnClear" class="button is-info">Clear</button>
 
+     <div class="columns">
 
+       <div class="column is-8">
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <label class="label">Clear</label>
 
            </div>
 
            </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                 <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
 
+               </div>
 
+               <div class="control">
 
+                 <button id="btnClear" class="button is-info">Clear</button>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
 
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <label class="label">Title</label>
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-             <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <label class="label">Title</label>
 
            </div>
 
            </div>
 
-           <div class="control">
 
-             <button id="btnSetTitle" class="button is-info">Set title</button>
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                 <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
 
+               </div>
 
+               <div class="control">
 
+                 <button id="btnSetTitle" class="button is-info">Set title</button>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <!-- empty label needed -->
 
            </div>
 
            </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <!-- empty label needed -->
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-            <label class="checkbox">
 
-              <input id="cbUseDefaultClearID" type="checkbox" >
 
-              Use DefaultBelowID
 
-              </label>
 
-           </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                <label class="checkbox">
 
+                  <input id="cbUseDefaultClearID" type="checkbox" >
 
+                  Use DefaultBelowID
 
+                  </label>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
+       </div> <!-- .column -->
 
+       <div class="column is-4">
 
+         <div class="content">
 
+         <p>Enter the name of a tag ID (<code>content</code>, <code>content2</code>) to clear HTML below that ID. Specifying no ID will clear the whole page</p>
 
+         <p>Enter a title to set the title of this page. See the effect in the browser tab or window title bar.
 
+         </div> <!-- .content -->
 
+       </div> <!-- .column -->
 
+     </div> <!-- .columns -->
 
    </div> <!-- ?box -->
 
    </div> <!-- ?box -->
 
    <div id="all">
 
    <div id="all">
 
      <div class="section" id="content">
 
      <div class="section" id="content">

+ 52 - 42
demo/modules/simple/htmlutils/index.html
View File 

@@ -9,52 +9,62 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
    <div class="box">
 
    <div class="box">
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <label class="label">Clear</label>
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-             <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
 
-           </div>
 
-           <div class="control">
 
-             <button id="btnClear" class="button is-info">Clear</button>
 
+     <div class="columns">
 
+       <div class="column is-8">
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <label class="label">Clear</label>
 
            </div>
 
            </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                 <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
 
+               </div>
 
+               <div class="control">
 
+                 <button id="btnClear" class="button is-info">Clear</button>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
 
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <label class="label">Title</label>
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-             <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <label class="label">Title</label>
 
            </div>
 
            </div>
 
-           <div class="control">
 
-             <button id="btnSetTitle" class="button is-info">Set title</button>
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                 <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
 
+               </div>
 
+               <div class="control">
 
+                 <button id="btnSetTitle" class="button is-info">Set title</button>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
+         <div class="field is-horizontal">
 
+           <div class="field-label is-normal">
 
+             <!-- empty label needed -->
 
            </div>
 
            </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
-     <div class="field is-horizontal">
 
-       <div class="field-label is-normal">
 
-         <!-- empty label needed -->
 
-       </div>
 
-       <div class="field-body">
 
-         <div class="field has-addons">
 
-           <div class="control">
 
-            <label class="checkbox">
 
-              <input id="cbUseDefaultClearID" type="checkbox" >
 
-              Use DefaultBelowID
 
-              </label>
 
-           </div>
 
-         </div> <!-- .field .has-addons -->
 
-       </div> <!-- .field-body -->
 
-     </div> <!-- .field .is-horizontal -->
 
+           <div class="field-body">
 
+             <div class="field has-addons">
 
+               <div class="control">
 
+                <label class="checkbox">
 
+                  <input id="cbUseDefaultClearID" type="checkbox" >
 
+                  Use DefaultBelowID
 
+                  </label>
 
+               </div>
 
+             </div> <!-- .field .has-addons -->
 
+           </div> <!-- .field-body -->
 
+         </div> <!-- .field .is-horizontal -->
 
+       </div> <!-- .column -->
 
+       <div class="column is-4">
 
+         <div class="content">
 
+         <p>Enter the name of a tag ID (<code>content</code>, <code>content2</code>) to clear HTML below that ID. Specifying no ID will clear the whole page</p>
 
+         <p>Enter a title to set the title of this page. See the effect in the browser tab or window title bar.
 
+         </div> <!-- .content -->
 
+       </div> <!-- .column -->
 
+     </div> <!-- .columns -->
 
    </div> <!-- ?box -->
 
    </div> <!-- ?box -->
 
    <div id="all">
 
    <div id="all">
 
      <div class="section" id="content">
 
      <div class="section" id="content">