Adding and removing by jQuerry

Authoring Twine
1

Twine Version: Tweego

Hello there. I want to have a keypad in my story and I have build one using css/html structure.

<div class="PhoneKeyPad">
  <div id="KeyPadOutput"></div>
  <div class="row">
    <div class="digit" id="one">1</div>
    <div class="digit" id="two">2
      <div class="sub">ABC</div>
    </div>
    <div class="digit" id="three">3
      <div class="sub">DEF</div>
    </div>
  </div>
  <div class="row">
    <div class="digit" id="four">4
      <div class="sub">GHI</div>
    </div>
    <div class="digit" id="five">5
      <div class="sub">JKL</div>
    </div>
    <div class="digit">6
      <div class="sub">MNO</div>
    </div>
  </div>
  <div class="row">
    <div class="digit">7
      <div class="sub">PQRS</div>
    </div>
    <div class="digit">8
      <div class="sub">TUV</div>
    </div>
    <div class="digit">9
      <div class="sub">WXYZ</div>
    </div>
  </div>
  <div class="row">
    <div class="digit">*
    </div>
    <div class="digit">0
    <div class="sub">+</div>
    </div>
    <div class="digit">#
    </div>
  </div>
  <div class="botrow"><i class="fa-regular fa-star dig" aria-hidden="true"></i>
    <div id="call"><i class="fa-solid fa-phone" aria-hidden="true"></i></div>
    <i class="fa-solid fa-arrow-left-long" aria-hidden="true"></i>
  </div>
</div>

The “digit”-divs are to be buttons that actually do let you enter a number

my js for this is this

;var keypunch = 0;

$(".digit").on('click', function() {
  var num = ($(this).clone().children().remove().end().text());
  if (keypunch < 11) {
    $("#KeyPadOutput").append('<span>' + num.trim() + '</span>');

    keypunch++;
  }
});

$(".fa-arrow-left-long").on('click', function() {
  $('#KeyPadOutput span:last-child').remove();
  keypunch--;
});

Outside of Sugarcube it works, inside not so much.

I suspect two things: Either I do not select the right element to apprend to, or I just break sugarcubes interal js and it skips my code.

2

Is the JS code inside the JavaScript section? Maybe the DOM elements are not ready when the JS is evaluated.

I added this below the markup and it worked:

<<done>>
<<script>>
var keypunch = 0;

$(".digit").on('click', function() {
  console.log('digit');
});

$(".fa-arrow-left-long").on('click', function() {
  console.log('arrow');
});

<</script>>
<</done>>
3

as I use tweego, it is a standalonme .js file that is merged into the output file by tweego.

4

You didn’t state how that HTML structure is being added to the page, so I will assume that it is contained within either:

  • the Passage being visited.
  • a Passage that is being included by the one being visited.
  • one of the special passages like StoryCapion, PassageHeader, or PassageFooter.
  • a Passage being displayed within a dialog that is being displayed using via the Dialog API.

First a little background about when specific parts of Story HTML file are processed / executed:

  • the contents of standard passages aren’t processed until they are visited, or included inside such a Passage. This means that any HTML elements or structures being created by a Passage doesn’t exist until that point in time.
  • HTML generated by a Passage being visited are first added to a buffer, that is only added to the Document Object Model (DOM) of the page once all of the contents of that Passage or any it includes has finished being processed. This means that any JavaScript executed directly during that processing won’t be able to locate the new elements because they won’t exist within the DOM yet. So such execution needs to be delayed some how so the DOM has time to be updated.
  • the contents of the Story JavaScript area, which includes that of any JS files that were included in the “source path” of a Twee Notation based project, is processed / executed during the SugarCube Runtime Engine’s start-up process. This means that that JavaScript can’t directly reference any HTML element / structure generated by a Passage, because such are all processed after the Story JavaScript area.

So, based on the information you’ve supplied the digit and fa-arrow-left-long classed elements you’re trying to locate done exist at the time your JavaScript is being executed.

If you want to keep defining that JavaScript code inside your js file then simply wrap it within a function like so…

setup.meaningfulMethodName = function () {
    /* JavaScript that binds listeners to the "keys" of the "Keypad". */
};

And then use a <<run>> or <<script>> macro within the Passage that contains the HTML structure to execute that method, making sure to either:

  • wrap that macro call within a <<done>> macro so its execution is delayed enough for the structure to of been added to the DOM.
  • place that macro call within one of the special passages, like PassageDone, whose contents gets processed after the processing of the visited Passage has finished.

eg. If the method is to be called within the visited Passage.

You examine the keypad...

/* The HTML structure being used to display the "Keypad" */

<<done>><<run setup.meaningfulMethodName() >><</done>>
1 Like
5

I should have done that. yes. It is included in a passage that displays inanother one.

so you say i have to give my two functions a wrapper and then add a <<run>> on the passage that contains the html?

then a little followup question. if I want to evaluate the added numbers

i could do so by adding another fuction to it?

like

$(".fa-phone").on('click', function () {
   var check = ($('#KeyPadOutput').childen().contents().unwrap());
   if (check === State.variables.password) {  /* Code to replace content */};
 };`

Assuming I can access the variables of sugarcube like this. But my Brain can’t wrap around how to use the <<replace>> function inside of javascript.

6

Technically SugarCube’s jQuery.wiki() method can be used to call macros within JavaScript that is executed within SugarCube’s Private Scoped Context.

$(".fa-phone").on('click', function () {
   var check = ($('#KeyPadOutput').childen().contents().unwrap());
   if (check === State.variables.password) {  $.wiki('<<somemacro>>');  };
 };

However, as you are already using jQuery in your event handle, you could use that library’s <jQuery>.text() (Textual content) or <jQuery>.html() (elements and textual) methods to update the content of the relevant identified area of the page.

$('#KeyPadOutput').text('replacement textual content')

…after all, that’s basically what the <<replace>> macro is doing internally…

1 Like
7

Well, I want to replace the passage that the keypad is on and include the next one. so basicly a <<replace #contents>><<include Passage>><</replace>>

that would be $('#contents').empty() for the clearing of said element, but it is not $(#contents').append(wiki.(passage name).processtext())

8

The jQuery.wiki() method I linked to previously is found in the jQuery Methods section of SugarCube’s documentation. That same section includes a <jQuery>.wikiPassage(name) method, whose documentation includes an example that demonstrates how to append the contents of a child Passage to an identifiable element.

note: jQuery is designed so methods that belong to the same selector result can be called in sequence without needing to obtaining that result more than once. This behaviour is often known as chaining (methods).
eg. in your example you wanted to call both <jQuery>.empty() and <jQuery>.append() on the same contents identified element, so that element’s current contents could be replace with something else.

$('#contents').empty().append('new content');

The SugarCube JavaScript equivalent of your <<replace>> macro based example would be…

$('#contents').empty().wikiPassage('Name of child Passage');
1 Like
9

Well, there was my Brain somewhat afk and i did not read further into the documentation. thank you again.