cyberweb 0.5.225 → 0.6.17

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


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

Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +438 -238
  3. data/doc/README.gen +437 -237
  4. data/doc/todo/todo_for_the_cyberweb_project.md +6 -0
  5. data/examples/advanced/cursor_example/cursor_example.cgi +29 -0
  6. data/examples/advanced/draw_circle/draw_circle.cgi +13 -4
  7. data/examples/css/css_bubbles.html +8 -2
  8. data/examples/css/examples_with_borders/examples_with_borders.html +33 -0
  9. data/examples/javascript_and_jquery/copy_to_the_clipboard_example/copy_to_the_clipboard_example.html +80 -0
  10. data/images/cyberweb_theme.png +0 -0
  11. data/lib/cyberweb/base/misc.rb +67 -18
  12. data/lib/cyberweb/base_module/base_module.rb +66 -8
  13. data/lib/cyberweb/cascading_style_sheets/cursors.css +12 -5
  14. data/lib/cyberweb/cascading_style_sheets/default.css +20 -18
  15. data/lib/cyberweb/cascading_style_sheets/glow_effects.css +12 -6
  16. data/lib/cyberweb/cascading_style_sheets/misc.css +12 -1
  17. data/lib/cyberweb/generator/cgi.rb +3 -3
  18. data/lib/cyberweb/html_template/html_template.rb +172 -114
  19. data/lib/cyberweb/javascript/javascript.rb +34 -31
  20. data/lib/cyberweb/javascript_code/copy_to_the_clipboard.js +12 -0
  21. data/lib/cyberweb/jquery_module/jquery_module.rb +51 -0
  22. data/lib/cyberweb/modules/css_style.rb +27 -0
  23. data/lib/cyberweb/{favicon → modules}/favicon.rb +162 -33
  24. data/lib/cyberweb/requires/require_the_cyberweb_project.rb +6 -2
  25. data/lib/cyberweb/toplevel_methods/download_webpage.rb +16 -2
  26. data/lib/cyberweb/toplevel_methods/html_tables.rb +42 -30
  27. data/lib/cyberweb/toplevel_methods/log_directory.rb +11 -8
  28. data/lib/cyberweb/toplevel_methods/misc.rb +84 -47
  29. data/lib/cyberweb/toplevel_methods/path.rb +29 -8
  30. data/lib/cyberweb/toplevel_methods/temp_directory.rb +3 -1
  31. data/lib/cyberweb/version/version.rb +2 -2
  32. data/lib/cyberweb/web_images/map_symbol_to_image_location.rb +43 -7
  33. data/lib/cyberweb/web_object/favicon.rb +4 -106
  34. data/lib/cyberweb/web_object/html_tags.rb +133 -65
  35. data/lib/cyberweb/web_object/images.rb +20 -20
  36. data/lib/cyberweb/web_object/javascript_and_jquery.rb +39 -16
  37. data/lib/cyberweb/web_object/link.rb +18 -15
  38. data/lib/cyberweb/web_object/misc.rb +4158 -327
  39. data/lib/cyberweb/web_object/reset.rb +19 -15
  40. data/lib/cyberweb/web_object/run.rb +2 -0
  41. data/lib/cyberweb/web_object/web_object.rb +1 -3584
  42. data/lib/cyberweb/webmin/simple_forum/index.cgi +30 -0
  43. data/lib/cyberweb/webmin/simple_forum/simple_forum.rb +134 -0
  44. data/lib/cyberweb/yaml/http_status_codes.yml +3 -0
  45. data/lib/cyberweb/yaml/js_files_to_load.yml +6 -1
  46. data/test/html_template/html_template.rb +22 -3
  47. data/test/simple_tests/testing_the_javascript_component.cgi +32 -0
  48. data/test/simple_tests/testing_the_select_tag.cgi +7 -1
  49. metadata +13 -4
data/doc/README.gen CHANGED
@@ -1,7 +1,7 @@
1
1
  ADD_GOBOLINUX_AND_RUBY_HEADER
2
2
  ADD_TIME_STAMP
3
3
 
4
- <img src="https://i.imgur.com/aNpDmmz.png" style="margin-left: 1.2em">
4
+ <img src="https://i.imgur.com/aC4YzSk.png" style="margin-left: 1.2em">
5
5
 
6
6
  ## The (slightly convoluted) History of the Cyberweb project
7
7
 
@@ -32,23 +32,31 @@ the following:
32
32
  div {
33
33
  }
34
34
 
