RubyGems - cyberweb - Versions diffs - 0.4.174 → 0.5.225 - Mend

cyberweb 0.4.174 → 0.5.225

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of cyberweb might be problematic. Click here for more details.

Files changed (625) hide show

data/examples/javascript_and_jquery/jquery_bubbling_header/bubbling_header.html ADDED Viewed

@@ -0,0 +1,109 @@
+<html>
+<head>
+<title>Bubbling Header Demo</title>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<style>
+.center-outer {
+display: table;
+width: 100%;
+height: 100%;
+}
+.center-inner {
+display: table-cell;
+vertical-align: middle;
+text-align: center;
+}
+/* Essential CSS - Makes the effect work */
+body {
+  background-color: #3498db;
+}
+.bubbles {
+  display: inline-block;
+  font-family: arial;
+  position: relative;
+}
+.bubbles h1 {
+  position: relative;
+  margin: 1em 0 0;
+  font-family: 'Luckiest Guy', cursive;
+  font-size: 3em;
+  color: #fff;
+  z-index: 2;
+}
+.individual-bubble {
+  position: absolute;
+  border-radius: 50%;
+  bottom: 10px;
+  background-color: #fff;
+  z-index: 1;
+}
+</style>
+<script>
+jQuery(document).ready(function($){
+  // Define a blank array for the effect positions. This will be populated based on width of the title.
+  var bArray = [];
+  // Define a size array, this will be used to vary bubble sizes
+  var sArray = [2, 4, 6, 8, 10, 15];
+  // Push the header width values to bArray
+  for (var i = 0; i < $('.bubbles').width(); i++) {
+    bArray.push(i);
+  }
+  // Function to select random array element
+  // Used within the setInterval a few times
+  function randomValue(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+  // setInterval function used to create new bubble every 350 milliseconds
+  setInterval(function(){
+    // Get a random size, defined as variable so it can be used for both width and height
+    var size = randomValue(sArray);
+    // New bubble appeneded to div with it's size and left position being set inline
+    // Left value is set through getting a random value from bArray
+    $('.bubbles').append(
+      '<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>'
+    );
+    // Animate each bubble to the top (bottom 100%) and reduce opacity as it moves
+    // Callback function used to remove finsihed animations from the page
+    $('.individual-bubble').animate({
+      'bottom': '100%',
+      'opacity' : '-=0.7'
+    }, 3000, function(){
+      $(this).remove()
+    }
+    );
+  }, 700);
+});
+</script>
+</head>
+<body>
+<div class="center-outer">
+<div class="center-inner">
+  <div class="bubbles">
+    <h1>Bubbling Header</h1>
+  </div>
+</div>
+</div>
+</body>
+</html>

data/examples/{javascript → javascript_and_jquery}/jquery_drag_and_drop/drag_and_drop_image_example.html RENAMED Viewed

File without changes

data/examples/javascript_and_jquery/jquery_showcase/README.md ADDED Viewed

@@ -0,0 +1,6 @@
+This will show some of the basic examples of Jquery, via
+Cyberweb.
+Examples for websites offering tutorials for Jquery:
+  https://www.tutorialrepublic.com/jquery-examples.php

data/examples/javascript_and_jquery/jquery_showcase/jquery_001.cgi ADDED Viewed

@@ -0,0 +1,23 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/javascript_and_jquery/jquery_showcase/jquery_001.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Jquery #1') {
+created_on '21.04.2022' # Thursday.
+ruby_favicon
+main_css ''
+body_css_class ''
+body_css_style ''
+font_size 'def'
+doc('mar0px pad0px') {
+  p {
+    ee 'Not loaded yet.'
+  }
+  document_ready('$("p").text("Hello World! This has '\
+  'been done via document_ready()");')
+}}

data/examples/javascript_and_jquery/jquery_showcase/jquery_002.cgi ADDED Viewed

@@ -0,0 +1,34 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/javascript_and_jquery/jquery_showcase/jquery_002.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Jquery #2') {
+created_on '21.04.2022' # Thursday.
+ruby_favicon
+main_css ''
+body_css_class ''
+body_css_style ''
+font_size 'def'
+doc('mar0px pad0px') {
+  document_ready('$(".btn-one").click(function(){
+        $("p").text("This is demo text.");
+    });
+    $(".btn-two").click(function(){
+        $("p:first").text("This is another demo text.");
+    });
+    $(".btn-three").click(function(){
+        $("p.empty").text("This is one more demo text.");
+    });')
+  ee ' <button type="button" class="btn-one">Set All Paragraph Text</button>
+  <button type="button" class="btn-two">Set First Paragraph Text</button>
+  <button type="button" class="btn-three">Set Empty Paragraph Text</button>'
+  p { ee 'This is a test paragraph.' }
+  p { ee 'This is another test paragraph.' }
+  p('empty') {}
+}}

