cyberweb 0.12.35

data/lib/cyberweb/javascript/drag_and_drop.rb

@@ -0,0 +1,108 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# require 'cyberweb/javascript/drag_and_drop.rb'
+# Cyberweb.return_javascript_drag_and_drop(:drag_foobar)
+# Cyberweb.return_javascript_drag_and_drop :foobar
+# =========================================================================== #
+module Cyberweb
+
+  require 'cyberweb/toplevel_methods/registered_ids.rb'
+  require 'cyberweb/javascript/print_javascript.rb'
+  require 'cyberweb/javascript/return_javascript.rb'
+
+  # ========================================================================= #
+  # === Cyberweb.return_javascript_drag_and_drop
+  # ========================================================================= #
+  def self.return_javascript_drag_and_drop(
+      this_id,
+      use_jquery = true
+    )
+    this_id = this_id.to_s
+    case this_id # Treat a few IDs in a special.
+    # ======================================================================= #
+    # === last
+    # ======================================================================= #
+    when 'last',
+         'last_id',
+         'last_id_used',
+         'last_image'
+      array_registered_ids = array_registered_ids?
+      this_id = array_registered_ids[-1] if array_registered_ids.size > 0
+    end
+    # ======================================================================= #
+    # Next we output the javascript-code from jquery which enables the
+    # draggable action.
+    # ======================================================================= #
+    if use_jquery
+      return return_javascript(
+        '$(function() {'+N+
+        '  $( "#'+this_id+'" ).draggable();'+N+
+        '});'
+      )
+    else
+      ''
+    end
+  end
+
+  # ========================================================================= #
+  # === javascript_drag_and_drop
+  # ========================================================================= #
+  def javascript_drag_and_drop(i)
+    ::Cyberweb.javascript_drag_and_drop(i)
+  end; alias drag_and_drop       javascript_drag_and_drop # === drag_and_drop
+       alias drag_n_drop         javascript_drag_and_drop # === drag_n_drop
+       alias drag_drop           javascript_drag_and_drop # === drag_drop
+       alias drag                javascript_drag_and_drop # === drag
+       alias add_javascript_drag javascript_drag_and_drop # === add_javascript_drag
+       alias drag_this           javascript_drag_and_drop # === drag_this
+       alias enable_drag_for     javascript_drag_and_drop # === enable_drag_for
+
+  # ========================================================================= #
+  # === Cyberweb.javascript_drag_and_drop                         (drag tag)
+  #
+  # This method will enable javascript drag and drop capabilities.
+  #
+  # The input to this method should be the ID of the html element that
+  # you wish to drag and drop.
+  #
+  # The way this works is by making use of jquery, so jquery has to
+  # be available.
+  #
+  # Usage example:
+  #
+  #   Cyberweb.javascript_drag_and_drop 'foobar'
+  #
+  # ========================================================================= #
+  def self.javascript_drag_and_drop(
+      this_id
+    )
+    ee return_javascript_drag_and_drop(this_id)
+  end; self.instance_eval { alias drag_and_drop       javascript_drag_and_drop } # === Cyberweb.drag_and_drop
+       self.instance_eval { alias drag_n_drop         javascript_drag_and_drop } # === Cyberweb.drag_n_drop
+       self.instance_eval { alias drag_drop           javascript_drag_and_drop } # === Cyberweb.drag_drop
+       self.instance_eval { alias drag                javascript_drag_and_drop } # === Cyberweb.drag
+       self.instance_eval { alias add_javascript_drag javascript_drag_and_drop } # === Cyberweb.add_javascript_drag
+       self.instance_eval { alias drag_this           javascript_drag_and_drop } # === Cyberweb.drag_this
+       self.instance_eval { alias enable_drag_for     javascript_drag_and_drop } # === Cyberweb.enable_drag_for
+
+  # ========================================================================= #
+  # === Cyberweb.drag_last
+  # ========================================================================= #
+  def self.drag_last(
+      this_id = ::Cyberweb.array_registered_ids?.last
+    )
+    javascript_drag_and_drop(this_id)
+  end
+
+  # ========================================================================= #
+  # === drag_last
+  # ========================================================================= #
+  def drag_last(
+      this_id = ::Cyberweb.array_registered_ids?.last
+    )
+    ::Cyberweb.drag_last(this_id)
+  end
+
+end

