Nondigestible Purple Mayonnaise

    spainter
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.13 • Public • Published

    GitHub license npm version contributions welcome HitCount update:spainter.pychat.org

    Spainter. Web browSer painter

    DEMO

    Integrating into you server:

    • If you use bundler like webpack:
    npm i spainter lines-logger
    import Painter from 'spainter';
    import 'spainter/index.sass'; // you can import index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
    import {LoggerFactory} from 'lines-logger'; // yarn install lines-logger
    const containerPainter = document.createElement('div');
    document.body.appendChild(containerPainter);
    const p = new Painter(containerPainter, {logger: new LoggerFactory().getLogger('spainter')});
    

    If you use fontello in your server, you can generate single font importing no-fonts.sass, joining it with config.json

    • If you use server rendering and cdn:
    <script src="https://cdn.jsdelivr.net/npm/spainter@1.2.10/index.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter@1.2.10/index.css"/>
    <div id="containerPainter"></div>
    <script>
    var p = new Painter(containerPainter);
    </script>

    Target the latest version instead of 1.2.10 npm version

    • You can find an example on pychat

    • Additional parameters

    new Painter(containerPainer, {
      textClass: 'input-txt-class', // set class for all input[type=text] elements
      buttonClass: 'input-button-class', // set class for all input[type=button] elements
      rangeClass: 'input-range-class', // set class for all input[type=range]elements
      rangeFactory: (parentElement) => { // use this div for input[range], e.g. you can use material-design
        var input = document.createElement('input');
        input.type = 'range';
        // you can also do parentElement.
        return input;
      },
      onBlobPaste: function(blob) { // example of uploading image to server
        var formData = new FormData();
        formData.append('file', blob, 'specifyFileNameHereIfNeeded.png');
        fetch(`${host}/upload_file`, {
          method: "POST",
          body: formData,
        }).then(e => {
          console.log('server response', e);
        });
      },
      logger: { // better use lines-logger instead this constructions. If you don't wanna install it, use this ugly construction below
        debug: function log() {
          var args = Array.prototype.slice.call(arguments);
          var parts = args.shift().split('{}');
          var params = [window.console, '%c' + 'painter', 'red'];
          for (var i = 0; i < parts.length; i++) {
            params.push(parts[i]);
            if (typeof args[i] !== 'undefined') {
              params.push(args[i])
            }
          }
          return Function.prototype.bind.apply(console.log, params);
        }
      }
    })

    CAUTION

    Spainter uses flexbox if you need to support browsers like IE 9 and below, you're free to create a pull request to remove flexbox.

    Contribute

    To build spainter you need

    • yarn run build
    • Open index.html in browser To modify icons use bash generate-fontello.sh. it will show you help.

    I also intentionally leaved styles empty so you can easily override them according to your website design. If you want to prettify it a bit, you're wellcome to create a separate .css file with styles.

    Keywords

    Install

    npm i spainter

    DownloadsWeekly Downloads

    1

    Version

    1.2.13

    License

    MIT

    Unpacked Size

    132 kB

    Total Files

    16

    Last publish

    Collaborators

    • deathangel908