cyberweb 0.4.174

data/lib/cyberweb/toplevel_methods/css.rb

@@ -0,0 +1,732 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# require 'cyberweb/toplevel_methods/css.rb'
+# Cyberweb.css_comment
+# =========================================================================== #
+module Cyberweb
+
+  require 'cyberweb/toplevel_methods/html_mode.rb'
+  require 'cyberweb/project/project.rb'
+  require 'cyberweb/constants/standalone_constants.rb'
+  require 'cyberweb/constants/project_constants.rb'
+  require 'cyberweb/colours/sanitize_for_colours.rb'
+  require 'cyberweb/encoding/encoding.rb'
+
+  # ========================================================================= #
+  # === Cyberweb.return_content_of_all_the_CSS_files
+  #
+  # This method will return, as a String, the content of all .css files
+  # distributed within the Cyberweb project. (Or, more accurately, those
+  # that are registered to be distributed.)
+  # ========================================================================= #
+  def self.return_content_of_all_the_CSS_files
+    _ = ''.dup
+    Cyberweb::ARRAY_LOCAL_CSS_FILES.each {|this_css_file|
+      target_file = DIRECTORY_WITH_CSS_FILES+this_css_file+'.css'
+      if File.exist? target_file
+        _ << File.read(target_file)
+        _ << "\n"
+      end
+    }
+    return _
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_the_content_of_these_css_classes
+  #
+  # This method will take CSS classes, find the corresponding rule for
+  # them and then return this rule as a String.
+  # ========================================================================= #
+  def self.return_the_content_of_these_css_classes(
+      these_css_classes = 'BG_BLACK pad0_4em'
+    )
+    original_input = ''.dup
+    Dir[
+      DIRECTORY_WITH_CSS_FILES+'*.css'
+    ].each {|this_css_file|
+      original_input << File.read(this_css_file)
+      original_input << "\n"
+    }
+    _ = ''.dup
+    these_css_classes = [these_css_classes].flatten.compact.map {|entry|
+      if entry.include? ' '
+        entry = entry.split(' ')
+      end
+      entry
+    }
+    these_css_classes.flatten!
+    these_css_classes.each {|this_css_class|
+      use_this_regex = /^(\.#{this_css_class}.+)$/
+      original_input =~ use_this_regex
+      _ << $1.to_s.dup+"\n"
+    }
+    return _
+  end; self.instance_eval { alias embed_these_css_classes return_the_content_of_these_css_classes } # === Cyberweb.embed_these_css_classes
+
+  # ========================================================================= #
+  # === Cyberweb.return_this_css_style                           (style tag)
+  #
+  # This method returns a proper CSS <style> tag, that is one that
+  # starts with <style> and ends with </style>.
+  #
+  # RANDOM_COLOUR is a special "macro" but you may also use RAND or
+  # similar "macros" to get a random colour. Getting a random colour
+  # may be useful in the event that you do not want to come up with
+  # a colour scheme on your own.
+  #
+  # Personally I use this when I do not want to lookup a colour name.
+  #
+  # Example of what this method may return:
+  #
+  #   "<style>color: green</style>"
+  #
+  # ========================================================================= #
+  def self.return_this_css_style(
+      i            = '', # This is css_style.
+      use_newlines = true
+    )
+    case use_newlines
+    when :do_not_use_newlines,
+         :remove_newlines
+      use_newlines = false
+    end
+    _ = ''.dup # This will be the return result.
+    i = i.join(N) if i.is_a? Array # Need to convert Arrays.
+    if i.is_a? Hash
+      if i.has_key? :style
+        i = i.delete(:style)
+      end
+    end
+    i = i.to_s
+    unless i.empty?
+      if i.include? 'FS'
+        i.gsub!(/FS(.+)em/, 'font-size:\\1em')
+      end
+      # ===================================================================== #
+      # How to use the following? Simple. Simply add in your css stuff
+      # a line like this:
+      #   body { RANDOM_BACKGROUND_IMAGE }
+      # ===================================================================== #
+      if i.include? 'RANDOM_BACKGROUND_IMAGE'
+        i.gsub!(/RANDOM_BACKGROUND_IMAGE/,
+          'background-image: url("'+@fixed_path+'images/'+return_random_image+'");
+           background-repeat: no-repeat;')
+      end
+      # ===================================================================== #
+      # === Add the <style> opening tag next
+      # 
+      # Next, add <style> tag, or <style type="text/css">
+      # ===================================================================== #
+      if ::Cyberweb.is_html5?
+        _ << '<style>'
+      else
+        _ << '<style type="text/css">'
+      end
+      _ << NL if use_newlines
+      # ===================================================================== #
+      # i = remove_newlines(i)
+      # ^^^ We can not remove newlines, as the css style may have
+      # more than one line.
+      # ===================================================================== #
+      # ===================================================================== #
+      # === Handle border-double pseudo-CSS element
+      #
+      # The next construct is a pseudo-CSS element. border double means 
+      # top and bottom border on an element.
+      # ===================================================================== #
+      if i.include? 'border-double:'
+        i.gsub!(/border-double:(.+);/,'border-top: \\1; border-bottom: \\1;')
+      end
+      # ===================================================================== #
+      # === Handle colour-input next
+      # ===================================================================== #
+      i = ::Cyberweb.sanitize_for_colours(i) # Since as of Jul 2011. bl $CYBERWEB/colours/sanitize_for_colours.rb
+      # ===================================================================== #
+      # RANDOM_BORDER
+      # ===================================================================== #
+      if i.include? 'RANDOM_BORDER'
+        regex = /RANDOM_BORDER_(.+)/
+        match = i.match(regex)[1]
+        i.gsub!(regex, ::Cyberweb.return_random_border(match))
+      end
+      _ << i
+      _ << NL if use_newlines
+      _ << '</style>'
+      _ << NL if use_newlines
+    end
+    return _
+  end; self.instance_eval { alias style_tag return_this_css_style } # === Cyberweb.style_tag
+       self.instance_eval { alias css_style return_this_css_style } # === Cyberweb.css_style
+
+  # ========================================================================= #
+  # === listing_css=
+  #
+  # Use this method to modify the "global" variable @listing_css_object.
+  #
+  # You can also use the method listing_css instead.
+  #
+  # Usage example:
+  #
+  #   Cyberweb.listing_css = '<b class="red">'
+  #
+  # ========================================================================= #
+  def listing_css=(i)
+    ::Cyberweb.listing_css_object = i
+  end; alias listing_css listing_css= # === listing_css
+
+  # ========================================================================= #
+  # === Cyberweb.css_comment
+  #
+  # This method will simply make a CSS comment.
+  # ========================================================================= #
+  def self.css_comment(i)
+    return "/* #{i} */#{NL}"
+  end
+
+  # ========================================================================= #
+  # === TEMPLATES
+  #
+  # Next we load up some css templates.
+  # ========================================================================= #
+
+  # ========================================================================= #
+  # === Cyberweb::TEMPLATE1
+  # ========================================================================= #
+  if File.exist? PROJECT_BASE_DIR+CSS_FILES.first
+    TEMPLATE1 = File.readlines(
+      PROJECT_BASE_DIR+CSS_FILES.first,
+        encoding: ::Cyberweb.main_encoding?
+    ).join('') # <- This is cascading_style_sheets/default.css
+  else
+    TEMPLATE1 = ''
+  end
+
+  # ========================================================================= #
+  # === TEMPLATE2
+  # ========================================================================= #
+  if File.exist? DIRECTORY_WITH_CSS_FILES+'template2.css'
+    TEMPLATE2 = File.readlines(
+      DIRECTORY_WITH_CSS_FILES+'template2.css',
+        encoding: ::Cyberweb.main_encoding?
+    ).join('')
+  else
+    TEMPLATE2 = ''
+  end
+
+  # ========================================================================= #
+  # === CODE_TEMPLATE
+  # ========================================================================= #
+  if File.exist? DIRECTORY_WITH_CSS_FILES+'code.css'
+    CODE_TEMPLATE = File.readlines(
+      DIRECTORY_WITH_CSS_FILES+'code.css',
+        encoding: ::Cyberweb.main_encoding?
+    ).join('')
+  else
+    CODE_TEMPLATE = ''
+  end
+
+  # ========================================================================= #
+  # === TEMPLATE_RUBY_REGEX
+  # ========================================================================= #
+  if File.exist? DIRECTORY_WITH_CSS_FILES+'ruby_regexes.css'
+    TEMPLATE_RUBY_REGEX = File.readlines(
+      "#{DIRECTORY_WITH_CSS_FILES}ruby_regexes.css",
+        encoding: ::Cyberweb.main_encoding?
+    ).join('')
+  else
+    TEMPLATE_RUBY_REGEX = ''
+  end
+
+  # ========================================================================= #
+  # === @array_found_these_css_classes
+  #
+  # This Array will be populated whenever a css class is used in a
+  # WebApp.
+  #
+  # These css classes will be stored in a unique fashion.
+  #
+  # NO duplicates!
+  # ========================================================================= #
+  @array_found_these_css_classes = []
+
+  # ========================================================================= #
+  # === Cyberweb.print_this_css
+  #
+  # Use this to print your custom css style.
+  # ========================================================================= #
+  def self.print_this_css(css)
+    ee return_this_css_style(css)
+  end; self.instance_eval { alias add_css_style print_this_css } # === Cyberweb.add_css_style (Added 12.11.2014)
+       self.instance_eval { alias inline_css    print_this_css } # === Cyberweb.inline_css
+
+  # ========================================================================= #
+  # === Cyberweb.output_this_css_style
+  # ========================================================================= #
+  def self.output_this_css_style(i)
+    print return_this_css_style(i) 
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.generate_cap_box
+  #
+  # Code in this method can be used to generate a "cap-box", which is
+  # mostly a div header with some content.
+  #
+  # The method also accepts a Block, such as:
+  #
+  #   {{ width: '80%' }}
+  #
+  # ========================================================================= #
+  def self.generate_cap_box(
+      use_this_title_for_the_upper_box = 'Hello world!',
+      # ===================================================================== #
+      # The next variable is the inner content - by default it will
+      # be empty.
+      # ===================================================================== #
+      title_for_the_content_header     = '',
+      inner_content                    = '', # This is the inner content.<br>Looks fancy!<br>',
+      border_to_use                    = '3px solid #2a2a2a',
+      box_width                        = '700px'
+    )
+    if block_given?
+      yielded = yield
+      if yielded.is_a? Hash
+        # === :width
+        if yielded.has_key? :width
+          box_width = yielded.delete(:width).to_s
+        end
+      end
+    end
+    css_style_to_use = '#cap_box_container {
+  border: '+border_to_use+';
+  background: #ddd;
+  box-shadow: 0 0 5px #b1b1b1;
+}
+
+.cap_box_wrapper {
+  font-family: Arial, Arial, Helvetica, sans-serif;
+  width: '+box_width+';
+  line-height: 1.5;
+  margin: 0 auto;
+}
+
+.cap_box_header {
+  background: #222;
+  border: 5px solid #444;
+  padding: 10px;
+  margin: 0 -35px 20px;
+  position: relative;
+}
+
+.cap_box_header .cap_box_inner {
+  overflow: hidden;
+  color: #fff;
+}
+
+#cap_box_top_main_area {
+  margin-top: 20px;
+  padding: 0 20px 90px;
+  background-color: #fff;
+}
+
+/* This is the shadow on the left hand side. */
+.cap_box_header .triangle_on_the_left_hand_side {
+  border: 10px solid black;
+  border-color: transparent transparent black;
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+/* This is the shadow on the right hand side. */
+.cap_box_header .triangle_on_the_right_hand_side {
+  border: 10px solid black;
+  border-color: black transparent transparent;
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  top: -15px;
+  right: 0;
+  transform: rotate(45deg);
+}'.dup
+    return addnl(
+    return_this_css_style(
+      css_style_to_use.to_s
+    ).to_s+
+    div('cap_box_wrapper', id: 'drag_cap_box_wrapper') {
+      div(id: 'cap_box_container') {
+        div(id: 'cap_box_top_main_area') {
+          div('cap_box_header') {
+            div('cap_box_inner') {
+              ee "<b>#{use_this_title_for_the_upper_box}</b>"
+            }
+            ee '<span class="triangle_on_the_left_hand_side"></span>
+                <span class="triangle_on_the_right_hand_side"></span>'
+          }
+          if title_for_the_content_header and !title_for_the_content_header.empty?
+            h1_id(title_for_the_content_header.dup)
+          end
+          ee inner_content
+        }
+      }
+    }
+    )
+  end
+
+  # ========================================================================= #
+  # === found_these_css_classes?
+  #
+  # Return which CSS classes we found. That array gets populated
+  # through the method return_css_class() - see below.
+  # ========================================================================= #
+  def found_these_css_classes?
+    ::Cyberweb.found_these_css_classes
+  end
+
+  # ========================================================================= #
+  # === generate_info_box
+  #
+  # The original was taken from:
+  #
+  #   http://aktuell.de.selfhtml.org/artikel/css/infobox/
+  #
+  # ========================================================================= #
+  def generate_info_box(
+      text_to_be_shown_on_the_popup_box = 'Lorem ipsum dolor sit amet,
+      consectetuer adipiscing elit, sed diam nonummy nibh euismod
+      tincidunt ut laoreet dolore magna aliquam erat volutpat.'
+    )
+    ee '<style type="text/css">
+img {
+  border:none;
+}
+
+#infobox {
+  height:  80px;
+  width:   80px;
+  padding:  0;
+  margin: 20px;
+  border: 1px solid black;
+  font:   bold 14px verdana, sans-serif;
+}
+
+#infobox div { display:none; }
+
+#infobox:hover div{
+  display: block;
+  width:   400px;
+  position:absolute;
+  top:  95%;
+  right:5px;
+  border:2px dashed black;
+  padding:18px;
+  font:normal 15px verdana, sans-serif;
+}
+
+</style>
+<div id="infobox">
+<a href="beispiel3b.htm">
+<img src="http://aktuell.de.selfhtml.org/artikel/css/infobox/schmetterling.png" width="80" height="80" alt="schmetterling">
+</a>
+
+<div><p><strong>INFO</strong></p>
+ <p>'+text_to_be_shown_on_the_popup_box+'</p>
+ <p><img src="http://aktuell.de.selfhtml.org/artikel/css/infobox/schmetterling.png" width="150" height="150" alt=""></p>
+ <ul>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Lorem ipsum dolor sit amet</li>
+ </ul>
+</div>'
+  end; alias add_info_box generate_info_box # === add_info_box
+
+  # ========================================================================= #
+  # === css_comment
+  # ========================================================================= #
+  def css_comment(i)
+    ::Cyberweb.css_comment(i)
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.found_these_css_classes
+  # ========================================================================= #
+  def self.found_these_css_classes
+    @array_found_these_css_classes
+  end
+
+  # ========================================================================= #
+  # === report_which_css_classes_were_found
+  #
+  # Report which css classes we have found.
+  # ========================================================================= #
+  def report_which_css_classes_were_found(
+      i = found_these_css_classes?
+    )
+    i.each_with_index {|entry, index|
+      index += 1
+      e '('+index.to_s+') <b>'+entry+'</b>'
+    }
+  end
+
+  # ========================================================================= #
+  # === print_css_class
+  #
+  # Prints a CSS class.
+  # ========================================================================= #
+  def print_css_class(css_class)
+    ee return_css_class(css_class)
+  end
+
+  # ========================================================================= #
+  # === print_css_style
+  #
+  # Will simply print the css style to use.
+  # ========================================================================= #
+  def print_css_style(css_style = '')
+    ee return_css_style(css_style)
+  end
+
+  # ========================================================================= #
+  # === include_css
+  #
+  # Use this method to include a CSS file. The first given argument to
+  # this method, `css_file`, needs to specify the _full_ location to
+  # the .css file in question.
+  #
+  # We will also append '.css' if this is missing.
+  # ========================================================================= #
+  def include_css(css_file)
+    css_file << '.css' unless css_file.end_with? '.css'
+    css_file = '<link rel="stylesheet" type="text/css" href="'+css_file+'" />'
+    css_file << NL
+    return css_file
+  end; alias include_css_file include_css # === include_css
+       alias link_to_css_file include_css # === link_to_css_file
+
+  # ========================================================================= #
+  # === string_my_css
+  #
+  # This method will return CSS as string
+  #
+  # As my_css but will just returns a string.
+  # string_my_css(input)
+  # ========================================================================= #
+  def string_my_css(
+      input,
+      use_these_css_files = ARRAY_DEFAULT_CSS_FILES_TO_INCLUDE
+    )
+    output = ''
+    _ = '<link rel="stylesheet" type="text/css" href="'
+    input << 'DATA/cascading_style_sheets/'
+    use_these_css_files.each {|css_file|
+      output << (
+        _+input+css_file+'.css" />' + NL
+      )
+    }    
+    return output
+  end
+
+  # ========================================================================= #
+  # === print_css
+  #
+  # Prints generic CSS. Hmmmmm
+  # ========================================================================= #
+  def print_css(
+      change_to = ::Cyberweb.converted_path,
+      print_all = true
+    )
+    ee return_css(change_to, print_all)
+  end
+
+  # ========================================================================= #
+  # === return_this_css_style
+  # ========================================================================= #
+  def return_this_css_style(
+      i,
+      use_newlines = true
+    )
+    return ::Cyberweb.return_this_css_style(i, use_newlines)
+  end; alias css_style= return_this_css_style # === css_style=
+
+  # ========================================================================= #
+  # === return_css_style
+  # ========================================================================= #
+  def return_css_style(i = '')
+    ::Cyberweb.return_css_style(i)
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_style
+  #
+  # This method will simply return CSS that can be used in HTML tags.
+  #
+  # Something such as:
+  #
+  #   style="foobar"
+  #
+  # ========================================================================= #
+  def self.return_css_style(
+      i = ''
+    )
+    _ = i.to_s.dup # The result value.
+    unless _.empty?
+      _ = ' style="'+_+'"'
+    end
+    return _
+  end; self.instance_eval { alias return_this_css return_css_style } # === Cyberweb.return_this_css
+
+  # ========================================================================= #
+  # === return_unique_css_id
+  # ========================================================================= #
+  def return_unique_css_id
+    _ = ''.dup
+    20.times {
+      _ << ALPHABET.sample
+    }
+    _
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_class
+  #
+  # This method will return a css class - but only when the input
+  # given to this method is NOT empty. In other words: empty arguments
+  # will be ignored.
+  #
+  # ARRAY_RANDOM_COLOUR also includes RAND.
+  # ========================================================================= #
+  def self.return_css_class(
+      css_class = ''
+    )
+    # ======================================================================= #
+    # Ensure that we have a String from this point.
+    # ======================================================================= #
+    css_class = css_class.to_s.strip
+    unless css_class.empty?
+      ARRAY_RANDOM_COLOUR.each {|word|
+        css_class.gsub!(/#{word}/, 'color: '+return_random_colour)
+      } if css_class.include? 'COL'
+      # ===================================================================== #
+      # Handle colour input next.
+      # ===================================================================== #
+      css_class = ::Cyberweb.sanitize_for_colours(css_class) # Since as of Nov 2014.
+      css_class.strip!
+      result = ''.dup
+      # ===================================================================== #
+      # Append onto the Array that keeps track of which CSS classes were
+      # found.
+      # ===================================================================== #
+      (
+        ::Cyberweb.found_these_css_classes << css_class.split(' ')
+      ).flatten!.uniq!
+      result << ' class="' << css_class << '"'
+      return result # Early return in this case.
+    end
+    '' # Otherwise an empty String will be returned.
+  end; self.instance_eval { alias css_class= return_css_class } # === Cyberweb.css_class=
+
+  # ========================================================================= #
+  # === return_css_class
+  # ========================================================================= #
+  def return_css_class(
+      css_class = ''
+    )
+    ::Cyberweb.return_css_class(css_class)
+  end; alias css_class= return_css_class # === css_class=
+
+  # ========================================================================= #
+  # === generate_the_id_for_the_coloured_box_background
+  #
+  # We need to generate a unique ID because otherwise we can
+  # not use re-use the same div box on the same box.
+  # ========================================================================= #
+  def generate_the_id_for_the_coloured_box_background
+    return '#coloured_box_background_'+return_unique_css_id
+  end
+
+  # ========================================================================= #
+  # === generate_coloured_box
+  #
+  # This will generate the coloured box.
+  # ========================================================================= #
+  def generate_coloured_box(
+      background_colour_to_use = '#93cde9',
+      padding_to_use           = '25px',
+      text_to_display          = 'Test',
+      height                   = '100px'
+    )
+    id_for_the_coloured_box = generate_the_id_for_the_coloured_box_background
+    if background_colour_to_use.empty?
+      background_colour_to_use = '#93cde9'
+    end
+    background_colour_to_use = background_colour_to_use.to_s.dup
+    if padding_to_use.empty?
+      padding_to_use = '25px'
+    end
+    # The return string is stored in the variable _.
+    _ = <<-EOF
+
+<style>
+
+#{id_for_the_coloured_box} {
+  background-color: #{background_colour_to_use};
+  padding: #{padding_to_use};
+}
+#{id_for_the_coloured_box}_fg {
+  background-color: #c4e4f3;
+  width:  300px;
+  height: #{height};
+  box-shadow: 0px 0px 8px #ffffff;
+  -webkit-box-shadow: 0px 0px 8px #ffffff;
+}
+</style>
+<div id="#{id_for_the_coloured_box}">
+  <div id="#{id_for_the_coloured_box}_fg">
+    #{text_to_display}
+  </div>
+</div>
+EOF
+    return _
+  end
+
+class Css # === Cyberweb::Css
+
+  attr_accessor :optional
+
+  # ========================================================================= #
+  # === DEFAULT_CSS_CLASS
+  # ========================================================================= #
+  DEFAULT_CSS_CLASS = 'marl1em BO'
+
+  # ========================================================================= #
+  # === initialize
+  # ========================================================================= #
+  def initialize
+    reset
+  end
+
+  # ========================================================================= #
+  # === _
+  # ========================================================================= #
+  def _
+    @optional
+  end
+
+  # ========================================================================= #
+  # === reset
+  # ========================================================================= #
+  def reset
+    @optional = DEFAULT_CSS_CLASS
+  end
+
+end
+
+end