data/lib/cyberweb/javascript/dragula_collection.rb

@@ -0,0 +1,54 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# require 'cyberweb/javascript/dragula_collection.rb'
+# =========================================================================== #
+module Cyberweb
+
+  require 'cyberweb/javascript/javascript.rb'
+
+  # ========================================================================= #
+  # === Cyberweb.add_dragula_drag_for
+  #
+  # The first argument will be the argument towards the Selector that
+  # we will use, such as the <ul> html tag.
+  # ========================================================================= #
+  def self.add_dragula_drag_for(
+      for_this_selector = 'ul'
+    ) # For ul elements.
+    for_this_selector = for_this_selector.to_s.dup
+    unless for_this_selector.start_with? "'"
+      for_this_selector = "\'"+for_this_selector+"\'"
+    end
+    return_javascript_code("document.addEventListener( 'DOMContentLoaded', function() {
+  dragula(
+    [ document.querySelector("+for_this_selector+") ]
+  );
+} );
+")
+  end
+
+  # ========================================================================= #
+  # === add_dragula_drag_for
+  # ========================================================================= #
+  def add_dragula_drag_for(i = 'ul')
+    ::Cyberweb.add_dragula_drag_for(i)
+  end
+
+  # ========================================================================= #
+  # === dragula_one_two_three
+  #
+  # Name ought to be changed lateron.
+  # ========================================================================= #
+  def dragula_one_two_three(id_left, id_right)
+    return_javascript_code(
+    "dragula([document.getElementById(#{id_left}), document.getElementById(#{id_right})], {
+  moves: function (el, container, handle) {
+    return handle.className === 'handle';
+  }
+});"
+    )
+  end
+
+end

data/lib/cyberweb/javascript/javascript.rb

