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

cyberweb 0.4.174 → 0.5.225

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
+    }
+  }
+}}