Day / Night mode for webhelp stylesheets

Are you missing a feature? Request it's implementation here.
shudson310
Posts: 130
Location: USA

Day / Night mode for webhelp stylesheets

Mon Sep 19, 2016 7:27 pm

The stylesheets could incorporate code to automatically switch between day/night mode based on the local browser time:

Code: Select all

<script>
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
}

getStylesheet();
-->
</script>
       
        <noscript><link href="main.css" rel="stylesheet" /></noscript>


and stylesheets for day vs night mode incorporated into the theme builder. This would be extremely helpful for webhelp and mobile help that is delivered to devices or settings that are light-sensitive, such as driving/flying/boating/security.
Scott Hudson
Content Strategist
Jeppesen
Site: jeppesen.com
alin
Site Admin
Posts: 132

Re: Day / Night mode for webhelp stylesheets

Thu Sep 22, 2016 6:08 pm

Hello,

Thank you for your feedback.

In order to refer a custom JavaScript file in the WebHelp Responsive output HTML files please follow these steps:
  1. Include the script declaration into an well-formed XML file. For example the content of the XML file should look like:

    Code: Select all

    <script type="text/javascript" src="${oxygen-webhelp-output-dir}/my-script.js"/>

    Note: Note that the example above uses the ${oxygen-webhelp-output-dir} macro in order specify the path of the referenced JavaScript file relative to the output directory.
    Note: If you want to reference multiple JavaScript files, place the <script> elements within a <div> element. For example:

    Code: Select all

    <div>
      <script type="text/javascript" src="http://www.example.com/my-script1.js"/>
      <script type="text/javascript" src="${oxygen-webhelp-output-dir}/my-script2.js"/>
    </div>
  2. Edit the WebHelp Responsive transformation scenario and set the value for the webhelp.fragment.head parameter to the absolute path of the XML file at step 1.
    Note: If you want to insert the JavaScript reference in another location within the HTML page you can find the complete list of available parameters here: https://www.oxygenxml.com/doc/versions/ ... ders_usage

In order to copy JavaScript resources to the output directory follow these steps:
  1. Place all your JavaScript resources in the same directory.
  2. Edit the WebHelp Responsive transformation scenario and set the value for the webhelp.custom.resources parameter to the absolute path of the directory at step 1.
    Note: All files from this directory will be copied to the root of the WebHelp output.

The procedure of including custom CSS files in the output is similar with the one above.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “Feature Request”

Who is online

Users browsing this forum: No registered users and 1 guest