data/examples/javascript_and_jquery/jquery_showcase/jquery_003.cgi ADDED Viewed

@@ -0,0 +1,24 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/javascript_and_jquery/jquery_showcase/jquery_003.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Jquery #3 - showing how to change the colour of elements via jquery') {
+created_on '22.04.2022' # Friday.
+ruby_favicon
+main_css ''
+body_css_class ''
+body_css_style ''
+font_size 'def'
+doc('mar0px pad0px BG_Black White') {
+  h1('Hello world! My initial colour was tomato '\
+  '(reddish) - now it should be steelblue',
+  'BG_Black pad1em tomato')
+  document_ready('$("h1").css("color", "steelblue");')
+}}

data/examples/javascript_and_jquery/jquery_showcase/jquery_004.cgi ADDED Viewed

@@ -0,0 +1,34 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/javascript_and_jquery/jquery_showcase/jquery_004.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Jquery #4 - showing a fade out and fade in effect') {
+created_on '22.04.2022' # Friday.
+ruby_favicon
+main_css ''
+body_css_class ''
+body_css_style ''
+font_size 'FS2em'
+doc('mar0px pad0px') {
+  document_ready('
+    // Fading out displayed paragraphs
+    $(".fade_out_button").click(function(){
+        $("p").fadeOut();
+    });
+    // Fading in hidden paragraphs
+    $(".fade_in_button").click(function(){
+        $("p").fadeIn();
+    });
+  ')
+  ee '
+  <button type="button" class="fade_out_button">Fade Out Paragraphs</button>
+  <button type="button" class="fade_in_button">Fade In Paragraphs</button>'
+  p('pad1em wid40','','border: 5px dotted tomato')    { ee 'This is a paragraph.' }
+  p('pad1em wid40','','border: 5px dotted steelblue') { ee 'This is another paragraph.' }
+}}

data/examples/javascript_and_jquery/on_change_event/on_change_event.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<body style="margin: 0.5em">
+<p>Select a new car from the list.</p>
+<select id="main_select" onchange="foobar()">
+  <option value="Audi">Audi</option>
+  <option value="BMW">BMW</option>
+  <option value="Mercedes">Mercedes</option>
+  <option value="Volvo">Volvo</option>
+</select>
+<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
+<p id="demo_paragraph"></p>
+<input id="user_input_entry" type="text" style="margin-left: 3em" placeholder="The entry will appear here ...">
+<script>
+function foobar() {
+  var selected_text = document.getElementById("main_select").value;
+  document.getElementById("demo_paragraph").innerHTML = "You selected: <b>"+selected_text+"</b>";
+  document.getElementById("user_input_entry").value = selected_text;
+}
+</script>
+</body>
+</html>

data/examples/javascript_and_jquery/on_click_colour_change/on_click_colour_change.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../lib/cyberweb/javascript_code/html_colours.js"></script>
+<script>
+/*
+ * change_the_colour_to()
+ *
+ * Use this function to change the colour of the text at
+ * hand.
+ */
+function change_the_colour_to(work_on_this_id = "our_id")
+{
+  var random_colour = HTML_COLOURS[Math.floor(Math.random()*HTML_COLOURS.length)];
+  document.getElementById(work_on_this_id).style.color = random_colour;
+}
+</script>
+</head>
+<body>
+<p id="our_id" onclick="change_the_colour_to()">
+  Click on text to change
+</p>
+</body>
+</html>

data/examples/javascript_and_jquery/on_click_display_random_number/on_click_display_random_number.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../lib/cyberweb/javascript_code/simulate_a_dice.js"></script>
+<script>
+/*
+ * display_random_number()
+ *
+ *
+ */
+function display_random_number(
+    work_on_this_id = "div_containing_the_result_of_the_dice_roll",
+    use_these_die   = "3W6"
+  )
+{
+  result = 0;
+  var n_times_to_roll = Number(use_these_die.charAt(0)); /* x6 for a six-sided die */
+  var n_sided_die     = Number(use_these_die.charAt(2));
+  /* n times */
+  for (let i = 0; i < n_times_to_roll; i++) {
+    var this_dice_roll_result = random_number_from_to(1, n_sided_die);
+    result += this_dice_roll_result;
+  }
+  document.getElementById(work_on_this_id).innerText =
+    result.toString();
+}
+</script>
+</head>
+<body>
+<img src="https://i.imgur.com/YYZzfuR.png" onclick="display_random_number()">
+<div id="div_containing_the_result_of_the_dice_roll" style="margin: 0.3em; margin-left: 0.5em; font-weight: 500">
+Click on the <b>dice</b> shown above.<br><br>
+(This will simulate <b>3 six-sided die</b>, thus a range between 3 and 18.)
+</div>
+</body>
+</html>

