Calling the saves api through an HTML button

Authoring Twine
1

Hello,
I am trying to call Sugarcube’s save dialogue from an html button but having some problems. I figured I could use the onclick event of the button with a directive but doesn’t seem to be right. Perhaps because onclick is already looking for script, but dropping the script tags doesn’t work either. Hmmmm. I know how to do it with a sugarcube markup button, but have styled various buttons so would prefer to use html.
Thanks.

Twine Version:
Story Format: 2.314

<button class="button-50" role="button" @onclick="<<script>>UISystem.saves()<</script>>">Saves</button>
2

There are a number of ways you can achieve the outcome you want, which to use can depend on where in your project you are defining that <button> element.

  1. Within the “current” Passage
  2. Within a PassageHeader or PassageFooter special Passage.
  3. Within the StoryCaption special Passage.
  4. Within a StoryInterface special Passage
  5. Somewhere else…

note: The are (at least) four reasons why your example doesn’t work:

  1. The function to open the Save dialog programmatically is found on the UI API, not one named UISystem.
    eg. @onclick="<<script>>UI.saves()<</script>>"
  2. Using Attribute Directive mark-up on a HTML element attribute causes the associated String value to be executed when the element is being created. Which means the <<script>> macro will be executed when the button is added to the page, not when the end-user selects that button.
    eg. onclick="<<script>>UI.saves()<</script>>"
  3. Event based attributes like onclick expect the assigned String value to contain JavaScript, which the web-browser knows how to execute. It doesn’t know how to execute SugarCube macro calls.
    eg. onclick="UI.saves();"
  4. The JavaScript contained within the assigned String value is execute in a specific Scope, and by default SugarCube’s custom APIs are not available within that Scope.
3

Thanks for explaining that thoroughly, hopefully will help me avoid mistakes like that again. So my buttons are in the PassageHeader passage. From what I gathered, I should tag this passage something unique, and then style it in CSS. So assuming my tag is “storyheader”, I tried adding this in the CSS and not seeing any results. I think I’m close, perhaps you could advise?

.body[data-tags~="storyheader"] .button {
  appearance: button;
  background-color: #000;
  background-image: none;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 13px;
  margin: 0 5px 10px 0;
  overflow: visible;
  padding: 12px 12px;
  text-align: center;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}