@@ -0,0 +1,259 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# require 'cyberweb/javascript/javascript.rb'
+# Cyberweb.load_this_external_javascript_file
+# Cyberweb.sanitize_javascript
+# Cyberweb.doc_write
+# =========================================================================== #
+module Cyberweb 
+
+  require 'cyberweb/toplevel_methods/path.rb'
+  require 'cyberweb/javascript/javascript_magic.rb'
+  require 'cyberweb/javascript/return_javascript.rb'
+
+  # ========================================================================= #
+  # === Cyberweb.load_this_external_javascript_file
+  # ========================================================================= #
+  def self.load_this_external_javascript_file(i)
+    return '<script src="'+i+'"></script>'+N
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.map_symbol_to_javascript_file
+  #
+  # This method assumes that the first argument given is a Symbol.
+  # ========================================================================= #
+  def self.map_symbol_to_javascript_file(
+      this_symbol,
+      path = ''
+    )
+    case this_symbol
+    # ===================================================================== #
+    # === snake
+    #
+    # This refers to the snake game in javascript.
+    # ===================================================================== #
+    when :snake,
+         :snake_game
+      this_symbol = "#{path}/javascript_code/games/snake.js"
+    # ===================================================================== #
+    # === tetris
+    #
+    # This refers to the tetris game in javascript.
+    # ===================================================================== #
+    when :tetris,
+         :tetris_game
+      this_symbol = "#{path}/javascript_code/games/tetris.js"
+    # ===================================================================== #
+    # === :tic_tac_toe
+    # ===================================================================== #
+    when :tic_tac_toe,
+         :tic_tac_toe_game
+      this_symbol = "#{path}/javascript_code/games/tic-tac-toe.js"
+    # ===================================================================== #
+    # === :fader
+    # ===================================================================== #
+    when :fader,
+         :fader_js
+      this_symbol = "#{path}/javascript_code/FADER.js" # path seems to be used only here.
+    else
+      return "Not registered Symbol `#{this_symbol}`. This is "\
+             "currently not allowed, thus we exit."
+    end
+    return this_symbol
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.javascript_file
+  #
+  # This will "load" a javascript file (actually, the browser will do the 
+  # loading part, in here we only generate the necessary string for this.)
+  #
+  # Do note that since HTML5, we no longer need to supply a
+  # type="text/javascript" entry, since javascript has become
+  # the default engine anyway.
+  #
+  # If the first given argument to this method, `input`, is a Symbol,
+  # then we will treat it as a special keyword instruction.
+  #
+  # A simple Usage example for how the latter works, shall be demonstrated
+  # next:
+  #
+  #   w.javascript_file = :fader
+  #
+  # This will attempt to load the fader-javascript library.
+  # ========================================================================= #
+  def self.javascript_file(
+      input,
+      path = ''
+    )
+    if input.is_a? Symbol
+      input = map_symbol_to_javascript_file(input, path)
+    end
+    if is_html5? # This clause is the default.
+      return load_this_external_javascript_file(input)
+    else
+      # ===================================================================== #
+      # The next line included the string type="text/javascript", but the
+      # W3C validator states that this is unnecessary, so this has been
+      # removed in August 2018.
+      #
+      # The validator's message was:
+      #
+      #   "The type attribute is unnecessary for JavaScript resources."
+      #
+      # ===================================================================== #
+      return '<script src="'+input+'"></script>'+N
+    end
+  end; self.instance_eval { alias load_javascript  javascript_file } # === Cyberweb.load_javascript
+       self.instance_eval { alias javascript_file= javascript_file } # === Cyberweb.javascript_file=
+
+  # ========================================================================= #
+  # === Cyberweb.sanitize_javascript
+  #
+  # Right now only sanitizes on_click_select() events.
+  # ========================================================================= #
+  def self.sanitize_javascript(
+      javascript
+    )
+    javascript = javascript.to_s.dup # Simpler - and unfreeze. 
+    if javascript.include?('on_click_select') or javascript.include?('select_on_click')
+      javascript.gsub!(/on_click_select/, 'onClick="this.select()"')
+      javascript.gsub!(/select_on_click/, 'onClick="this.select()"')
+    end
+    return javascript
+  end
+
+  # ========================================================================= #
+  # === sanitize_javascript
+  #
+  # Right now only sanitizes on_click_select() events.
+  # ========================================================================= #
+  def sanitize_javascript(
+      javascript
+    )
+    ::Cyberweb.sanitize_javascript(javascript)
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.doc_write
+  #
+  # Simple wrapper over the javascript document.write functionality.
+  # ========================================================================= #
+  def self.doc_write(i = '')
+    return_javascript('document.write('+i+');')
+  end
+
+  # ========================================================================= #
+  # === doc_write
+  #
+  # Simple wrapper over the javascript document.write functionality.
+  # ========================================================================= #
+  def doc_write(i = '')
+    ee return_doc_write(i)
+  end
+
+  # ========================================================================= #
+  # === return_doc_write
+  # ========================================================================= #
+  def return_doc_write(i = '')
+    return_javascript('document.write('+i+');')
+  end
+
+  # ========================================================================= #
+  # === body_javascript_onload
+  # ========================================================================= #
+  def body_javascript_onload(
+      content = 'init_drag_and_drop();'
+    )
+    ee '<body onload="'+content+'">'
+  end; alias body_javascript body_javascript_onload # === body_javascript
+
+  # ========================================================================= #
+  # === return_javascript
+  # ========================================================================= #
+  def return_javascript(i)
+    Cyberweb.return_javascript(i)
+  end; alias javascript=            return_javascript # === javascript=
+       alias js=                    return_javascript # === js=
+       alias javascript             return_javascript # === javascript
+       alias js                     return_javascript # === js
+       alias return_javascript_code return_javascript # === return_javascript_code
+       # alias    script_javascript return_javascript # === script_javascript
+
+  # ========================================================================= #
+  # === return_default_javascript
+  # ========================================================================= #
+  def return_default_javascript(
+      i = ::Cyberweb.converted_path
+    )
+    ::Cyberweb.return_default_javascript(i)
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.ejavascript
+  # ========================================================================= #
+  def self.ejavascript(i)
+    i = JavascriptMagic.new(i)._
+    ee ::Cyberweb.return_javascript(i)
+  end; self.instance_eval { alias output_this_javascript ejavascript } # === Cyberweb.output_this_javascript
+
+  # ========================================================================= #
+  # === ejavascript
+  #
+  # Tap into the class JavascriptMagic since Aug 2011, then output the 
+  # result. It will invoke the method .return_javascript() (see above).
+  #
+  # It may not always be wanted to output the given javascript code
+  # at hand. Thus, this behaviour may be subject to change eventually.
+  # ========================================================================= #
+  def ejavascript(i)
+    ::Cyberweb.ejavascript(i)
+  end; alias javascript_code=           ejavascript # === javascript_code=
+       alias ejavascript_code           ejavascript # === ejavascript_code
+       alias script_javascript          ejavascript # === script_javascript
+       alias escript_javascript         ejavascript # === escript_javascript
+       alias ejs                        ejavascript # === ejs
+       alias use_this_javascript        ejavascript # === use_this_javascript
+       alias embed_javascript           ejavascript # === embed_javascript
+       alias embed_this_javascript_code ejavascript # === embed_this_javascript_code
+       alias embed_this_javascript      ejavascript # === embed_this_javascript_code
+       alias javascript_code            ejavascript # === javascript_code # experimental as of Nov 2014.
+
+  # ========================================================================= #
+  # === Cyberweb.return_default_javascript
+  #
+  # This will return the javascript stuff. Since as of June 2011 we add
+  # the fixed_path variable only if we do not start with http. Apparently
+  # this breaks the javascript model... so this was undone again in
+  # August 2011.
+  #
+  # If we redo it again, we must describe why.
+  #
+  # On 21.06.2014 I noticed that the W3C validator complained about
+  # "script element between head and body". That means we need to 
+  # either place it between <head> or <body> tags, and not in between.
+  # ========================================================================= #
+  def self.return_default_javascript(
+      use_this_path =
+        # ::Cyberweb.converted_path_to_data # We need the path to the DATA/ subdirectory.
+        # ::Cyberweb.converted_path_to_project_base_dir
+        #Cyberweb.project_base_dir?
+        ::Cyberweb.converted_path_to_the_directory_containing_the_copied_javascript_files
+    )
+    use_this_path = use_this_path.dup
+    array = ARRAY_DEFAULT_JAVASCRIPT_LIBRARIES
+    _ = ''.dup # This String will be returned.
+    array.each {|entry|
+     full_path = "#{use_this_path}javascript_code/#{entry}".dup
+      _ << '<script src="'+full_path+'"'
+      _ = _.ljust(48)
+      _ << ' type="text/javascript"></script>'
+      _ << NL
+    } unless ARRAY_DEFAULT_JAVASCRIPT_LIBRARIES.empty?
+    _
+  end
+
+end

