How can I avoid floating the same content twice?

Question

My Kynetx app uses float_html() to put up a box full of content.

rule float_box {
  select when pageview ".*"
  pre {
    content = <<
      <div id='messagebox'>
      <h3>Floating Message Box</h3>
      <ul id='my_list'></ul>
      </div>
    >>; // trippy
  }
  float_html("absolute","top:25px","right:20px",content);
}

rule fill_box {
  select when pageview ".*"
  foreach ["alpha","bravo","charlie"] setting (list_item)
  append("#my_list", "<li>#{list_item}</li>");
}

The app (a421x27) is used from a bookmarklet. If you click the bookmarklet twice on the same page you get double content.

Is there any way to detect that the box is already on the screen and reuse it?

Answer 1

You can float the content manually using jQuery and check to see if it's already there or not.

ruleset a60x516 {
  meta {
    name "so-answer-example"
    description <<
      so-answer-example
    >>
    author "Mike Grace"
    logging on
  }

  rule float_box {
    select when pageview ".*"
    pre {
      content = <<
        <div id='messagebox'>
        <h3>Floating Message Box</h3>
        <ul id='my_list'></ul>
        </div>
      >>; /// fixing syntax highlighting bug
    }
    {
      emit <|
        if ($K("#messagebox").length == 0) {
          $K(content).css({
            "position": "absolute",
            "top": "25px",
            "right": "20px"
          }).appendTo(document.body);
        };
      |>;
    }
  }

  rule fill_box {
    select when pageview ".*"
    foreach ["alpha","bravo","charlie"] setting (list_item)
    {
      append("#my_list", "<li>#{list_item}</li>");
    }
  }
}

This is what is looks like after clicking the bookmarklet from this code several times on example.com

---

Side Notes:

always wrap your actions in {}. Actions work without being wrapped in {} if you only have one action but it's best to get in the habit of marking your action block with {}.