data/examples/{javascript → javascript_and_jquery}/on_click_event_hello_world/on_click_event_hello_world.html RENAMED Viewed

File without changes

data/examples/javascript_and_jquery/on_mouse_wheel_event/on_mouse_wheel_event.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#div_that_responds_to_the_mouse_wheel_event {
+  border: 1px solid black;
+}
+</style>
+</head>
+<body>
+<div id="div_that_responds_to_the_mouse_wheel_event">
+This example uses the addEventListener() method to attach
+a "wheel" event to a DIV element. Roll the mouse wheel
+over the div element - either by scrolling upwards or
+by scrolling downwards.
+</div>
+<p>
+A function is triggered when you roll the mouse wheel over
+div. The function sets the font-size of div to a random
+number of pixels + 15 pixels.
+</p>
+<script>
+document.getElementById("div_that_responds_to_the_mouse_wheel_event").addEventListener("wheel", on_mouse_scroll_event);
+function on_mouse_scroll_event() {
+  var n_pixels_to_use = 25 + Math.floor(Math.random() * 10);
+  this.style.fontSize = n_pixels_to_use.toString()+"px";
+}
+</script>
+</body>
+</html>

data/examples/javascript_and_jquery/read_the_content_of_a_local_file/read_the_content_of_a_local_file.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Read the content of a local text file</title>
+</head>
+<body style="font-size: 1.2em">
+<p>
+This example demonstrates how JavaScript can read the
+content of a (local) file.
+</p>
+<p>
+The content of that file will appear below this paragraph,
+should the local file exist.
+</p>
+<pre id="output" style="margin: 2em; border: 2px dotted royalblue; height: 500px">
+</pre>
+<input type="file" name="input_file" id="input_file"><br>
+<script type="text/javascript">
+document.getElementById('input_file').addEventListener('change', function() {
+  var file_reader = new FileReader();
+  file_reader.onload=function(){
+    document.getElementById('output').textContent = file_reader.result;
+  }
+  file_reader.readAsText(this.files[0]);
+})
+</script>
+</body>
+</html>

data/examples/{javascript → javascript_and_jquery}/rgb_to_hex/rgb_to_hex.html RENAMED Viewed

File without changes

data/examples/{javascript → javascript_and_jquery}/screen_resolution/screen_resolution.html RENAMED Viewed

@@ -8,7 +8,8 @@
 <script>
 function write_the_screen_resolution() {
   document.write(
-    "Your screen resolution is: <b>" + screen.width + "x" + screen.height+"</b>"
+    "Your screen resolution is: <b>" +
+    screen.width + "x" + screen.height+"</b>"
   );
 }
 </script>

data/examples/{javascript → javascript_and_jquery}/select_everything/select_everything.html RENAMED Viewed

@@ -6,7 +6,7 @@
 <body>
-<textarea rows="3" id="txtarea" onClick="select_everything('txtarea');" style="width:200px" >
+<textarea rows="3" id="txtarea" onClick="select_everything(this.id);" style="width:200px" >
 This text you can select all by clicking here.
 </textarea>

data/examples/javascript_and_jquery/vue/README.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ This may contain example code for vue.js specifically.

data/examples/javascript_and_jquery/vue/showcasing_vue.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Vue-specific app</title>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<body>
+<div id="app_id1">
+  {{ message }}
+</div>
+<script>
+var app = new Vue({
+  el: '#app_id1',
+  data: {
+    message: 'Hello Vue!'
+  }
+})
+</script>
+<div style="margin: 2em" id="app-2">
+  <span v-bind:title="message">
+    Hover your mouse over me for a few seconds
+    to see my dynamically bound title!
+  </span>
+</div>
+<script>
+var app2 = new Vue({
+  el: '#app-2',
+  data: {
+    message: 'You loaded this page on '+
+              new Date().toLocaleString()
+  }
+})
+</script>
+<div id="app-3">
+  <span v-if="seen">Now you see me</span>
+</div>
+<script>
+var app3 = new Vue({
+  el: '#app-3',
+  data: {
+    seen: true
+  }
+})
+</script>
+<div id="app-4">
+  <ol>
+    <li v-for="todo in todos">
+      {{ todo.text }}
+    </li>
+  </ol>
+</div>
+<script>
+var app4 = new Vue({
+  el: '#app-4',
+  data: {
+    todos: [
+      { text: 'Learn JavaScript' },
+      { text: 'Learn Vue' },
+      { text: 'Build something awesome' }
+    ]
+  }
+})
+</script>
+</body>
+</html>

