cyberweb 0.7.9 → 0.8.17

data/doc/README.gen

@@ -1,5 +1,4 @@
-ADD_GOBOLINUX_AND_RUBY_HEADER
-ADD_TIME_STAMP
+DEFAULT_HEADER
 
 <img src="https://i.imgur.com/aC4YzSk.png" style="margin-left: 1.2em">
 
@@ -36,7 +35,7 @@ In PHP this is not easily possible, because the syntax is more rigid.
 Thus, at the least in regards to the syntax, ruby is better than 
 PHP - more flexibility syntax-wise is available to ruby users than
 is for PHP users. This flexibility helps a <b>lot</b> when writing
-more dynamic, and more succint, code.
+more dynamic, and more succinct, code.
 
 During that **transition phase**, from **php** to **ruby**, the cyberweb
 project was renamed several times as well - first to **web_foundation**,
@@ -883,6 +882,33 @@ useful for short header-entries, such as "Goals" or
 functionality purely exists due to convenience - I wanted
 to quickly generate the default id entry for a sitemap. 
 
+Note that at the least h2_id() has been improved a bit,
+directly and indirectly, in <b>January 2023</b>.
+
+Specifically the following is now valid:
+
+    h2_id('Stickstofffixierung - eine symbiotische Beziehung, als '\
+          'Teil des Stickstoffkreislaufs') { :clickable_image }
+
+So, what does this do?
+
+First, as normal, it will "autogenerate" the corresponding
+ID entry, via the newly created method .sanitize_this_id().
+I intend to re-use this method for all other parts of the
+cyberweb gem that require autogeneration of valid ID tags.
+
+But, even more importantly than that, the block and the
+Symbol called :clickable_image, will now add an image
+(a small dot) to the left side of this header. This image
+is clickable by the user. If the user clicks on that dot,
+he/she will be re-directed to that specific header as
+intralink. In other words: this functionality allows us
+to "tag" any paragraph as intralink, by clicking on it.
+
+I needed this functionality for many different local
+websites, so I thought it was more useful if it is made
+a proper method as-is.
+
 ## Redirecting to another page
 
 You can combine BeautifulUrl, and Cyberweb, to redirect
@@ -1896,18 +1922,6 @@ fine. If they want to contribute code, that's fine - and if they
 don't want to, that's fine as well, as far as the cyberweb
 project is concerned.
 
-## Simple JavaScript Calculator
-
-Use:
-
-    add_simple_javascript_calculator
-
-You may need to style the input-tag a bit.
-
-See the following file for a working example:
-
-    cyberweb/examples/advanced/simple_calculator.cgi
-
 ## Drag and drop support in general and drag-and-drop support via Dragula
 
 Via the new attribute **draggable="true"** it is possible to drag any
@@ -2671,20 +2685,6 @@ look at the **repackage gem** to find out how this is done.
 Documentation is missing in this regard, but will be added over
 the next weeks slowly.
 
-## JavaScript variables
-
-The variables in JavaScript are by default global. You can make
-them local if you attach the **var** keyword to them.
-
-You can also define several variables in one go, via:
-
-    var message = "hi",
-    found = false,
-    age = 29;
-
-The keyword **let** has the lowest scope, even less than when
-compared to **var**.
-
 ## Including CSS into a webpage
 
 If you want to include CSS into a webpage, use the following HTML tag:
@@ -3727,23 +3727,6 @@ image at hand if you want it to "lose" colours (for display
 purposes only; of course nothing is lost in the image as 
 such, only the display of said image is modified via CSS).
 
-## The progress bar in HTML5
-
-You can use a progressbar to indicate progress based on
-percentage values. This is described here in detail:
-
-https://css-tricks.com/html5-progress-element/
-
-In cyberweb you can use:
-
-    progress
-    progress('35 / 100') # 35%
-
-At a later time we may add some javascript to indicate
-a counter-progress. Right now (as of February 2022)
-this is not possible though, so this part has to come
-at a later time.
-
 ## Converting from a .html page to a cyberweb-object
 
 The file **bin/html_to_cyberweb_converter** can be used
@@ -3888,90 +3871,6 @@ of boilerplate code, which I think is useful in its own right.
 Future changes may even simplify this further, but for now 
 <b>let's keep it simple</b>.
 
