cyberweb 0.4.174

data/test/complex_tests/all_tests_in_one_page.cgi

@@ -0,0 +1,666 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/test/complex_tests/all_tests_in_one_page.cgi
+#
+#   or
+#
+# http://localhost/programming/ruby/src/cyberweb/test/complex_tests/all_tests_in_one_page.cgi?debug
+# =========================================================================== #
+# This file will extensively test some abilities of the web_object-framework.
+#
+# See the URL above to test it.
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+require 'verbose_truth/autoinclude'
+
+english('Testing all tests in one page') {
+css_style '
+
+li {
+  color: black;
+  background-color: white;
+}
+
+ul {
+  color: black;
+  background-color: white;
+}# frozen_string_literal: true
+
+#resize_id_goes_here    {
+  width: 150px; height: 150px;
+  padding: 0.5em;
+}
+
+#resize_id_goes_here h3 { text-align: center; color: green; margin: 0; }
+
+'
+# .focus_with_yellow_background:focus {
+#   background-color: yellow;
+#   color: black;
+# }
+# ^^^ no longer in use.
+remote_css 'https://rawgit.com/bevacqua/dragula/master/dist/dragula.css'
+set_favicon 'PC/HOW2DO_FAVICON.png' # Or: set_favicon :wings
+# add_css_file '/sprockets.css' # Does not seem to exist.
+body_css_class 'BG_Black White pad1px'
+font_size :larger
+# background_image :random # Not good if someone else can look at the laptop.
+# background :scroll # Enable scrolling background.
+# enable_scrolling # Enable background scrolling
+# scrolling '+' # Enable background scrolling.
+use 'jquery,utf,exceptions,squares,scrolling' # Scrolling is enabled here.
+do_drag_all_images
+predefine_squares
+
+# =========================================================================== #
+# The following constants require the earlier call to predefined_squares().
+# =========================================================================== #
+CSS_IMG  = IMG_CSS = SQUARE_DARKGOLDENROD
+IMG_JS   = SQUARE_GREY
+IMG_HTML = SQUARE_GREEN
+IMG_XML  = SQUARE_RED
+DOT109   = dot(109)
+
+doc('BG_White black mar0px pad0px') {
+  h1 'This website will try to test different aspects of the Cyberweb '\
+     'project, in particular when it is related to javascript and '\
+     'css as well.',
+     'martb1px'
+  # h1 'Showing an info box next:' 
+  # add_info_box
+  e 'Hi there','mart1px'
+  div { h3 'Test1 - should appear normal' }
+  Div.set_css_class 'red' # Now all divs are red.
+  # Test2 - should be red, due to Div.set_css_class 'red'
+  div { h3 "Test2 - should be red, due to a prior call to Div.set_css_class 'red'" }
+  Div.clear
+  # Test3 - should be normal again, thanks to <b>Div.clear</b> above.
+  div { h3 'Test3 - should be normal again, thanks to <b>Div.clear</b>' }
+  div('marl1em') { h3 'Test4 (with marl1em)' }
+  Div.set_css_class 'blue'
+  div('marl3em') { h3 "Test5 - with marl3em and blue colour, "\
+                      "specified via: Div.set_css_class 'blue'" }
+  Div.clear # And clear it again.
+  # ========================================================================= #
+  # A draggable Table
+  # ========================================================================= #
+  table2('BG_White s2em mar2px bblack3 marl5em',
+    'drag_TableRubyVariables','',
+    '$','global variable',
+    '@','instance variable',
+    '[a-z]','local variable',
+    '[A-Z]','constant'
+  )
+  # ========================================================================= #
+  # === A table with an Array as dataset
+  # ========================================================================= # 
+  div('mar1em pad1em wid90 bblack3','','margin-top: 1.5em;'){
+    h3 'A table with an Array as dataset (passed via block)',
+       'darkblue mart5px'
+    table('mars1em','test_table1','border:1px solid rand') { %w(
+      this is a test table1 with every individual
+      entry becoming populated into the table
+    )}
+    spacer
+    h3 'A table with an Array as dataset but with 4 entries per row',
+       'darkblue mart5px'
+    table4('mars1em','test_table1','border:1px solid rand') { %w(
+      this is a test
+      table1 with every individual
+      entry becoming populated into
+      the fat table here
+    )}
+  }
+  spacer
+  br
+  # ========================================================================= #
+  # Table with a pink border. This currently (May 2021) does not work
+  # correctly.
+  # ========================================================================= #
+  e 'Next, the css-class will be set to <b>a pink border</b> (and 3 elements) -
+  this element can also be <b>dragged</b>.'
+  Table.set_css_class 'bblack5 pink_border3 marl2em mart1em'
+  table(Table.to_s, 'drag_test_table2','') { %w(
+    cat dog hamster
+  )}
+  br
+  # ========================================================================= #
+  # A table with 3 members and a random-coloured border.
+  # ========================================================================= #
+  e 'Next a table with <b>3 members</b> (<i>car</i>, <i>bus</i>, <i>plane</i>) and a 
+  <b>8px random-colour border</b> - which can also be <b>dragged</b>.'
+  table('mars2em pad0_5em','drag_test_table3','border: 8px solid RANDOM_COLOUR') { %w(
+    car bus plane train ship boat
+  )}
+  br
+  Table.clear
+  # ========================================================================= #
+  # Simple table usage.
+  # ========================================================================= #
+  dataset = %w(
+    yo there how do you do this is another simple table without any fancy markup
+  )
+  e 'Next, a simple table usage with '+dataset.size.to_s+' elements:'
+  br
+  table { dataset }
+  br
+  Cyberweb.clear :div # Need to clear the <div> tag again.
+  div('mart1em') {
+    h2 'read_file_into_array()'
+    use_this_file = '../../doc/MOUSE.md'
+    e 'Next, as we are in the directory '+Dir.pwd+' we will also
+    demonstrate the method <b>read_file_into_array()</b>
+    on the file <b>'+use_this_file+'</b> - and we will also use a
+    <b>10px solid paleturquoise</b> border.'
+    target = File.expand_path(Dir.pwd+'/'+use_this_file)
+    array = File.readlines(target)
+    table('mars1em martb1em padt1em','test_table4','border: 10px solid paleturquoise') {
+      array
+    }
+    e 'Or alternatively with a <b>caption</b> on top:'
+    br
+    h3 target
+    table_with_caption(use_this_file,'mars1em mart1em padt1em','test_table4','border: 10px solid paleturquoise') {
+      array
+    }
+  }
+  br
+  # ========================================================================= #
+  # TD-padding to the left. We will hescape() the String.
+  # ========================================================================= #
+  result = hescape('Next, all <td> elements are ')+
+           "<b>padded to the left side</b>
+            via <b>Td.set_css_class 'padl3em'</b>."
+  br
+  e result.delete("\n")
+  Td.set_css_class 'padl3em'
+  table { %w(
+    yo there this time with modified td
+  )}
+  br
+  # ========================================================================= #
+  # Black border around each <td> element.
+  # ========================================================================= #
+  e hescape('The next table will show a black border around each
+    <td> element, by using the CSS class <b>bblack1</b>,')+'via <b>Td.set_css_class()</b>:'
+  br
+  Td.set_css_class 'bblack1'
+  table('mars2em') { %w(
+    yo there this time with modified td
+  )}
+  Td.clear
+  br
+  e htmlescape('Now we have reset <td> and we will use some border-spacing (10 pt):')
+  br
+  table('mars2em bspace10','','border:1px solid black') { %w( border-spacing def ghi jkl ) }
+  br
+  e htmlescape('To compare with, this is border-spacing with 1pt:')
+  br
+  table('mars2em bspace1','','border:1px solid black')  { %w( border-spacing def ghi jkl ) }
+  hr
+  # ========================================================================= #
+  # Which CSS classes have been found:
+  # ========================================================================= #
+  h3 'Which <b>CSS classes</b> have we found in this file
+     `<b class="orange">'+__FILE__.to_s+'</b>`?'
+  spacer
+  report_which_css_classes_were_found
+  spacer
+  div { view_source 'bblack1' }
+  br
+  hr
+  div {
+    h3 'Now testing video stuff, from Project MultimediaParadise.'
+    youtube_embedder 'https://www.youtube.com/watch?v=7L6uEstbd9Y',
+      275 # This is the embedding part - as above but more width.
+  }
+  webobject_params? # Show the params.
+  br
+  br
+  e 'Next, we test JQuery - click on it:'
+  ejavascript '
+  $(\'html, body\').animate({
+    scrollTop: $(".middle").offset().top
+ }, 2000);'
+  div(:onhover){
+    h3 'Test onhover here'
+  }
+  e 'Now we will test some links.'
+  link 'Testing'
+  A.set_css_class 'bold red larger' # Style them red.
+  link 'Testing'
+  br
+  hr
+  br
+  e htmlescape('Ok testing pink colour for all <span> tags
+  next via Span.set_css_class().')
+  Span.set_css_class 'marl1em pink bold larger'
+  span 'yo there'
+  br
+  spacer # Dot tag
+  h3 'Next testing the various in-built dot() methods'
+  div('marl3em') {
+    (1..12).each {|number|
+      ee number
+      sg(('dot'+number.to_s).to_sym,'marr5px')
+      ee N
+    }
+  }
+  spacer
+  br
+  h2 'Testing MathML next'
+  e 'a to the power of 5 (via the method <b>power_to()</b>'
+  ee power_to('a', 5)
+  spacer
+  div {
+    h3 'Next testing the creation of fancy CSS boxes (this may require
+    Firefox, though):'
+    ee generate_coloured_box
+    ee generate_coloured_box '','','Welcome Roebe!'
+    ee generate_coloured_box '','','Roebe!','200px'
+    ee generate_coloured_box 'darkgreen','','Roebe!!!'
+    ee generate_coloured_box 'orange','','Roebe!!!','400px'
+  }
+  h3 'Testing customized tags next:'
+  ee process_content('<ud>What is going on?</ud> (← This should appear underlined.)')
+  br
+  h3 'Play a local audio file (Conan_RidersOfDoom.ogg):'
+  audio '/Conan_RidersOfDoom.ogg'
+  br
+  # ========================================================================= #
+  # Display a colour table next
+  # ========================================================================= #
+  h3 'Displaying a colour-table next (only 10 colours though)','pad5px','',
+     'border-left: 5px solid orange'
+  h5 'colour_table() is currently disabled, as of May 2021. It may be '\
+     're-enabled at a later time.'
+  # colour_table(
+  #   { show: 10, css_style: 'width:40%; background-color: black; padding:1em; margin-left:3em' }
+  # )
+  br
+  spacer
+  e 'We will now test the various input tags.'
+  div('marl5em','input'){
+    h5 'input: <b>image</b>'
+    input :image
+    h5 'input: <b>button</b>'
+    input :button
+    h5 'input: <b>hidden</b>'
+    input :hidden
+    h5 'input: <b>submit</b>'
+    input :submit
+    h5 'input: <b>reset</b>'
+    input :reset
+    h5 'input: <b>text</b>'
+    input :text
+    h5 'input: <b>file_dialogue</b>'
+    input :file_dialogue
+    h5 'input: <b>file</b>'
+    e '<input type="file">'
+  }
+  br
+  h2 'Now testing embedded Javascript in an input field:'
+  #button 'Go Back From Whence You Came', on_click: 'go back in history'
+  h3 'This has been disabled for now (May 2021) - we need to re-enable it.'
+  # button 'Go Back From Whence You Came', on_click: 'go back in history'
+  # <input type="button" value="Go Back From Whence You Came!" onclick="history.back(-1)" />
+  br
+  # ========================================================================= #
+  # Testing the <input> tag next:
+  #
+  # .focus_with_yellow_background:focus is a CSS directive in this file
+  # here.
+  # ========================================================================= #
+  e html_ready('Next testing the <input> tag, first normal, then select-all
+  and then the same thing again but with input:focus and once more with
+  colour: deepskyblue and then with colour: salmon.')
+  Input.set_css_class "FS2em"
+  div('mars2em mart1em ind0px','input_testing'){ # rf cybertest input_testing
+    input :text, 'Hello world!'
+    input :text, 'Hello World! - select on click', :select_on_click
+    br
+    input :text, 'Hello world! - focus on yellow background', :focus_with_yellow_background
+    input :text, 'Hello World! - focus on yellow background and select on click', :focus_with_yellow_background, :select_on_click
+    br
+    input :text, 'Hello world! - focus with deepskyblue background', :focus_with_deepskyblue_background
+    input :text, 'Hello World! - focus with deepskyblue background and select on click', :focus_with_deepskyblue_background, :select_on_click
+    br
+    input :text, 'Hello world! - salmon background', :focus_with_salmon_background
+    input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
+    Input.clear # And clear it again.
+    # input(:text, 'Hello World!') { :select_on_click }
+  }
+  br
+  last_modified?
+  br
+  h2 'Next testing <b>RANDOM_BORDER_12PX</b>, in the div:'
+  div('mart1em pad1em','','RANDOM_BORDER_12PX') {
+    h3 hescape(
+      'This <div> here should have a random border, with a width of 12 pixel.'
+    )
+  }
+  div {
+    h2 'We will report which tag was last in use:'
+    report_which_tag_was_used_last 'marl2em'
+    h3 'We will report which tag was last in use:','','test_tag'
+    report_which_tag_was_used_last 'marl3em'
+  }
+  br
+  # ========================================================================= #
+  # The warning boxes will appear next.
+  # ========================================================================= #
+  spacer
+  h2 'Several warning boxes will appear next - they can be dragged:'
+  info_box    'Hi there how do you do','__drag__','','width:30%'
+  success_box 'Hi there how do you do','__drag__','','width:30%'
+  error_box   'Hi there how do you do','__drag__','','width:30%'
+  warning_box 'Hi there how do you do','__drag__','','width:30%'
+  spacer
+  br
+  spacer
+  div('bblack1 pad1em wid50','drag_one','background-color: white') { h2 'hello world!'}
+  br
+  p {
+    ee 'Hover here<span class="tooltip">Text</span>'
+  }
+  br
+  # ========================================================================= #
+  # === Testing xrandr
+  # ========================================================================= #
+  div {
+    e 'Testing xrandr:','larger'
+    spacer
+    result = `xrandr 2>&1`.to_s.chomp
+    pre(result)
+    spacer
+  }
+  field_with_legend 'Password','','field_with_legend' # http://localhost/PROGRAMMING_LANGUAGES/RUBY/src/web_object/test/tests.cgi#field_with_legend
+    e AUSRUFUNG+'Zum Einloggen benutzt man root/root'
+  cfieldset; drag :field_with_legend
+  # ========================================================================= #
+  # Show an embedded frame next:
+  # ========================================================================= #
+  embedded_frame :linux_cmd, width: '90%'
+  error_box 'Hi there how do you do ERROR', :drag,'','width:30%'
+  spacer
+  h2 'Will we use exceptions?'
+  lem verbose_truth(Cyberweb.use_exceptions?.to_s)
+  spacer
+  div {
+    e rating :one
+    e rating :two
+    e rating :three
+    e rating :four
+    e rating :five
+  }
+  e 'Some more tests:'
+  e Cyberweb.instance_variables
+  e Cyberweb.convert_umlaute
+  e Cyberweb.do_convert_umlaute
+  e Cyberweb.convert_umlaute
+  e Cyberweb.stag 'hi'
+  br
+  # ========================================================================= #
+  # Testing the popups (popup tag, popups tag). Disabled for now.
+  # popup 'Testing ...','1'
+  # popup 'Testing ...','2'
+  # popup 'Testing ...'
+  # ========================================================================= #
+  e 'There used to be some popups here, but they are disabled as of now. ^^^'
+  br
+  div('mar1em') {
+    e 'Now showing the environmental variables.'
+    spacer
+    e '(Disabled as of May 2021 - has to be re-enabled at a later time.)'
+    # display_environmental_variables
+    spacer
+    # ======================================================================= #
+    # Next we will show the configuration that we will use.
+    # ======================================================================= #
+    e 'Next we will show the <b>current configuration</b> in use for '+
+      'the Cyberweb project:'
+    br
+    # div('mars3em') { w.show_config }
+    spacer
+  }
+  br
+  e Cyberweb.escape_html('Next testing <quote> tag:')
+  quote 'Hello world!'
+  e 'Next testing dropdown()'
+  dropdown
+  br
+  h2 'Embedding a .pdf file next (disabled for now - it takes too long)','marb4px'
+  div('mars1_5em wid80') {
+    embed_pdf '../../../../../STUDIUM/EXAMS_RESULT/AAA_EXAM_RESULTS.pdf'
+  } if false
+  anm ' Also note that if you invoke any .cgi page via a
+  <b>?pdf</b> parameter, then it will be stored in a .pdf
+  file.'
+  br
+  abr 'SELF?pdf', content: 'SELF', css_class: 'darkblue BOLD mars2em'
+  spacer
+  e 'The logfile is stored at:'
+  lem2 '<b>'+Cyberweb.logfile?.to_s+'</b>'
+  spacer
+  # h2 'Now showing all the IDs that were found so far:'
+  # show_all_ids?
+  # spacer
+  # ========================================================================= #
+  # Dragula tag
+  # ========================================================================= #
+  h2 'Next testing Dragula'
+  div('BG_Black pad1em mars2em White'){
+    ee '
+    <ul>
+    <li>item 1</li>
+    <li>item 2</li>
+    <li>item 3</li>
+    <li>item 4</li>
+    <li>item 5</li>
+    <li>item 6</li>
+    <li>item 7</li>'
+    cul
+  }
+ee "<div class='parent'>
+    <label for='hy'>Drag handles float your cruise?</label>
+    <div class='wrapper'>
+      <div id='left-lovehandles' class='container'>
+        <div><span class='handle'>+</span>Move me, but you can use the plus sign to drag me around.</div>
+        <div><span class='handle'>+</span>Note that <code>handle</code> element in the <code>moves</code> handler is just the original event target.</div>
+      </div>
+      <div id='right-lovehandles' class='container'>
+        <div><span class='handle'>+</span>This might also be useful if you want multiple children of an element to be able to trigger a drag event.</div>
+        <div><span class='handle'>+</span>You can also use the <code>moves</code> option to determine whether an element can be dragged at all from a container, <em>drag handle or not</em>.</div>
+      </div>
+    </div>
+<code>
+dragula([document.getElementById(left), document.getElementById(right)], {
+  moves: function (el, container, handle) {
+    return handle.className === 'handle';
+  }
+});
+      </code>"
+  spacer
+  div {
+    h2 'Hide p tags, on click'
+    on_click_hide 'p'
+    ee '
+    <p>If you click on me, I will disappear.</p>
+    <p>Click me away!</p>
+    <p>Click me too!</p>'
+  }
+  div {
+    h2 'The Web Object'
+    pp Cyberweb.html_escape(web_object?)
+    spacer
+    pp web_object?.drag_all_images?
+    spacer
+  } if false # This can be re-enabled at a later time again.
+  e 'Testing some constants:'
+  e RUBY
+  e SQUARE_VIOLET if defined? SQUARE_VIOLET
+  br
+  snoweffect
+  br
+  # ========================================================================= #
+  # === Will we debug
+  # ========================================================================= #
+  div {
+    e 'Will we debug?'
+    e debug?.to_s
+  }
+  spacer
+  # ========================================================================= #
+  # === Show all greek letters
+  # ========================================================================= #
+  Cyberweb.show_greek_letters
+  spacer
+  # ========================================================================= #
+  # === Testing the SVG Addons                                      (svg tag)
+  # ========================================================================= #
+  if Object.const_defined? :SvgParadise
+    h3 'Next we will test the SVG Paradise add-ons:'
+    ee Cyberweb.circle
+    ee Cyberweb.circle(colour: :blue)
+    ee Cyberweb.circle(colour: :teal)
+    ee Cyberweb.circle(colour: :teal, radius: 3)
+    ee Cyberweb.circle(colour: :yellow, radius: 3, stroke_width: 8)
+    br
+    spacer
+    h5 'The next SVG "image" should be draggable'
+    ee '<svg id="a_random_svg_image" height="125" width="125"> <circle fill="darkseagreen" /> </svg>'
+    drag :a_random_svg_image
+  end
+  # ========================================================================= #
+  # === Resizable
+  # ========================================================================= #
+  div('ui-widget-content','resize_id_goes_here') {
+    h3 'Testing a resizable widget','ui-widget-header s1em'
+  }
+  ee '
+<b class="round_border1"></b>
+<b class="round_border2"></b>
+<b class="round_border3"></b>
+<b class="round_border4"></b>
+<div class="round_border_content">
+  <div>Round Border</div>
+</div>
+<b class="round_border4"></b>
+<b class="round_border3"></b>
+<b class="round_border2"></b>
+<b class="round_border1"></b>
+<br/>'
+  # ========================================================================= #
+  # === Test Table.alternate_backgrounds
+  # ========================================================================= #
+  e 'Next we try <b>Table.alternate_backgrounds</b>'
+  br
+  Table.alternate_backgrounds(%w( one two three four ), 'bblack1 pad0_5em')
+  Table.alternate_backgrounds(%w( one two three four ), 'bblack1')
+  Table.alternate_backgrounds(%w( one two three four ))
+  spacer
+  e sg(:sword)
+  spacer
+  div('mart1em') {
+    e 'Undurchsichtig:'
+    br
+    e '  opacity: 1.0;','css'
+    br
+    e 'Sehr durchsichtig:'
+    br
+    e '  opacity: 0.2;','css'
+    br
+    e 'Das kann man so anwenden:'
+    br
+    marl1em 'div { opacity: 1.0;}','css'
+    marl1em 'div:hover { opacity: 0.9;}','css'
+    br
+    e 'Beispiele hierzu:'
+    br
+    p('marl2em hover_test1') {
+      e 'With hover'
+    }
+    p('marl2em') {
+      e 'Without hover'
+    }
+    p('marl2em opa5_hover') {
+      e 'With hover again'
+    }
+    p('marl2em') {
+      e 'With javascript-hover this time',
+        javascript_code: 'onmouseover="this.style.background=\'lightblue\';"'
+    }
+  }
+  spacer
+  div {
+    e 'A background image can be modified like this, by
+    stating the path via <b>url()</b>:'
+    e IMG_CSS+'background-image:url("bilder\sonnenblume_blass.jpg");','css'
+    e IMG_CSS+'background-image: url("marble.gif") }','css'
+    e IMG_CSS+'background-image: url("../images/PC/MATRIX/MATRIX.png") ','css'
+    css_code 'background-repeat:no-repeat;'
+    css_code 'background-attachment:fixed;'
+    div('','','background-image: url(\"../../../../../../images/PC/MATRIX/MATRIX.png\")') {
+      h3 'Test'
+    }
+  }
+  spacer
+  # ========================================================================= #
+  # === CSS und pseudo-links
+  # ========================================================================= #
+  div {
+    h3 'CSS und pseudo-links'
+    e 'Die pseudo-classes kann man in Verbindung mit Klassen verwenden.'
+    br
+    e 'Beispiel:'
+    br
+    css_code '  a.nameofclass:hover { color: red; }'
+  }
+  spacer
+  ee '
+<table>
+<tr>
+
+<td class="dark_background">
+one
+</td>
+</tr>
+
+<tr>
+
+<td class="light_background">
+two
+</td>
+</tr>
+<tr>
+
+<td class="dark_background">
+three
+</td>
+</tr>
+<tr>
+
+<td class="light_background">
+four
+</td>
+</tr>'
+  ctable
+  spacer
+
+  # ========================================================================= #
+  # Some links
+  # ========================================================================= #
+  div('mars1em mart1em pad0_5em','link_collection','border:1px darkgreen dotted') {
+    h2 sg(:random,'marr0_5em','drag_random')+'Some Links:'
+    div('padl1em mars2em smaller') {
+      ee sg(:pfeil_rechts,'marr5px')
+        abr :local_webmin,
+             content: 'SELF_ONLY_NAME'
+      ee sg(:pfeil_rechts,'marr5px')
+        abr 'testing_email.cgi',
+             content: 'Test the email part of the Cyberweb Project'
+    }
+  }
+}}