data/examples/{javascript → javascript_and_jquery}/write_into_a_file/write_into_a_file.html RENAMED Viewed

File without changes

data/examples/rack/example_with_html_template.rb CHANGED Viewed

@@ -1,15 +1,16 @@
 require 'open'
 require 'rack'
 require 'cyberweb'
-require 'colours'
-begin
-  require 'wetter/requires/require_the_project_including_the_web_interface.rb'
-rescue LoadError; end
 class ComplexExample
+  begin
+    require 'wetter/requires/require_the_project_including_the_web_interface.rb'
+  rescue LoadError; end
   alias e puts
+  require 'colours'
   include Colours
   # ========================================================================= #

data/examples/rack/example_with_rack_and_cyberweb_showing_how_to_use_images.rb CHANGED Viewed

@@ -3,11 +3,12 @@
 # frozen_string_literal: true
 # =========================================================================== #
 require 'rack'
-require 'html_tags'
-require 'cyberweb/requires/require_the_html_template.rb'
 class MyApp
+  require 'html_tags'
+  require 'cyberweb/requires/require_the_html_template.rb'
   # ========================================================================= #
   # === N
   # ========================================================================= #

data/examples/rack/hello_world_example_with_rack.rb CHANGED Viewed

@@ -3,11 +3,12 @@
 # frozen_string_literal: true
 # =========================================================================== #
 require 'rack'
-require 'html_tags'
-require 'cyberweb/requires/require_the_html_template.rb'
 class MyApp
+  require 'html_tags'
+  require 'cyberweb/requires/require_the_html_template.rb'
   # ========================================================================= #
   # === call
   #

data/examples/rack/lobster.rb CHANGED Viewed

@@ -2,6 +2,8 @@
 # Encoding: UTF-8
 # frozen_string_literal: true
 # =========================================================================== #
+# === Rack::Lobster
+# =========================================================================== #
 require 'zlib'
 require 'rack'
@@ -19,10 +21,10 @@ class Lobster
       lobster = LobsterString.split("\n").
         map { |line| line.ljust(42).reverse }.
         join("\n")
-      href = "?"
+      href = '?'
     else
       lobster = LobsterString
-      href = "?flip"
+      href = '?flip'
     end
     content = ["<title>Lobstericious!</title>",
@@ -56,10 +58,10 @@ class Lobster
     end
     res = Response.new
-    res.write "<title>Lobstericious!</title>"
-    res.write "<pre>"
+    res.write '<title>Lobstericious!</title>'
+    res.write '<pre>'
     res.write lobster
-    res.write "</pre>"
+    res.write '</pre>'
     res.write "<p><a href='#{href}'>flip!</a></p>"
     res.write "<p><a href='?flip=crash'>crash!</a></p>"
     res.finish

data/examples/rack/rack_env.rb CHANGED Viewed

@@ -1,5 +1,5 @@
-require "rack"
-require "thin"
+require 'rack'
+require 'thin'
 class HelloWorld
   def call(env)
@@ -7,4 +7,4 @@ class HelloWorld
   end
 end
-Rack::Handler::Thin.run HelloWorld.new
+Rack::Handler::Thin.run(HelloWorld.new)

data/examples/{show_greek_letters.rb → show_greek_letters/show_greek_letters.rb} RENAMED Viewed

File without changes

data/examples/simple/input_example_with_coloured_focus.cgi ADDED Viewed

@@ -0,0 +1,32 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/simple/input_example_with_coloured_focus.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english(:filename) {
+created_on '23.04.2022' # Saturday.
+ruby_favicon
+css_template1
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+doc('mar0px pad0px s0_6em') {
+  h1 dot(106, 'marr8px')+
+     'Input example with coloured focus',
+     'mart1px marb0_5em'
+  div('mars3em pad1em') {
+    e 'Click on the following input tag:'
+    br
+    form {
+      input :text, 'Hello there.', :focus_with_lightyellow_background
+    }
+    fancy_separator
+    form {
+      input :text, 'Hello there.', :focus_with_lightgrey_background, :select_on_click
+    }
+  }
+}}