data/lib/cyberweb/javascript/javascript_bundle.rb

@@ -0,0 +1,223 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# Here we bundle all javascript code things into one file.
+#
+# This way, we can reuse those components more readily and
+# more easily.
+#
+# We will also use a listing here so we can cherry-pick what we like
+# to use quickly (sort alphabetically):
+#
+#   - chmod_displayer()
+#   - display_clock()
+#   - display_time()
+#   - show_cheerleader()
+#   - show_javascript_canvas()
+#   - javascript_box()
+#   - javascript_last_modified()
+#   - popup
+#
+# =========================================================================== #
+# require 'cyberweb/javascript/javascript_bundle.rb'
+# Cyberweb.display_time
+# =========================================================================== #
+module Cyberweb
+
+  require 'cyberweb/toplevel_methods/path.rb'
+
+  # ========================================================================= #
+  # === show_cheerleader
+  #
+  # Shows an ASCII cheerleader.
+  # ========================================================================= #
+  def show_cheerleader(
+      path_to_cheerleader_file = Cyberweb.path_to_data?+'CODE/javascript/cheerleader.js'
+    )
+    filename = 'cheerleader.js'
+    _ = path_to_cheerleader_file
+    _ << filename unless _[-filename.size, filename.size] == filename
+    ee self.load_javascript(_)
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.chmod_displayer
+  #
+  # This display a cute little chmod page.
+  #
+  # The local javascript file for this is at:
+  #
+  #    bl /home/x/data/CODE/javascript/chmod_displayer.js
+  #
+  # ========================================================================= #
+  def self.chmod_displayer(
+      path_to_file = :default
+    )
+    case path_to_file
+    # ======================================================================= #
+    # === :default
+    # ======================================================================= #
+    when :default
+      path_to_file = ::Cyberweb.path_to_the_internal_javascript_directory?+
+                     'chmod_displayer.js'
+    end
+    filename = 'chmod_displayer.js'
+    _ = path_to_file
+    _ << filename unless _[-filename.size, filename.size] == filename
+    return self.load_javascript(_)+'
+    <form name="chmod">
+    <tabke BORDER="0" CELLSPACING="0" CELLPADDING="0" style="font:normal 12px Verdana";>
+    <tr ALIGN="LEFT" valign="MIDDLE">
+    <td>Permissions: </TD>
+    <td><input type="text" name="t_total" value="751" size="4" onKeyUp="octalchange()"> </TD>
+    <td><input type="text" name="sym_total" value="" size="12" READONLY="1" STYLE="border: 0px none;">
+    </td>
+    </tr>
+    </table>
+    <br>
+    <table cellpadding="2" cellspacing="0" border="0" style="font:normal 12px Verdana">
+    <tr bgcolor="#333333">
+    <td width="60" align="left"> </td>
+    <td width="55" align="center" style="color:white"><b>owner
+    </b></td>
+    <td width="55" align="center" style="color:white"><b>group
+    </b></td>
+    <td width="55" align="center" style="color:white"><b>other
+    <b></td>
+    </tr>
+    <tr bgcolor="#dddddd">
+    <td width="60" align="left" nowrap style="color:black" bgcolor="#FFFFFF">read</td>
+    <td width="55" align="center" bgcolor="#eeeeee">
+    <input type="checkbox" name="owner4" value="4" onclick="calc_chmod()">
+    </td>
+    <td width="55" align="center" bgcolor="#ffffff"><input type="checkbox" name="group4" value="4" onclick="calc_chmod()">
+    </td>
+    <td width="55" align="center" bgcolor="#eeeeee">
+    <input type="checkbox" name="other4" value="4" onclick="calc_chmod()">
+    </td>
+    </tr>
+    <tr bgcolor="#dddddd">		
+    <td width="60" align="left" nowrap style="color:black" bgcolor="#FFFFFF">write</td>
+    <td width="55" align="center" bgcolor="#eeeeee">
+    <input type="checkbox" name="owner2" value="2" onclick="calc_chmod()"></td>
+    <td width="55" align="center" bgcolor="#ffffff"><input type="checkbox" name="group2" value="2" onclick="calc_chmod()">
+    </td>
+    <td width="55" align="center" bgcolor="#eeeeee">
+    <input type="checkbox" name="other2" value="2" onclick="calc_chmod()">
+    </td>
+    </tr>
+    <tr bgcolor="#dddddd">		
+    <td width="60" align="left" nowrap style="color:black" bgcolor="#FFFFFF">execute</td>
+    <td width="55" align="center" bgcolor="#eeeeee">
+    <input type="checkbox" name="owner1" value="1" onclick="calc_chmod()">
+    </td>
+    <td width="55" align="center" bgcolor="#ffffff">
+    <input type="checkbox" name="group1" value="1" onclick="calc_chmod()">
+    </td>
+    <td width="55" align="center" bgcolor="#eeeeee">
+    <input type="checkbox" name="other1" value="1" onclick="calc_chmod()">
+    </td>
+    </tr>
+    </table>
+    </form>'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.display_time
+  #
+  # Simply display the time.
+  # ========================================================================= #
+  def self.display_time(
+      in_what_format = :javascript,
+      css_style      = ''
+    )
+    if in_what_format.is_a?(Hash) and in_what_format.has_key?(:css_style)
+      css_style = in_what_format.delete(:css_style)
+      in_what_format = :javascript
+    end
+    div('','clock',css_style) {
+      case in_what_format
+      when :javascript, :default
+        return_javascript "updateClock(); setInterval('updateClock()', 1000 )"
+      when :ruby
+        e Time.now.strftime('%H:%M:%S') 
+      end
+    }
+  end
+
+  # ========================================================================= #
+  # === output_javascript_bundle
+  # ========================================================================= #
+  def output_javascript_bundle(
+      optional_css = 'pad1em round_black1'
+    )
+    div(optional_css) {
+      ARRAY_JAVASCRIPT_METHODS.each_with_index {|entry, index|
+        index += 1
+        h3 index.to_s+') '+entry.to_s
+        send(entry)
+      }
+    }
+  end
+
+  # ========================================================================= #
+  # === find_script
+  #
+  # Not sure if we need this ... I think its intent was to find a
+  # certain .js file.
+  # ========================================================================= #
+  def find_script(i)
+    _ = case i
+    when 'timer','1'
+      _ = 'timer.js'
+    end
+    _
+  end
+
+  # ========================================================================= #
+  # === javascript_box
+  #
+  # This is for testing purposes only so far ...
+  # ========================================================================= #
+  def javascript_box
+    ejavascript '
+    function wechsel(box)
+    {
+      if (box.checked) { box.checked = false; }
+      else             { box.checked = true;  }
+    }'
+    ee '<form name="checkbox">
+    <input type="checkbox" name="box" checked="checked">
+    <a href="javascript:wechsel(document.checkbox.box)">
+    Box an/aus</a>'
+    cform
+    # javascript:wechsel(document.formularname.checkboxname)
+  end
+
+  # ========================================================================= #
+  # === show_javascript_canvas
+  #
+  # This will display a little Javascript Canvas.
+  #   Taken from: http://smoothiecharts.org/tutorial.html
+  # ========================================================================= #
+  def show_javascript_canvas
+    ee '<canvas id="mycanvas" width="400" height="100"></canvas>'
+    script_javascript "
+    // Random data
+    var line1 = new TimeSeries();
+    var line2 = new TimeSeries();
+
+    setInterval(function() {
+      line1.append(new Date().getTime(), Math.random());
+      line2.append(new Date().getTime(), Math.random());
+    }, 2600);
+
+    var smoothie = new SmoothieChart({ grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6 } });
+    smoothie.addTimeSeries(line1, { strokeStyle: 'rgb(0, 255, 0)', fillStyle: 'rgba(0, 255, 0, 0.4)', lineWidth: 3 });
+    smoothie.addTimeSeries(line2, { strokeStyle: 'rgb(255, 0, 255)', fillStyle: 'rgba(255, 0, 255, 0.3)', lineWidth: 3 });
+   "+'
+   smoothie.streamTo(document.getElementById("mycanvas"), 1000);'
+  end
+
+end