@wsdot/elc-ui NPM

@wsdot/elc-ui

User interface for wsdot-elc.

Install

npm install @wsdot/elc-ui

Generate required stylesheets

Install @wsdot/elc-ui into your project.

Copy the following into a new file called generate-css.js.

const css = require("@wsdot/elc-ui").css;
const fs = require("fs");
const path = require("path");

// Modify the output path here to point to your desired location.
const outCssDir = path.resolve(__dirname, "..", "Style");

// Create the output directory.
fs.mkdir(outCssDir, err => {
  if (err) {
    if (err.code == "EEXIST") {
      console.log(
        `Directory already exists: ${outCssDir}. Skipping creation.`
      );
    } else {
      console.error(err);
    }
  }

  // For each property of the css object, write a new CSS file.
  for (const cssName in css) {
    if (css.hasOwnProperty(cssName)) {
      const cssData = css[cssName];
      let file = `${cssName}.css`;
      if (!file.match(/^elc-ui/)) {
        file = `elc-ui-${file}`;
      }
      const destPath = path.resolve(outCssDir, file);
      fs.writeFile(destPath, cssData, err => {
        if (err) {
          console.error(err);
        } else {
          console.log(`file ${destPath} has been written.`);
        }
      });
    }
  }
});

Execute the script
```
node generate-css.js
```

Reference the stylesheets in your HTML file that will have the ELC UI control.

<!DOCTYPE html>
<html>
<head>
    <title>My example page</title>
    <link rel="stylesheet" href="Style/elc-ui-behavior.css" /> <!-- required -->
    <link rel="stylesheet" href="Style/elc-ui.css" /> <!-- optional. You can omit and specify your own styling. -->
    ...
</head>
...
</html>

wsdot lrs elc

tslib wsdot-elc

@infinitebrahmanuniverse/nolb-_ws @everything-registry/sub-chunk-1023 @zalastax/nolb-_ws @wsdot/elc-ui-arcgis-v3

4.0.0-0

6 years ago