35
- In PHP this is not easily possible, because the syntax is more rigid,
36
- so ruby is better in this regard - more flexibility in this regard.
37
-
38
- During that **transition phase**, from **php** to **ruby**, the project
39
- was renamed several times - first to **web_foundation**, then to
40
- **cybersprawl**, then to **Cyberweb**, then to **web_object** and
41
- then back to **Cyberweb** again. I think the name **Cyberweb**
42
- is best among these alternatives. While **web_object** is the
43
- more technically correct and accurate term, as everything related
44
- to the www is handled via that object (or such objects), I prefer the
45
- name **Cyberweb** in general for the whole project - it sounds
46
- rather futuristic. The name **WebObject** is a good name too,
47
- though, as we attempt to describe a particular "web-page" as a
48
- "web-object", with specific functionality, basically.
35
+ In PHP this is not easily possible, because the syntax is more rigid.
36
+ Thus, at the least in regards to the syntax, ruby is better than
37
+ PHP - more flexibility syntax-wise is available to ruby users than
38
+ is for PHP users. This flexibility helps a <b>lot</b> when writing
39
+ more dynamic, and more succint, code.
40
+
41
+ During that **transition phase**, from **php** to **ruby**, the cyberweb
42
+ project was renamed several times as well - first to **web_foundation**,
43
+ then to **cybersprawl**, then to **Cyberweb**, then to **web_object** and
44
+ then back to **Cyberweb** again.
45
+
46
+ I think the name **Cyberweb** is the best choice best among these alternatives.
47
+ While **web_object** is the more technically correct and accurate term, as
48
+ everything related to the www is handled via that object (or such objects),
49
+ I prefer the name **Cyberweb** in general for the whole project - it sounds
50
+ rather futuristic. The name **WebObject** is a good name too, though, as
51
+ we attempt to describe a particular "web-page" as a "web-object", with
52
+ specific functionality, basically. The WebObject not only describes the
53
+ raw HTML code or combines it with CSS, but it can be thought of as a
54
+ higher hierarchy abstraction. In principle we could generate a .pdf
55
+ file from a WebObject too, so the functionality is not limited to
56
+ "merely" HTML or CSS only.
49
57
 
50
58
  **class WebObject** was originally the very main class I was
51
- using in PHP to describe my local knowledge base, an "app" where
59
+ using in PHP to describe my <b>local knowledge base</b>, an "app" where
52
60
  I kept useful information bits about linux, and ruby, and other
53
61
  parts together. The code for this project in PHP was simpler, and