-## Working with HTML forms, including creating input-buttons in such a form field
-
-    <form> 
-    <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
-    </form>
-
-    <form>
-    <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
-    </form>
-
-You can style &lsaquo;input> fields with a different background colour
-upon a mouse-focus event.
-
-Examples for this would be: 
-
-    input :text, 'Hello world!', :focus_with_salmon_background
-    input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
-
-View the file at **cyberweb/examples/simple/input_example_with_coloured_focus.cgi**
-to see this work in action.
-
-You can modify the &lsaquo;input> tag within that via css by using:
-
-    input.view_css {}
-
-Note that &lsaquo;input type="text"> only works for a single line of
-user input. If you would like to have the user work via multiple
-lines then you have to use the &lsaquo;textarea> tag instead.
-There may be work-arounds, such as giving the text-input the
-<b>word-break: break-word;</b> attribute, but this may not work
-on every browser.
-
-Some shortcuts exist within the Cyberweb project. For instance,
-rather than do:
-
-    input :checkbox
-
-You can do:
-
-    input_checkbox
-
-Same with submit and other variants:
-
-    input_submit
-    input_radio
-
-This may not be a huge improvement, but I wanted to offer
-it in the event that some users like to avoid using the
-<b>:</b> for the symbol.
-
-Combining a label and input-text is possible via Cyberweb
-too. Examples:
-
-    label_and_input_text :foobar
-    label_and_input_text id: :foobar
-    label_and_input_text id: :foobar, :br
-    label_and_input_text id: :foobar, :linebreak
-    label_and_input_text id: :foobar, :middle_break
-    label_and_input_text :fname, 'First name:'
-
-The last variant is essentially the same as this in HTML:
-
-    <label for="fname">First name:</label><br>
-    <input type="text" id="fname" name="fname"><br>
-
-If you have a need or use case to use a checked checkbox
-then you can use a variant such as this:
-
-    checked_checkbox name: 'valid_ninja'
-
-It may be important to specify the name parameter, as
-shown above; otherwise it can be omitted.
-
-This checked checkbox looks about like this:
-
-<img src="https://i.imgur.com/Fn0GasM.png" style="margin: 1em">
-
-## Use image-checkbox (on and off)
-
-Examples:
-
-    show_image_checkbox :on, 'posab','top:10em;right:18%'
-    show_image_checkbox :off, 'posab','top:10em;right:18%'
-
 ## The CSS class called select_everything
 
 This document already mentioned how to use JavaScript to select
@@ -4438,10 +4337,11 @@ the border via border-color then this will default to <b>black</b>.
 
 ## Cyberweb::HtmlTemplate
 
-class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
+class **Cyberweb::HtmlTemplate** can be used to describe (and ultimately
+generate) a .html file - that is, to fill this class with HTML
 specific content.
 
-Let's show a specific example how this may be used:
+Let's show a specific example how this may be used first:
 
     require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
 
@@ -4455,7 +4355,7 @@ Let's show a specific example how this may be used:
 This would represent a "full" HTML page, as a String.
 
 It is possible, since as of **18.06.2021**, to pass **CSS classes**
-into this, via:
+into this class, via the entry called <b>css_classes</b>:
 
     css_classes:
 
@@ -4463,19 +4363,19 @@ For example, passing 'darkblue' to that key means that the CSS
 class 'darkblue' will be made available, which ultimately comes
 down to <b>color: darkblue</b>.
 
-I needed this functionality to pull in only the CSS classes
-that I use on a particular page generated by class
-Cyberweb::HtmlTemplate.
+This functionality was necessary in order to pull in only the CSS
+classes that are used on a particular web-page generated or
+represented by class <b>Cyberweb::HtmlTemplate</b>.
 
-Various additional entries are available. For example, if
-you want to modify the css-style in use for the body tag
-then you can simply use the following variant:
+Various additional entries are available. For example, if you want
+to modify the css-style in use for the body tag then you can
+simply use the following variant:
 
     body_css_style: 'background-color:#DFD1FF'
 
-In the long run the goal here is to extend class HtmlTemplate
-in such a way that all html-generation used within the
-Cyberweb project can be handled by it.
+In the long run the goal here is to <b>extend</b> class
+HtmlTemplate in such a way that all html-generation used
+within the Cyberweb project can be handled by it.
 
 You can also pass ad-hoc CSS style into it. Example:
 
@@ -4678,6 +4578,29 @@ This would yield the following Array:
       "https://www.projectaon.org/en/xhtml/lw/02fotw/right.png"
     ]
 
