cyberweb 0.7.9 → 0.8.17

data/lib/cyberweb/cascading_style_sheets/default.css

@@ -1,14 +1,16 @@
 /*
  * Filename: default.css
  *
- * This file used to be called STD.css until July 2020 when it was renamed
- * (and the content re-organized).
+ * This file used to be called STD.css until July 2020 when it was
+ * finally renamed to default.css (and the old, original content
+ * was re-organized).
  *
  * Thus, this file is sort of the standard (STD) .css file, originally
- * created in the year 2000 to standardize usage across my webpages. 
+ * created in the year 2000 to standardize usage across my different
+ * webpages. 
  *
  * SEPARATE style FROM CONTENT, PRESENTATION FROM STRUCTURE AND DESIGN
- * FROM DATA.
+ * from data.
  *
  * Please comment like this : * and /
  * 
@@ -30,6 +32,10 @@
 
 /* This is the default CSS class. */ 
 
+/*
+
+The following CSS rules were removed in January 2023.
+
 div         { font-weight: normal; }
 p           { padding: 0px; }
 
@@ -42,6 +48,8 @@ li {
 
 img {border:0px solid black;}
 
+*/
+
 .video_aspect_ratio {
   aspect-ratio: 16 / 9;
 }
@@ -345,86 +353,86 @@ img.center {
 .left95px { left:95px }
 .left96px { left:96px }
 .left98px { left:98px }
-.left100px{ left:100px}
-.left110px{ left:110px}
-.left120px{ left:120px}
-.left150px{ left:150px}
-.left180px{ left:180px}
-.left190px{ left:190px}
-.left195px{ left:195px}
-.left197px{ left:197px}
-.left198px{ left:198px}
-.left200px{ left:200px}
-.left205px{ left:205px}
-.left210px{ left:210px}
-.left275px{ left:275px}
-.left280px{ left:280px}
-.left286px{ left:286px}
-.left291px{ left:291px}
-.left295px{ left:295px}
-.left300px{ left:300px}
-.left301px{ left:301px}
-.left320px{ left:320px}
-.left360px{ left:360px}
-.left380px{ left:380px}
-.left385px{ left:385px}
-.left400px{ left:400px}
-.left420px{ left:420px}
-.left450px{ left:450px}
-.left460px{ left:460px}
-.left480px{ left:480px}
-.left490px{ left:490px}
-.left500px{ left:500px}
-.left520px{ left:520px}
-.left540px{ left:540px}
-.left560px{ left:560px}
-.left580px{ left:580px}
-.left590px{ left:590px}
-.left595px{ left:595px}
-.left600px{ left:600px}
-.left605px{ left:605px}
-.left610px{ left:610px}
-.left620px{ left:620px}
-.left630px{ left:630px}
-.left640px{ left:640px}
-.left650px{ left:650px}
-.left680px{ left:680px}
-.left690px{ left:690px}
-.left700px{ left:700px}
-.left705px{ left:705px}
-.left706px{ left:706px}
-.left707px{ left:707px}
-.left708px{ left:708px}
-.left740px{ left:740px}
-.left790px{ left:790px}
-.left800px{ left:800px}
-.left810px{ left:810px}
-.left820px{ left:820px}
-.left856px{ left:856px}
-.left875px{ left:875px}
-.left880px{ left:880px}
-.left896px{ left:896px}
-.left900px{ left:900px}
-.left905px{ left:905px}
-.left910px{ left:910px}
-.left920px{ left:920px}
-.left950px{ left:950px}
-.left-1em { left:-1em}
-.left0em  { left: 0em}
-.left1em  { left: 1em}
-.left2em  { left: 2em}
-.left3em  { left: 3em}
-.left4em  { left: 4em}
-.left5em  { left: 5em}
-.left6em  { left: 6em}
-.left7em  { left: 7em}
-.left8em  { left: 8em}
-.left9em  { left: 9em}
-.left10em { left:10em}
-.left20em { left:20em}
-.left30em { left:30em}
-.left40em { left:40em}
-.left50em { left:50em}
+.left100px { left:100px}
+.left110px { left:110px}
+.left120px { left:120px}
+.left150px { left:150px}
+.left180px { left:180px}
+.left190px { left:190px}
+.left195px { left:195px}
+.left197px { left:197px}
+.left198px { left:198px}
+.left200px { left:200px}
+.left205px { left:205px}
+.left210px { left:210px}
+.left275px { left:275px}
+.left280px { left:280px}
+.left286px { left:286px}
+.left291px { left:291px}
+.left295px { left:295px}
+.left300px { left:300px}
+.left301px { left:301px}
+.left320px { left:320px}
+.left360px { left:360px}
+.left380px { left:380px}
+.left385px { left:385px}
+.left400px { left:400px}
+.left420px { left:420px}
+.left450px { left:450px}
+.left460px { left:460px}
+.left480px { left:480px}
+.left490px { left:490px}
+.left500px { left:500px}
+.left520px { left:520px}
+.left540px { left:540px}
+.left560px { left:560px}
+.left580px { left:580px}
+.left590px { left:590px}
+.left595px { left:595px}
+.left600px { left:600px}
+.left605px { left:605px}
+.left610px { left:610px}
+.left620px { left:620px}
+.left630px { left:630px}
+.left640px { left:640px}
+.left650px { left:650px}
+.left680px { left:680px}
+.left690px { left:690px}
+.left700px { left:700px}
+.left705px { left:705px}
+.left706px { left:706px}
+.left707px { left:707px}
+.left708px { left:708px}
+.left740px { left:740px}
+.left790px { left:790px}
+.left800px { left:800px}
+.left810px { left:810px}
+.left820px { left:820px}
+.left856px { left:856px}
+.left875px { left:875px}
+.left880px { left:880px}
+.left896px { left:896px}
+.left900px { left:900px}
+.left905px { left:905px}
+.left910px { left:910px}
+.left920px { left:920px}
+.left950px { left:950px}
+.left-1em  { left:-1em}
+.left0em   { left: 0em}
+.left1em   { left: 1em}
+.left2em   { left: 2em}
+.left3em   { left: 3em}
+.left4em   { left: 4em}
+.left5em   { left: 5em}
+.left6em   { left: 6em}
+.left7em   { left: 7em}
+.left8em   { left: 8em}
+.left9em   { left: 9em}
+.left10em  { left:10em}
+.left20em  { left:20em}
+.left30em  { left:30em}
+.left40em  { left:40em}
+.left50em  { left:50em}
   /*  Z index tags, z-index tags  */
 .Z1       { z-index:1}
 .Z2       { z-index:2}
@@ -589,7 +597,7 @@ img.center {
 .wid2     {width: 2%}
 .wid1     {width: 1%}
 .wid0     {width: 0%}
-.wid1000px{width:1000px} 
+.wid1000px {width:1000px} 
 .wid970px {width:970px}
 .wid960px {width:960px}
 .wid950px {width:950px}
@@ -1427,8 +1435,10 @@ img.center {
 .LH20   {line-height:20% }
 .LHN    {line-height:normal}
 
-/* And similar to that, general definitions for differencies   */
-/* Note that a - means a ,  :-)  So if there is something like 1-5em it is a class for 1.5em  ind tags indent tags*/
+/* And similar to that, general definitions for differencies. */
+/* Note that a - means a ,  :-)  So if there is something
+   like 1-5em it is a class for 1.5em  ind tags indent
+   tags */
 
   /* letter spacing tags, l-spacing tags, letter-spacing tags, let space tags */
 .lspa1      { letter-spacing:1px }
@@ -1468,7 +1478,10 @@ img.center {
 .wspa2em   {word-spacing:2em }
 .wspa3em   {word-spacing:3em }
 .wspa4em   {word-spacing:4em }
-  /* text-transform: können Sie die Transformation bestimmen*/
+
+/*
+ * text-transform: können Sie die Transformation bestimmen
+ */
 .TTC    {text-transform: capitalize}
 .TTU    {text-transform: uppercase}
 .TTL    {text-transform: lowercase}
@@ -1634,7 +1647,6 @@ input.blur {color: black;background-color:#FFFFCC;font-weight: normal;}
 INPUT.dis   { color:#FFFFFF;background-color:#0000CC;Width: 250px;}
 INPUT.vis   { color:#FFFFFF;background-color:#FF0000;Width: 250px;}
 
-
 /*
  * We can center a page through this entry.
  */
@@ -1677,6 +1689,7 @@ hr.thick {
   display: flex;
   width: 100%;
 }
+
 .flex-child {
   flex: 0.1;
   border: 2px solid yellow;

data/lib/cyberweb/cascading_style_sheets/glow_effects.css

@@ -131,3 +131,39 @@
    50% { background-position: 400% 0; }
   100% { background-position: 0 0; }
 }
+
+
+/*
+ * The "Portland glow effect" is mostly just a little bit
+ * of glow effect that is similar to a neon-light.
+ */
+.portland_glow_effect {
+  text-transfrom: uppercase;
+  color: white;
+  font-size: 6em;
+  animation: neon_glow_animation 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+@keyframes neon_glow_animation {
+   0% {
+     text-shadow: 0 0 10px rgba(255, 255, 255, .8),
+                  0 0 20px rgba(255, 255, 255, .8),
+                  0 0 22px rgba(255, 255, 255, .8),
+                  0 0 40px rgba(66, 220, 219, .8),
+                  0 0 60px rgba(66, 220, 219, .8),
+                  0 0 80px rgba(66, 220, 219, .5),
+                  0 0 100px rgba(66, 220, 219, .5),
+                  0 0 140px rgba(66, 220, 219, .5),
+                  0 0 200px rgba(66, 220, 219, .5);
+  }
+   100% {
+     text-shadow: 0 0 2px rgba(255, 255, 255, .8),
+                  0 0 8px rgba(255, 255, 255, .8),
+                  0 0 10px rgba(255, 255, 255, .8),
+                  0 0 20px rgba(66, 220, 219, .8),
+                  0 0 30px rgba(66, 220, 219, .8),
+                  0 0 40px rgba(66, 220, 219, .8),
+                  0 0 50px rgba(66, 220, 219, .5),
+                  0 0 80px rgba(66, 220, 219, .5);
+  }
+}

data/lib/cyberweb/cascading_style_sheets/margin.css

@@ -468,13 +468,17 @@
 .marl4_7em { margin-left: 4.7em }
 .marl4_8em { margin-left: 4.8em }
 .marl4_9em { margin-left: 4.9em }
-.marl5em   { margin-left: 5em   }
-.marl5_5em { margin-left: 5.5em }
-.marl6em   { margin-left: 6em   }
-.marl6_5em { margin-left: 6.5em }
-.marl7em   { margin-left:7em   }
-.marl8em   { margin-left:8em   }
-.marl9em   { margin-left:9em   }
+.marl5em   { margin-left: 5em;  }
+.marl5_5em { margin-left: 5.5em;}
+.marl6em   { margin-left: 6em;  }
+.marl6_5em { margin-left: 6.5em;}
+.marl6_6em { margin-left: 6.6em;}
+.marl6_7em { margin-left: 6.7em;}
+.marl6_8em { margin-left: 6.8em;}
+.marl6_9em { margin-left: 6.9em;}
+.marl7em   { margin-left: 7em;  }
+.marl8em   { margin-left: 8em;  }
+.marl9em   { margin-left: 9em;  }
 .marl10em  { margin-left: 10em  }
 .marl11em  { margin-left: 11em  }
 .marl12em  { margin-left: 12em  }

data/lib/cyberweb/cascading_style_sheets/misc.css

@@ -211,3 +211,10 @@ div.circle {
 .default_clip_path_circle {
   clip-path: circle(80px at center);
 }
+
+/*
+ * This is specifically for images.
+ */
+.blend_mode {
+  mix-blend-mode: multiplay;
+}

data/lib/cyberweb/cascading_style_sheets/text_shadow.css

@@ -37,4 +37,9 @@
                0 -1px 0 #000,
                0 1px 0 #000,
                -1px 0 0 #000;
-}
+}
+
+.retro_glow_effect {
+  text-shadow: 0px 0px 40px #39FF14, 
+               0px 0px 40px #39FF14;
+}

data/lib/cyberweb/generator/cgi.rb

@@ -178,13 +178,21 @@ doc('#{USE_THESE_CSS_CLASSES_FOR_THE_MAIN_DIV_ELEMENT}') {
     update_default_page_content # Need to update @default_page_content.
     what = @default_page_content
     into = i
-    write_what_into(what, into) # <- Create the file here.
+    write_what_into(what, into) # ← Create the file here.
     opnn; e "Created file `#{sfile(into)}`."
+    # ======================================================================= #
+    # Run a chmod to ensure the file has the correct permission next.
+    # ======================================================================= #
+    FileUtils.chmod(0755, into) if File.exist?(into)
     if is_on_roebe?
       # ===================================================================== #
       # Open it on my home system as well, via my main editor.
       # ===================================================================== #
       Esystem.esystem("#{MAIN_EDITOR_TO_USE} #{into} &")
+      begin
+        require 'open' unless Object.const_defined?(:Open)
+      rescue LoadError; end
+      Open.in_browser(into)
     end
   end
 

data/lib/cyberweb/html_template/html_template.rb

@@ -295,6 +295,11 @@ class HtmlTemplate < ::Cyberweb::Base # === Cyberweb::HtmlTemplate
     # ======================================================================= #
     if hash.has_key? :body
       @internal_hash[:body] = hash.delete(:body)
+    # ======================================================================= #
+    # === :content
+    # ======================================================================= #
+    elsif hash.has_key? :content
+      @internal_hash[:body] = hash.delete(:content)
     end
     # ======================================================================= #
     # === :css_classes
@@ -468,14 +473,14 @@ class HtmlTemplate < ::Cyberweb::Base # === Cyberweb::HtmlTemplate
       # Obtain the various .css files next and store them in `css_content`:
       # ===================================================================== #
       Dir["#{project_base_dir?}cascading_style_sheets/*.css"].each {|entry|
-        css_content << File.read(entry)+N
+        css_content << "#{File.read(entry, encoding: 'UTF-8')}#{N}"
       }
       css_classes.each {|this_css_class|
         # =================================================================== #
         # See: https://rubular.com/r/7LUM1vaN45GDQ6
         # =================================================================== #
         use_this_regex =
-          /(\.#{this_css_class}).+{(.+)}$/
+          /(\.#{this_css_class}).+{(.+)}$/u # For unicode encoding.
         css_content =~ use_this_regex
         # ================================================================= #
         # else, since as of December 2021, try to read in from a .css

data/lib/cyberweb/javascript_code/custom_functions.js

@@ -1,8 +1,9 @@
 /*
  * === change_the_colour_to()
  *
- * Use this function to change the colour of the text at
- * hand.
+ * Use this function to change the colour of the text at hand.
+ *
+ * The id should be the second argument to this function.
  */
 function change_the_colour_to(
   this_colour,
@@ -291,3 +292,33 @@ function popup(i)
 {
   alert(i);
 }
+
+/*
+ * array_includes()
+ *
+ * This is a bit similar to ruby's array.include? check.
+ *
+ * Usage example:
+ *
+ *   cars = ['BMW','AUDI','VOLVO']
+ *   array_includes(cars, 'BMW')
+ *
+ */
+function array_includes(this_array, key_string) {
+  return this_array.includes(key_string);
+}
+/*
+ * pp()
+ *
+ * pretty_print "implementation", inspired by ruby.
+ *
+ * This uses the so called "spread operator" in JavaScript.
+ *
+ * Usage example:
+ *
+ *   pp(['abc','def','ghi'])
+ *
+ */
+function pp(i) {
+  console.log(...i);
+}

data/lib/cyberweb/objectified/html_tags/progress.rb

@@ -127,14 +127,6 @@ class Progress < Base # === Cyberweb::Objectified::HtmlTags::Progress
     @internal_hash[:max] = i.to_i
   end; alias set_max max= # === set_max
 
-  # ========================================================================= #
-  # === value=
-  # ========================================================================= #
-  def value=(i)
-    @internal_hash[:value] = i.to_i
-    set_content(@internal_hash[:value].to_s+'%')
-  end; alias set_value value= # === set_value
-
   # ========================================================================= #
   # === parse_content
   #
@@ -153,6 +145,14 @@ class Progress < Base # === Cyberweb::Objectified::HtmlTags::Progress
     end
   end
 
+  # ========================================================================= #
+  # === value=
+  # ========================================================================= #
+  def value=(i)
+    @internal_hash[:value] = i.to_i
+    set_content(@internal_hash[:value].to_s+'%')
+  end; alias set_value value= # === set_value
+
 end; end; end
 
 # =========================================================================== #

data/lib/cyberweb/skeleton/README.md

@@ -0,0 +1,2 @@
+This directory may contain raw-skeleton code such as the code
+for the HTML-CSS keyboard and what not.

data/lib/cyberweb/skeleton/html_keyboard.md

@@ -0,0 +1,140 @@
+<div class="container_for_the_keyboard">
+<div class="row_for_the_keyboard zero">
+ <button class="for_the_keyboard">Esc</button>
+ <button class="for_the_keyboard">F1</button>
+ <button class="for_the_keyboard">F2</button>
+ <button class="for_the_keyboard">F3</button>
+ <button class="for_the_keyboard">F4</button>
+ <button class="for_the_keyboard">F5</button>
+ <button class="for_the_keyboard">F6</button>
+ <button class="for_the_keyboard">F7</button>
+ <button class="for_the_keyboard">F8</button>
+ <button class="for_the_keyboard">F9</button>
+ <button class="for_the_keyboard">F10</button>
+ <button class="for_the_keyboard">F11</button>
+ <button class="for_the_keyboard">F12</button>
+ <button class="for_the_keyboard">Insect</button>
+ <button class="print_key for_the_keyboard">printScr</button>
+ <button class="for_the_keyboard">Delete</button>
+</div>
+
+<div class="row_for_the_keyboard row_one">
+ <button onclick="on_key_pressed_event('~')" class="for_the_keyboard">~</button>
+ <button onclick="on_key_pressed_event('1')" class="for_the_keyboard">1</button>
+ <button onclick="on_key_pressed_event('2')" class="for_the_keyboard">2</button>
+ <button onclick="on_key_pressed_event('3')" class="for_the_keyboard">3</button>
+ <button onclick="on_key_pressed_event('4')" class="for_the_keyboard">4</button>
+ <button onclick="on_key_pressed_event('5')" class="for_the_keyboard">5</button>
+ <button onclick="on_key_pressed_event('6')" class="for_the_keyboard">6</button>
+ <button onclick="on_key_pressed_event('7')" class="for_the_keyboard">7</button>
+ <button onclick="on_key_pressed_event('8')" class="for_the_keyboard">8</button>
+ <button onclick="on_key_pressed_event('9')" class="for_the_keyboard">9</button>
+ <button onclick="on_key_pressed_event('0')" class="for_the_keyboard">0</button>
+ <button onclick="on_key_pressed_event('-')" class="for_the_keyboard">-</button>
+ <button onclick="on_key_pressed_event('=')" class="for_the_keyboard">=</button>
+ <button onclick="on_key_pressed_event('backspace_key')" class="backspace_key for_the_keyboard">Backspace</button>
+ <button onclick="on_key_pressed_event('home_key')" class="for_the_keyboard">Home</button>
+</div>
+
+<div class="row_for_the_keyboard row_two">
+ <button onclick="on_key_pressed_event('tab_key')" class="tab_key for_the_keyboard">Tab</button>
+ <button onclick="on_key_pressed_event('q')" class="for_the_keyboard">Q</button>
+ <button onclick="on_key_pressed_event('w')" class="for_the_keyboard">W</button>
+ <button onclick="on_key_pressed_event('e')" class="for_the_keyboard">E</button>
+ <button onclick="on_key_pressed_event('r')" class="for_the_keyboard">R</button>
+ <button onclick="on_key_pressed_event('t')" class="for_the_keyboard">T</button>
+ <button onclick="on_key_pressed_event('y')" class="for_the_keyboard">Y</button>
+ <button onclick="on_key_pressed_event('u')" class="for_the_keyboard">U</button>
+ <button onclick="on_key_pressed_event('i')" class="for_the_keyboard">I</button>
+ <button onclick="on_key_pressed_event('o')" class="for_the_keyboard">O</button>
+ <button onclick="on_key_pressed_event('p')" class="for_the_keyboard">P</button>
+ <button onclick="on_key_pressed_event('{')" class="for_the_keyboard">{</button>
+ <button onclick="on_key_pressed_event('}')" class="for_the_keyboard">}</button>
+ <button onclick="on_key_pressed_event('\\')" class="slace_key for_the_keyboard">\</button>
+ <button onclick="on_key_pressed_event('page_up')" class="for_the_keyboard">Pg Up</button>
+</div>
+
+<div class="row_for_the_keyboard row_three">
+ <button onclick="on_key_pressed_event('caps_lock')" class="caps_lock_key for_the_keyboard">Caps Lock</button>
+ <button onclick="on_key_pressed_event('a')" class="for_the_keyboard">A</button>
+ <button onclick="on_key_pressed_event('s')" class="for_the_keyboard">S</button>
+ <button onclick="on_key_pressed_event('d')" class="for_the_keyboard">D</button>
+ <button onclick="on_key_pressed_event('f')" class="for_the_keyboard">F</button>
+ <button onclick="on_key_pressed_event('g')" class="for_the_keyboard">G</button>
+ <button onclick="on_key_pressed_event('h')" class="for_the_keyboard">H</button>
+ <button onclick="on_key_pressed_event('i')" class="for_the_keyboard">I</button>
+ <button onclick="on_key_pressed_event('j')" class="for_the_keyboard">J</button>
+ <button onclick="on_key_pressed_event('k')" class="for_the_keyboard">K</button>
+ <button onclick="on_key_pressed_event('l')" class="for_the_keyboard">L</button>
+ <button onclick="on_key_pressed_event(';')" class="for_the_keyboard">;</button>
+ <button onclick="on_key_pressed_event('#')" class="for_the_keyboard">#</button>
+ <button onclick="on_key_pressed_event('enter_key')" class="enter_button for_the_keyboard">Enter</button>
+ <button onclick="on_key_pressed_event('page_down')" class="for_the_keyboard">Pg Dn</button>
+</div>
+
+<div class="row_for_the_keyboard row_four">
+ <button onclick="on_key_pressed_event('shift')" class="shift_key for_the_keyboard">Shift</button>
+ <button onclick="on_key_pressed_event('z')" class="for_the_keyboard">Z</button>
+ <button onclick="on_key_pressed_event('x')" class="for_the_keyboard">X</button>
+ <button onclick="on_key_pressed_event('c')" class="for_the_keyboard">C</button>
+ <button onclick="on_key_pressed_event('v')" class="for_the_keyboard">V</button>
+ <button onclick="on_key_pressed_event('b')" class="for_the_keyboard">B</button>
+ <button onclick="on_key_pressed_event('n')" class="for_the_keyboard">N</button>
+ <button onclick="on_key_pressed_event('m')" class="for_the_keyboard">M</button>
+ <button onclick="on_key_pressed_event(',')" class="for_the_keyboard">,</button>
+ <button onclick="on_key_pressed_event('.')" class="for_the_keyboard">.</button>
+ <button onclick="on_key_pressed_event('=')" class="for_the_keyboard">?</button>
+ <button onclick="on_key_pressed_event('Shift')" class="shift_key for_the_keyboard">Shift</button>
+ <button onclick="on_key_pressed_event('↑')" class="for_the_keyboard">↑</button>
+ <button onclick="on_key_pressed_event('End')" class="for_the_keyboard">End</button>
+</div>
+
+<div class="row_for_the_keyboard row_five">
+ <button onclick="on_key_pressed_event('ctrl_key')"class="last_row for_the_keyboard">Ctrl</button>
+ <button onclick="on_key_pressed_event('function_key')"class="last_row for_the_keyboard">Fn</button>
+ <button onclick="on_key_pressed_event('win_key')"class="last_row for_the_keyboard">Win</button>
+ <button onclick="on_key_pressed_event('alt_key')"class="last_row for_the_keyboard">Alt</button>
+ <button onclick="on_key_pressed_event('space_key')" class="for_the_keyboard space_key">space</button>
+ <button onclick="on_key_pressed_event('alt_key')" class="last_row for_the_keyboard">Alt</button>
+ <button onclick="on_key_pressed_event('fn_key')" class="last_row for_the_keyboard">Fn</button>
+ <button class="last_row for_the_keyboard">Ctrl</button>
+ <button class="last_row for_the_keyboard">←</button>
+ <button class="last_row for_the_keyboard">↓</button>
+ <button class="last_row for_the_keyboard">→</button>
+</div>
+
+</div>
+
+<div style="margin-left: 8em; margin-top: 1em">
+ <label for="textarea_id"></label>
+ <textarea id="textarea_id" rows="12" cols="80" style="background-color: #d3d3d3">
+ </textarea>
+</div>
+
+<script>
+
+function on_key_pressed_event(i) {
+  console.log(i)
+  old_value = document.getElementById('textarea_id').value
+  switch (i) {
+    case 'enter_key':
+      i = "\n"
+      break
+    case 'space_key':
+      i = ' '
+      break
+    case 'shift',
+         'caps_lock',
+         'shift':
+      i = ''
+      break
+    case 'backspace_key':
+      i = ''
+      old_value = old_value.slice(0, -1)
+      break
+  }
+
+  document.getElementById('textarea_id').value = old_value+i
+  /*alert(i);*/
+}
+</script>

data/lib/cyberweb/toplevel_methods/is_an_image.rb

@@ -0,0 +1,18 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# require 'cyberweb/toplevel_methods/is_an_image.rb'
+# =========================================================================== #
+module Cyberweb
+
+  require 'cyberweb/constants/constants.rb'
+
+  # ========================================================================= #
+  # === Cyberweb.is_an_image_file?
+  # ========================================================================= #
+  def self.is_an_image_file?(i)
+    ARRAY_IMAGES.include?(File.extname(i).delete('.'))
+  end; self.instance_eval { alias is_an_image? is_an_image_file? } # === Cyberweb.is_an_image?
+
+end

data/lib/cyberweb/toplevel_methods/listing.rb

@@ -16,7 +16,7 @@ module Cyberweb
   # ========================================================================= #
   def self.listing_css_object
     @listing_css_object
-  end
+  end; self.instance_eval { alias listing_css_object? listing_css_object } # === Cyberweb.listing_css_object?
 
   # ========================================================================= #
   # === Cyberweb.listing_css_object=
@@ -48,8 +48,7 @@ module Cyberweb
       make_newline = true
     )
     s2 '(<b>'+return_counter+'</b>) <b>'+i+'</b>',
-       optional_css,
-       optional_id
+       optional_css, optional_id
     br if make_newline
   end; self.instance_eval { alias list  listing } # === Cyberweb.list
        self.instance_eval { alias count listing } # === Cyberweb.count (count tag)