54
62
  also uglier though, and less flexible. (Actually the name was
@@ -190,7 +198,7 @@ hopefully more "modern" as well, as I work on improving the documentation
190
198
  in the next step (no possibility to have more users without **high
191
199
  quality documentation**).
192
200
 
193
- Since June 2021 two new goals were added to this project:
201
+ Since <b>June 2021</b> two new goals were added to this project:
194
202
 
195
203
  - It will contain documentation in regards to useful CSS knowledge.
196
204
  - It will contain documentation in regards to useful JavaScript knowledge.
@@ -205,24 +213,171 @@ presented (and presentable) in a single project as well. This means
205
213
  that there may be pure CSS, pure HTML and pure JavaScript
206
214
  examples distributed within the Cyberweb project as well.
207
215
 
208
- ## Features
216
+ ## Features of the Cyberweb project
209
217
 
210
- For a more complete documentation of the above features, please check
211
- out the file FEATURES.
218
+ The cyberweb project attempts to address multiple different use
219
+ cases, so it is difficult to provide an overview over its
220
+ features; in part also due to its fuzzy history.
212
221
 
213
- - You can select various different default CSS templates. They will be
214
- stored in the CSS/ directory by default. To use them, pass a symbol
215
- to the method invocation for css_style=(). They are numbered in
216
- succession, so template1, template2 etc..
222
+ However had, this subsection will at the least try to name <b>some</b>
223
+ of its features - keep in mind that ultimately it is about the
224
+ use cases <b>you</b> may have that matter more.
225
+
226
+ In no particular order, the cyberweb gem attempts to solve these
227
+ problems:
228
+
229
+ - Provide support for rack, sinatra and .cgi files for "out of the
230
+ box" working with web-related technology in general.
231
+
232
+ - Provide numerous helper methods in various classes (most importantly
233
+ in Cyberweb::Base) to help build web-applications.
234
+
235
+ - Be able to generate standalone .html files.
236
+
237
+ - Provide a unified DSL over web-related use cases.
238
+
239
+ - Support CSS-related aspects, including auto-generation of
240
+ CSS code and re-using CSS templates.
241
+
242
+ - Aim to provide a webmin-clone.
243
+
244
+ - Aim to provide a wiki.
245
+
246
+ - Aim to provide a webforum.
247
+
248
+ And many more use cases that are somehow related to these goals.
249
+
250
+ Not all of these use cases currently work fully; the cyberweb gem
251
+ in many ways is also there to help me experiment with different
252
+ ideas, and try to see what could be done to make these work.
253
+
254
+ A word about "CSS templates": you can select various different default
255
+ CSS templates. They will be stored in the <b>cascading_style_sheets/</b>
256
+ directory by default. To use them, pass a symbol to the method
257
+ invocation for css_style=(). They are numbered in succession, so
258
+ template1, template2 etc..
217
259
 
218
260
  Example for this on the main w object:
219
261
 
220
- w.css_style = :template1
262
+ w.css_style = :template1
221
263
 
222
264
  This will default to the template1.
223
-
265
+
266
+ Alternatively since October 2022 you can simply use this, if you work
267
+ with a WebObject:
268
+
269
+ template1 '
270
+ # your CSS rules go in here
271
+ '
272
+
273
+ This will pull in the first template (template1) and then add the
274
+ CSS rules towards that.
275
+
224
276
  Currently the way to add new templates is to expand the case menu.
225
277
 
278
+ ## Adapting the cyberweb gem to your use cases
279
+
280
+ Presently it may be a bit difficult to adjust the cyberweb gem to
281
+ your use cases. The primary reason for this is that the cyberweb
282
+ gem was originally started to support my use cases, as well as
283
+ making available images that I have collected over many years.
284
+ So that explaines why the method img(), for instance, is defaulting
285
+ to a fairly weird use case, which means that it may not work for
286
+ your use cases initially. In the long run I intend to remedy this
287
+ situation, but for the time being, you have to accept that some
288
+ parts of the cyberweb gem are not useful for you.
289
+
290
+ Nonetheless, I decided to add this subsection to document some
291
+ things, and provide some help to new users, until eventually
292
+ the situation improves so that people can just install the gam
293
+ and "it will work", as-is.
294
+
295
+ Without further ado, let's clarify some things here next.
296
+
297
+ The cyberweb gem needs access to a temporary directory.
298
+
299
+ On Linux this is typically <b>/tmp/</b>. The cyberweb gem may
300
+ create a subdirectory there, called cyberweb/, and then copy
301
+ some files into that subdirectory - in particular JavaScript
302
+ .js files.
303
+
304
+ To query the base directory in use you can call this method:
305
+
306
+ Cyberweb.temp_directory?
307
+
308
+ If you want to use another temporary directory then you can
309
+ use this method:
310
+
311
+ Cyberweb.set_temp_directory('/opt/')
312
+
313
+ You need to make the permission bits on that directory
314
+ possibly to be modified, such as /tmp/ on Linux normally
315
+ is able to be modified by <b>group and user nobody</b> (or,
316
+ the user that runs the webserver; in my case this is typically
317
+ lighty, as I use lighttpd as my primary webserver).
318
+
319
+ The code for this functionality can be found here:
320
+
321
+ cyberweb/toplevel_methods/temp_directory.rb
322
+
323
+ Or the direct require command:
324
+
325
+ require 'cyberweb/toplevel_methods/temp_directory.rb'
326
+
327
+ This is a very important first step to do, to adjust
328
+ the temp directory to your use case.
329
+
330
+ I may add more code support for this step in the future;
331
+ for now (October 2022) I just wanted to document this,
332
+ so people know where to look for changes in this regard.
333
+
334
+ ## Include the cyberweb project on a website
335
+
336
+ To include the cyberweb project on a website, in your .cgi script
337
+ for instance, do use this line:
338
+
339
+ require 'cyberweb/autoinclude'
340
+
341
+ You can then populate the @web_object object, which resides in the
342
+ main Cyberweb-namespace, and which is also aliased through a
343
+ convenience method called w(). If you autoinclude Cyberweb
344
+ then you can use the w() method directly.
345
+
346
+ This allows you to describe a webpage, such as by issuing the
347
+ following code:
348
+
349
+ w {
350
+ title 'My first homepage'
351
+ body_css 'mar1em'
352
+ h2 'Hello World!'
353
+ use_jquery
354
+ }
355
+
356
+ Note that this should happen on separate lines - the description
357
+ here for the gem does not replace newlines with the html <br> tag.
358
+
359
+ Inside **w {}** you can issue special instructions, such as use_jquery
360
+ or disable_webimages. The former allows us to use jquery, the latter
361
+ disables webimages. (Webimages are small icons that I find myself
362
+ to use a lot. If you wish to use these images, have a look at
363
+
364
+ http://shevegen.square7.ch/STD.tar.xz
365
+
366
+ )
367
+
368
+ ## Proper (default) order of arguments to many methods in the Cyberweb project
369
+
370
+ The Cyberweb project uses quite a few methods that have more than 4
371
+ or 5 parameters.
372
+
373
+ The typical order for these methods is the following:
374
+
375
+ (**1**) the content belonging to the tag at hand
376
+ (**2**) the css class that is to be used for that tag (defaults to class WebTag)
377
+ (**3**) the id to that HTML element (optional)
378
+ (**4**) the css style for that tag (optional)
379
+ (**5**) javascript code to that tag (optional)
380
+
226
381
  ## CSS templates
227
382
 
228
383
  CSS templates can be designated by assigning to a symbol, such as
@@ -280,19 +435,6 @@ display the above notification for images not found. If it is set
280
435
  to normal or lower than that, the web_object project will not
281
436
  display that warning.
282
437
 
283
- ## Proper (default) order of arguments to many methods in the Cyberweb project
284
-
285
- The Cyberweb project uses quite a few methods that have more than 4
286
- or 5 parameters.
287
-
288
- The typical order for these methods is the following:
289
-
290
- (**1**) the content belonging to the tag at hand
291
- (**2**) the css class that is to be used for that tag (defaults to class WebTag)
292
- (**3**) the id to that HTML element (optional)
293
- (**4**) the css style for that tag (optional)
294
- (**5**) javascript code to that tag (optional)
295
-
296
438
  ## Greek letters
297
439
 
298
440
  The old greek letters are specified via shortcuts such as <b>&sigma;</b>
@@ -305,18 +447,6 @@ the following command:
305
447
 
306
448
  Cyberweb.show_greek_letters
307
449
 
308
- ## SVG
309
-
310
- If you wish to make use of SVG it is recommended to install the
311
- **svg_paradise** project. Then, you can use it through Cyberweb
312
- such as in the following case:
313
-
314
- ee Cyberweb.circle
315
-
316
- This will output a SVG circle. Do note that this can be customized;
317
- simply have a look for the SVG Paradise project for more
318
- documentation pertaining to this part.
319
-
320
450
  ## Javascript-support in the Cyberweb project
321
451
 
322
452
  Have a look at the subdirectory called **javascript/**.
@@ -361,40 +491,6 @@ Since as of **April 2019**, the old .cgi approach will be extended;
361
491
  while .cgi will be always supported in the Cyberweb project, an
362
492
  approach similar to **sinatra** will eventually be adopted as well.
363
493
 
364
- ## Include the cyberweb project on a website
365
-
366
- To include the cyberweb project on a website, in your .cgi script
367
- for instance, do use this line:
368
-
369
- require 'cyberweb/autoinclude'
370
-
371
- You can then populate the @web_object object, which resides in the
372
- main Cyberweb-namespace, and which is also aliased through a
373
- convenience method called w(). If you autoinclude Cyberweb
374
- then you can use the w() method directly.
375
-
376
- This allows you to describe a webpage, such as by issuing the
377
- following code:
378
-
379
- w {
380
- title 'My first homepage'
381
- body_css 'mar1em'
382
- h2 'Hello World!'
383
- use_jquery
384
- }
385
-
386
- Note that this should happen on separate lines - the description
387
- here for the gem does not replace newlines with the html <br> tag.
388
-
389
- Inside **w {}** you can issue special instructions, such as use_jquery
390
- or disable_webimages. The former allows us to use jquery, the latter
391
- disables webimages. (Webimages are small icons that I find myself
392
- to use a lot. If you wish to use these images, have a look at
393
-
394
- http://shevegen.square7.ch/STD.tar.xz
395
-
396
- )
397
-
398
494
  ## Configuration - and editing the configuration file (which is a yaml file)
399
495
 
400
496
  Keep in mind that you can modify a lot of the configuration that
@@ -536,7 +632,43 @@ I sometimes use the pre-tag, and display numbers in a table-fashion,
536
632
  for where it may be useful to use a monospaced font, so that the
537
633
  alignment of the text is easier.
538
634
 
539
- ## Setting a title on a webobject
635
+ ## The WebObject (Cyberweb::WebObject)
636
+
637
+ The following subsection will contain information pertaining to
638
+ the most important class of this gem: <b>WebObject</b>.
639
+
640
+ This is the primary class that is used for describing a
641
+ web-application (or, in oldschool parlance, a HTML object
642
+ or HTML page).
643
+
644
+ ## Setting the date-of-creation for a web-app based on WebObject
645
+
646
+ Since as of **October 2021** you can use:
647
+
648
+ created_when '20.08.2021'
649
+
650
+ To **indicate when the webpage at hand has been created**. This will then
651
+ add a meta-element to the page, which is roughly equivalent to:
652
+
653
+ <meta name="DCTERMS.created" scheme="DCTERMS.ISO8601" content="2010-03-17T13:31:50"/>
654
+
655
+ I am not sure whether this is super-useful or not, but I wanted
656
+ to add a method that keeps track of the creation-time of
657
+ web-apps based on web_object, which is the main reason why
658
+ this functionality was added. At the least it helps me remember
659
+ when a web-app was created.
660
+
661
+ ### Default hyperlinks
662
+
663
+ The default styling for a-tags in HTML is to start with
664
+ text-decoration: none, and upon a <b>hover</b> event
665
+ change towards text-decoration: underline.
666
+
667
+ Since this is so commonly used, the method
668
+ <b>.default_hyperlink_behaviour()</b> can be used
669
+ to add the CSS rules for this, as-is.
670
+
671
+ ### Setting a title on a webobject
540
672
 
541
673
  You can set a title on the default webobject via:
542
674
 
@@ -907,7 +1039,7 @@ Normal text usually equates to a font-weight value of
907
1039
  <b>400</b> whereas bold text equals to a value of
908
1040
  <b>700</b>.
909
1041
 
910
- ## Caret cursor in CSS
1042
+ ## Caret cursor in CSS and cursors in general
911
1043
 
912
1044
  You can style the colour of the cursor that appears in an
913
1045
  input-field.
@@ -930,6 +1062,14 @@ This may then look like this:
930
1062
 
931
1063
  The relevant part is the red cursor in the ~middle in that input field.
932
1064
 
1065
+ If you have a use case for a web-page having some different cursor,
1066
+ you can use this for a given Cyberweb::WebObject:
1067
+
1068
+ cursor :wait # signals that the program is busy.
1069
+ cursor :help # signals that help-information is available.
1070
+ cursor :crosshair # signals that a selection is possible/needed.
1071
+ cursor :grab # signals that this element can be grabbed via the mouse/pointer device.
1072
+
933
1073
  ## CSS helper code and how it relates to the Cyberweb project
934
1074
 
935
1075
  This subsection attempts to detail how the **cyberweb** project
@@ -2274,23 +2414,27 @@ is via:
2274
2414
  doc {
2275
2415
  }
2276
2416
 
2277
- This **doc** refers to document and is ultimately just a <div>
2278
- tag. So I put my web-applications into a big <div> tag
2417
+ This **doc** refers to document and is ultimately just a &lt;div>
2418
+ tag. So I put my web-applications into a big &lt;div> tag
2279
2419
  ultimately.
2280
2420
 
2281
- Since late 2020 I am also using language variants such as:
2421
+ Since as of late <b>2020</b> I am also using language variants such
2422
+ as:
2282
2423
 
2283
2424
  english {
2284
2425
  }
2426
+
2285
2427
  # or
2428
+
2286
2429
  german {
2287
2430
  }
2288
2431
 
2289
- To denote a webpage in german, or in english. Not as
2290
- replacement for doc {}, but as the start point in
2291
- general.
2432
+ The latter is used for denoting that this webpage is written
2433
+ in german, and the former is used when the webpage is written in
2434
+ english. This is not a replacement for doc {}, but is the starting
2435
+ point I use for describe a web-object in general.
2292
2436
 
2293
- In June 2021 this was extended in that I added the method
2437
+ In <b>June 2021</b> this was extended in that I added the method
2294
2438
  called:
2295
2439
 
2296
2440
  doc_skeleton
@@ -2298,20 +2442,22 @@ called:
2298
2442
  The word <b>skeleton</b> refers to a separate file, the
2299
2443
  skeleton of the web-application.
2300
2444
 
2301
- Say that you have five called index.rb, index.cgi,
2445
+ Say that you have <b>five</b> files called index.rb, index.cgi,
2302
2446
  index.sinatra, index_english.md and index.german.md.
2303
2447
 
2304
2448
  This allows us to read in either the english or the german
2305
- language.
2449
+ language, as-is.
2306
2450
 
2307
2451
  To let the cyberweb project guess on its own, consider
2308
2452
  using a variant via the following Symbol:
2309
2453
 
2310
2454
  doc_skeleton(:english_or_german)
2311
2455
 
2312
- This currently defaults to german. You can pass ?use_english
2313
- or ?english to the .cgi page to overrule this and force
2314
- the web-application to view the english content instead.
2456
+ This currently defaults to <b>german</b>. You can pass <b>?use_english</b>
2457
+ or <b>?english</b> to the .cgi page to overrule this and force
2458
+ the web-application to view the english content instead. That way
2459
+ the user can change languages, as-is. A bit cumbersome for now,
2460
+ but possible.
2315
2461
 
2316
2462
  In order for this to work, the corresponding .md file must
2317
2463
  exist, e. g. **index_english.md** or **index_german.md**.
@@ -2320,12 +2466,12 @@ Note that this is currently (June 2021) quite experimental,
2320
2466
  but I wanted to add the feature that we can offer different
2321
2467
  languages. In the long run I may adapt this approach, to
2322
2468
  make it easier to use different languages on any given
2323
- weba-application, but for now I only use this in the
2324
- **roebe** gem. For example, luft.cfg under **roebe/www/luft/**
2469
+ web-application, but for now I only use this in the
2470
+ **roebe** gem. For example, <b>luft.cfg</b> under **roebe/www/luft/**
2325
2471
  will show this. It may not work on your home system,
2326
- though, as it is catered to my home setup. But it shows
2327
- how this could be done in theory. So, who knows - in the
2328
- long run I may integrate this as a 'default' feature.
2472
+ though, as it is catered to my home setup currently. But it
2473
+ shows how this could be done in theory. So, who knows - in
2474
+ the long run I may integrate this as a 'default' feature.
2329
2475
 
2330
2476
  Note that **?use_german** will work as well, to force
2331
2477
  the **_german.md** file to be read.
@@ -2796,82 +2942,6 @@ You can add content via CSS like this:
2796
2942
  I don't think this is too overly useful when you can dynamically
2797
2943
  generate the web-app as-is, though.
2798
2944
 
2799
- ## Cyberweb::HtmlTemplate
2800
-
2801
- class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
2802
- specific content.
2803
-
2804
- Let's show a specific example how this may be used:
2805
-
2806
- require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
2807
-
2808
- Cyberweb::HtmlTemplate[
2809
- title: 'Status',
2810
- body: '<pre style="font-size:150%">'+
2811
- ::EnvironmentInformation.return_the_most_important_info+
2812
- '</pre>'
2813
- ].to_s
2814
-
2815
- This would represent a "full" HTML page, as a String.
2816
-
2817
- It is possible, since as of **18.06.2021**, to pass **CSS classes**
2818
- into this, via:
2819
-
2820
- css_classes:
2821
-
2822
- For example, passing 'darkblue' to that key means that the CSS
2823
- class 'darkblue' will be made available, which ultimately comes
2824
- down to <b>color: darkblue</b>.
2825
-
2826
- I needed this functionality to pull in only the CSS classes
2827
- that I use on a particular page generated by class
2828
- Cyberweb::HtmlTemplate.
2829
-
2830
- Various additional entries are available. For example, if
2831
- you want to modify the css-style in use for the body tag
2832
- then you can simply use the following variant:
2833
-
2834
- body_css_style: 'background-color:#DFD1FF'
2835
-
2836
- In the long run the goal here is to extend class HtmlTemplate
2837
- in such a way that all html-generation used within the
2838
- Cyberweb project can be handled by it.
2839
-
2840
- You can also pass ad-hoc CSS style into it. Example:
2841
-
2842
- Cyberweb::HtmlTemplate[
2843
- body: _, # The content of <body> goes in here.
2844
- css_style: '
2845
- img {
2846
- border: 8px solid #black;
2847
- padding: 2px;
2848
- }
2849
- ' # and ^^^ there you can put your CSS rules into class HtmlTemplate
2850
- ].to_s
2851
-
2852
- You can also pass in some ad-hoc javascript code via:
2853
-
2854
- javascript_code:
2855
-
2856
- All this does is add the proper &lbrack;script> tag to it.
2857
-
2858
- You can also specifically add jquery support for the HtmlTemplate.
2859
- The following example shows how this can be done:
2860
-
2861
- html_template = Cyberweb::HtmlTemplate[
2862
- title: 'This is a test-page,
2863
- body: HtmlTags.p('Another test.','','','font-size:1.8em'),
2864
- use_jquery: true
2865
- ].to_s
2866
-
2867
- puts html_template
2868
-
2869
- Typing <b>Cyberweb::HtmlTemplate[]</b> is quite cumbersome, though. Since
2870
- as of October 2022 a simpler toplevel API is available:
2871
-
2872
- Cyberweb.html_template
2873
- Cyberweb.html_template(body_content) # The String you pass here will be the body of the HTML page.
2874
-
2875
2945
  ## Embed youtube videos and videos in general
2876
2946
 
2877
2947
  You can embed youtube videos, thanks to the MultimediaParadise
@@ -3113,23 +3183,6 @@ local file, if said remote website contains german umlauts.
3113
3183
 
3114
3184
  In fact this was precisely the reason why that method was added.
3115
3185
 
3116
- ## Setting the date-of-creation for a web-app based on WebObject
3117
-
3118
- Since as of **October 2021** you can use:
3119
-
3120
- created_when '20.08.2021'
3121
-
3122
- To **indicate when the webpage at hand has been created**. This will then
3123
- add a meta-element to the page, which is roughly equivalent to:
3124
-
3125
- <meta name="DCTERMS.created" scheme="DCTERMS.ISO8601" content="2010-03-17T13:31:50"/>
3126
-
3127
- I am not sure whether this is super-useful or not, but I wanted
3128
- to add a method that keeps track of the creation-time of
3129
- web-apps based on web_object, which is the main reason why
3130
- this functionality was added. At the least it helps me remember
3131
- when a web-app was created.
3132
-
3133
3186
  ## autogenerated_system_settings.yml
3134
3187
 
3135
3188
  The file <b>cyberweb/yaml/autogenerated_system_settings.yml</b> is created
@@ -3837,46 +3890,6 @@ Including the namespace for <b>Cyberweb::Objectified::Mask</b> is
3837
3890
  done mostly for convenience, so that the user does not have to
3838
3891
  manually include this module.
3839
3892
 
3840
- ## Drawing a coloured circle via CSS
3841
-
3842
- You can draw a circle via CSS.
3843
-
3844
- Let's first show the CSS rules for this:
3845
-
3846
- div.circle {
3847
- width: 300px;
3848
- height: 300px;
3849
- background: #2762e9;
3850
- border-radius: 50%;
3851
- }
3852
-
3853
- Next you can use HTML to draw the circle:
3854
-
3855
- <div class="circle"></div>
3856
-
3857
- That's it.
3858
-
3859
- I found this to be simple and potentially useful, so I added
3860
- an API to the cyberweb project to support this.
3861
-
3862
- The API goes like this:
3863
-
3864
- Cyberweb.draw_circle()
3865
- Cyberweb.draw_circle(width: 200)
3866
- Cyberweb.draw_circle(width: 200, height: 500)
3867
- Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue)
3868
- Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue, border_radius: '30%')
3869
-
3870
- Pass a Hash to the method. Note that this will return the CSS rule
3871
- as-is, as well as return the div-tag String. Cyberweb::BaseModule
3872
- will directly embed this if you use <b>draw_circle()</b>.
3873
-
3874
- Here is a partial screenshot showing three such examples; only the
3875
- second example has a border-radius of 50%. See also the example
3876
- <b>cyberweb/examples/advanced/draw_circle/draw_circle.cgi</b>.
3877
-
3878
- <img src="https://i.imgur.com/k5wFnwn.png" style="margin: 1em">
3879
-
3880
3893
  ## JQuery
3881
3894
 
3882
3895
  The Cyberweb framework/toolset favours the use of jquery. Presently,
@@ -4457,6 +4470,193 @@ The general syntax goes like this:
4457
4470
  @keyframes name_here {
4458
4471
  }
4459
4472
 
4473
+ ## module Cyberweb::JqueryModule
4474
+
4475
+ <b>module Cyberweb::JqueryModule</b> is used to enable or disable support
4476
+ for jquery. Not all classes in the cyberweb gem make use of this module
4477
+ right now - notably class <b>Cyberweb::WebObject</b> does not use this
4478
+ module as of yet. This is planned at some later time in the future, as
4479
+ some code has to be re-written, in order to make use of this new
4480
+ module.
4481
+
4482
+ The only class that uses module <b>Cyberweb::JqueryModule</b> right
4483
+ now is <b>class Cyberweb::HtmlTemplate</b>.
4484
+
4485
+ ## CSS Borders
4486
+
4487
+ CSS supports different borders.
4488
+
4489
+ You can control various different aspects here, such as the
4490
+ width of the border, or the style of the border.
4491
+
4492
+ The available <b>border-style properties</b> are as follows:
4493
+
4494
+ dotted - Defines a dotted border.
4495
+ dashed - Defines a dashed border.
4496
+ solid - Defines a solid border.
4497
+ double - Defines a double border.
4498
+ groove - Defines a 3D grooved border. This effect depends on the border-color value.
4499
+ ridge - Defines a 3D ridged border. This effect depends on the border-color value.
4500
+ inset - Defines a 3D inset border. This effect depends on the border-color value.
4501
+ outset - Defines a 3D outset border. This effect depends on the border-color value.
4502
+ none - Defines no border.
4503
+ hidden - Defines a hidden border.
4504
+
4505
+ The following paragraph shows how you can use this:
4506
+
4507
+ p.dotted {border-style: dotted;}
4508
+ p.dashed {border-style: dashed;}
4509
+ p.solid {border-style: solid; }
4510
+ p.double {border-style: double;}
4511
+ p.groove {border-style: groove;}
4512
+ p.ridge {border-style: ridge; }
4513
+ p.inset {border-style: inset; }
4514
+ p.outset {border-style: outset;}
4515
+ p.none {border-style: none; }
4516
+ p.hidden {border-style: hidden;}
4517
+ p.mix {border-style: dotted dashed solid double;}
4518
+
4519
+ Interestingly enough, if you do not specify a color for
4520
+ the border via border-color then this will default to <b>black</b>.
4521
+
4522
+ ## Cyberweb::HtmlTemplate
4523
+
4524
+ class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
4525
+ specific content.
4526
+
4527
+ Let's show a specific example how this may be used:
4528
+
4529
+ require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
4530
+
4531
+ Cyberweb::HtmlTemplate[
4532
+ title: 'Status',
4533
+ body: '<pre style="font-size:150%">'+
4534
+ ::EnvironmentInformation.return_the_most_important_info+
4535
+ '</pre>'
4536
+ ].to_s
4537
+
4538
+ This would represent a "full" HTML page, as a String.
4539
+
4540
+ It is possible, since as of **18.06.2021**, to pass **CSS classes**
4541
+ into this, via:
4542
+
4543
+ css_classes:
4544
+
4545
+ For example, passing 'darkblue' to that key means that the CSS
4546
+ class 'darkblue' will be made available, which ultimately comes
4547
+ down to <b>color: darkblue</b>.
4548
+
4549
+ I needed this functionality to pull in only the CSS classes
4550
+ that I use on a particular page generated by class
4551
+ Cyberweb::HtmlTemplate.
4552
+
4553
+ Various additional entries are available. For example, if
4554
+ you want to modify the css-style in use for the body tag
4555
+ then you can simply use the following variant:
4556
+
4557
+ body_css_style: 'background-color:#DFD1FF'
4558
+
4559
+ In the long run the goal here is to extend class HtmlTemplate
4560
+ in such a way that all html-generation used within the
4561
+ Cyberweb project can be handled by it.
4562
+
4563
+ You can also pass ad-hoc CSS style into it. Example:
4564
+
4565
+ Cyberweb::HtmlTemplate[
4566
+ body: _, # The content of <body> goes in here.
4567
+ css_style: '
4568
+ img {
4569
+ border: 8px solid #black;
4570
+ padding: 2px;
4571
+ }
4572
+ ' # and ^^^ there you can put your CSS rules into class HtmlTemplate
4573
+ ].to_s
4574
+
4575
+ You can also pass in some ad-hoc javascript code via:
4576
+
4577
+ javascript_code:
4578
+
4579
+ All this does is add the proper &lbrack;script> tag to it.
4580
+
4581
+ You can also specifically add jquery support for the HtmlTemplate.
4582
+ The following example shows how this can be done:
4583
+
4584
+ html_template = Cyberweb::HtmlTemplate[
4585
+ title: 'This is a test-page,
4586
+ body: HtmlTags.p('Another test.','','','font-size:1.8em'),
4587
+ use_jquery: true
4588
+ ].to_s
4589
+
4590
+ puts html_template
4591
+
4592
+ You can also pass in a favicon to use such as shown in the following
4593
+ example:
4594
+
4595
+ Cyberweb::HtmlTemplate[
4596
+ title: 'Current Time',
4597
+ body: '<b>'+Roebe::Time.hh_mm_ss+' '+Roebe::Time.dd_mm_yyyy+'</b>',
4598
+ favicon: BeautifulUrl[:time_favicon]
4599
+ ].to_s
4600
+
4601
+ Typing <b>Cyberweb::HtmlTemplate[]</b> is quite cumbersome, though. Since
4602
+ as of October 2022 a simpler toplevel API is available:
4603
+
4604
+ Cyberweb.html_template
4605
+ Cyberweb.html_template(body_content) # The String you pass here will be the body of the HTML page.
4606
+
4607
+ ## SVG
4608
+
4609
+ If you wish to make use of SVG it is recommended to install the
4610
+ **svg_paradise** project. Then, you can use it through Cyberweb
4611
+ such as in the following case:
4612
+
4613
+ ee Cyberweb.circle
4614
+
4615
+ This will output a SVG circle. Do note that this can be customized;
4616
+ simply have a look for the SVG Paradise project for more
4617
+ documentation pertaining to this part.
4618
+
4619
+ ## Drawing a coloured circle via CSS
4620
+
4621
+ You can draw a circle via <b>CSS</b>.
4622
+
4623
+ Let's first show the pure CSS rules for this functionality:
4624
+
4625
+ div.circle {
4626
+ width: 300px;
4627
+ height: 300px;
4628
+ background: #2762e9;
4629
+ border-radius: 50%;
4630
+ }
4631
+
4632
+ Next you can use HTML to actually "draw" the circle, as-is:
4633
+
4634
+ <div class="circle"></div>
4635
+
4636
+ That's it.
4637
+
4638
+ I found this to be simple and potentially useful, so I added
4639
+ an API to the cyberweb project to support this.
4640
+
4641
+ The toplevel API goes like this:
4642
+
4643
+ Cyberweb.draw_circle()
4644
+ Cyberweb.draw_circle(width: 200)
4645
+ Cyberweb.draw_circle(width: 200, height: 500)
4646
+ Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue)
4647
+ Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue, border_radius: '30%')
4648
+
4649
+ Pass a <b>Hash</b> into the method. Note that this will return the CSS
4650
+ rule as-is, as well as return the div-tag String. <b>Cyberweb::BaseModule</b>
4651
+ will directly embed this if you use the method <b>draw_circle()</b>.
4652
+
4653
+ Here is a partial screenshot showing three such examples; only the
4654
+ second example has a border-radius of <b>50%</b>. See also the
4655
+ distributed example at <b>cyberweb/examples/advanced/draw_circle/draw_circle.cgi</b>
4656
+ showcasing this functionality.
4657
+
4658
+ <img src="https://i.imgur.com/k5wFnwn.png" style="margin: 1em">
4659
+
4460
4660
  ## Useful quotes when designing websites and web-apps
4461
4661
 
4462
4662
  The following subsection collects a few <b>interesting statements</b> -