+## Examples distributed in the cyberweb project
+
+This subsection has a few noteworthy points to make about
+examples distributed in the cyberweb project.
+
+You can find these examples under the directory called
+<b>examples/</b> - easy to remember.
+
+You can find plain HTML examples, and examples that
+use JavaScript and CSS. Additionally some examples
+stored as .cgi files are distributed as well, to 
+demonstrate how the cyberweb project works. I recommend
+that you have a look at the simple examples first,
+without .cgi, unless you already know HTML/CSS/JavaScript,
+and then transition into the .cgi files. That should make
+it a bit easier to understand what is going on. 
+
+You may find that these examples sort of follow a specific
+style, more or less. For instance, I tend to name all
+animations with a trailing <b>_animation</b> tag. That
+helps me identify which animations exist more easily
+so.
+
 ## JavaScript support in the cyberweb project
 
 ### JavaScript for-in and for-of loops:
@@ -4826,6 +4749,183 @@ Example:
 
     <script src="path/foobar.js" async></script>
 
+### JavaScript variables
+
+The variables in JavaScript are by default global. You can make
+them local if you attach the **var** keyword to them.
+
+You can also define several variables in one go, via:
+
+    var message = "hi",
+    found = false,
+    age = 29;
+
+The keyword **let** has the lowest scope, even less than when
+compared to **var**.
+
+### Simple JavaScript Calculator
+
+Use:
+
+    add_simple_javascript_calculator
+
+You may need to style the input-tag a bit.
+
+See the following file for a working example:
+
+    cyberweb/examples/advanced/simple_calculator.cgi
+
+## Showing a fancy CSS keyboard
+
+If you use Cyberweb::WebObject then a fancy CSS keyboard
+can be shown. The method to do this is called:
+
+    show_the_keyboard
+
+Right now this is not too terribly useful, but I can imagine
+that this could serve as the basis to add an ad-hoc keyboard
+to a website, such as for smartphone users.
+
+## The progress bar in HTML5
+
+You can use a <b>progressbar</b> to indicate progress based on
+percentage values. This is described here in more detail:
+
+https://css-tricks.com/html5-progress-element/
+
+In cyberweb you can use the following API to indicate this:
+
+    progress
+    progress('35 / 100') # this will display 35%
+
+At a later time some javascript code may be added to indicate
+a counter-progress. Right now (as of <b>February 2022</b>)
+this is not possible though, so this part has to come at
+a later time.
+
+The raw HTML code would look like this, for 35%:
+
+    <progress max="100" value="35"></progress>
+
+If you want to style the progressbar then you have to use
+CSS. This can then be done via the <b>progress[value]</b>
+selector. 
+
+Example for this:
+
+    progress[value] {
+      /* Reset the default appearance */
+      -webkit-appearance: none;
+      appearance: none;
+      width:  250px;
+      height:  20px;
+    }
+
+## Working with HTML forms, including creating input-buttons in such a form field
+
+    <form> 
+    <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
+    </form>
+
+    <form>
+    <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
+    </form>
+
+You can style &lsaquo;input> fields with a different background colour
+upon a mouse-focus event.
+
+Examples for this would be: 
+
+    input :text, 'Hello world!', :focus_with_salmon_background
+    input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
+
+View the file at **cyberweb/examples/simple/input_example_with_coloured_focus.cgi**
+to see this work in action.
+
+You can modify the &lsaquo;input> tag within that via css by using:
+
+    input.view_css {}
+
+Note that &lsaquo;input type="text"> only works for a single line of
+user input. If you would like to have the user work via multiple
+lines then you have to use the &lsaquo;textarea> tag instead.
+There may be work-arounds, such as giving the text-input the
+<b>word-break: break-word;</b> attribute, but this may not work
+on every browser.
+
+Some shortcuts exist within the Cyberweb project. For instance,
+rather than do:
+
+    input :checkbox
+
+You can do:
+
+    input_checkbox
+
+Same with submit and other variants:
+
+    input_submit
+    input_radio
+
+This may not be a huge improvement, but I wanted to offer it in
+the event that some users like to avoid using the <b>:</b> for
+the symbol.
+
+Combining a label and input-text is possible via Cyberweb
+too. Examples:
+
+    label_and_input_text :foobar
+    label_and_input_text id: :foobar
+    label_and_input_text id: :foobar, :br
+    label_and_input_text id: :foobar, :linebreak
+    label_and_input_text id: :foobar, :middle_break
+    label_and_input_text :fname, 'First name:'
+
+The last variant is essentially the same as this in HTML:
+
+    <label for="fname">First name:</label><br>
+    <input type="text" id="fname" name="fname"><br>
+
+If you have a need or use case to use a checked checkbox
+then you can use a variant such as this:
+
+    checked_checkbox name: 'valid_ninja'
+
+It may be important to specify the name parameter, as
+shown above; otherwise it can be omitted.
+
+This <b>checked checkbox</b> looks about like this:
+
+<img src="https://i.imgur.com/Fn0GasM.png" style="margin: 1em">
+
+## Use image-checkbox (on and off)
+
+Examples:
+
+    show_image_checkbox :on, 'posab','top:10em;right:18%'
+    show_image_checkbox :off, 'posab','top:10em;right:18%'
+
+## Science links
+
+This is only useful for me and my home system. I have 
+a few different science-specific subpages.
+
+I can then link to these via:
+
+    science_links
+
+This is quite plain, though, so I tend to add small
+images via:
+
+    science_links {{ use_this_image: dot109? }}
+
+Other images could be supplied as well.
+
+(Note that while this paragraph is for my own home system,
+the above could eventually be repurposed for other
+users too, if they have a bunch of external links
+they want to display on their homepage as well.
+I'll think about this for a while.)
 ## Useful quotes when designing websites and web-apps
 
 The following subsection collects a few <b>interesting statements</b> -

data/doc/todo/todo_for_the_cyberweb_project.md

@@ -1,3 +1,16 @@
+--------------------------------------------------------------------------------
+add a method:
+
+p_default_li {
+}
+^^^ this will make use of "le" rather than "e".
+
+we need a simple way to achieve this.
+^^^ add class
+
+RenderOrDisplay
+^^^ add that class and test it ...
+
 --------------------------------------------------------------------------------
 (1) → add a simple and documented way to convert from csv into
       table format

data/examples/advanced/animated_colourful_border/animated_colourful_border.cgi

@@ -0,0 +1,149 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/animated_colourful_border/animated_colourful_border.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+
+english('Animated colourful border') {
+autoextend
+ruby_favicon
+default_template '
+
+body {
+  background-color: #060C1F;
+  font-family: "Almarai", sans-serif;
+}
+
+.wrapper_for_the_animated_colourful_border {
+  width: 800px;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+   justify-content:  center;
+  overflow: hidden;
+}
+
+.main_div_for_the_gradient_shadow_animation {
+  position: relative;
+  margin: 10px;
+  background-color: transparent;
+}
+
+.div_for_the_gradient_shadow_animation::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top:  0;
+  width:  100%;
+  height: 100%;
+  -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
+          box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
+  z-index: -1;
+  -webkit-animation-name: gradient_shadow_with_changing_colours_animation;
+          animation-name: gradient_shadow_with_changing_colours_animation;
+  -webkit-animation-timing-function: ease;
+          animation-timing-function: ease;
+  -webkit-animation-duration: 6s;
+          animation-duration: 6s;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+}
+
+.header_for_the_gradient_shadow_animation {
+  font-size: 50px;
+  margin: 0;
+  position: relative;
+  z-index: 3;
+  padding: 20px;
+  background-color: #060C1F;
+  color: #fff;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+}
+
+@-webkit-keyframes gradient_shadow_with_changing_colours_animation {
+  0% {
+    -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+            box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+  }
+  20% {
+    -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
+            box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
+  }
+  40% {
+    -webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
+            box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
+  }
+  60% {
+    -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
+            box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
+  }
+  80% {
+    -webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
+            box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
+  }
+  100% {
+    -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+            box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+  }
+}
+
+@keyframes gradient_shadow_with_changing_colours_animation {
+  0% {
+    -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+            box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+  }
+  20% {
+    -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
+            box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
+  }
+  40% {
+    -webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
+            box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
+  }
+  60% {
+    -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
+            box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
+  }
+  80% {
+    -webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
+            box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
+  }
+  100% {
+    -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+            box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
+  }
+}
+
+'
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size '1.1em'
+no_jquery
+
+doc('mar0px s1em') {
+  ee '<div class="wrapper_for_the_animated_colourful_border">
+  <div class="main_div_for_the_gradient_shadow_animation div_for_the_gradient_shadow_animation">
+    <h1 class="header_for_the_gradient_shadow_animation" style="color: #FFFFE0">
+    This is a test sentence.
+    </h1>
+  </div>
+</div>
+<div class="wrapper_for_the_animated_colourful_border">
+  <div class="main_div_for_the_gradient_shadow_animation div_for_the_gradient_shadow_animation">
+    <h1 class="header_for_the_gradient_shadow_animation" style="color: #FFFFE0">
+    This is a test sentence.
+    </h1>
+  </div>
+</div>'
+
+}}

data/examples/advanced/no_right_click.cgi

@@ -9,8 +9,7 @@ require 'cyberweb/autoinclude'
 english('No right click') {
 autoextend
 ruby_favicon
-css_style '
-'+TEMPLATE1
+default_template
 body_css_class 'mar0px s2px padt2px VERDANAs'
 body_css_style 'background-color: #d3d2d1;'
 font_size 'def'