watermark-ng

A pure js library for generating Watermark DOM that can be mounted on any specified HTML block element instead of the document.body only.

Extended from package [email protected] for personal usage. Original version here

What have been promoted in this package:

• ✅ Any custom block element that the watermark can be mounted on instead of only the document.body
• ✅ Compatible with IE 11
• ✅ Introduce a new callback while the watermark is removed by any inappropriate methods (via Dev tools or other code)
• ✅ Easier to reload some later content, tips or any other options for the created watermark using the load function
• ✅ More than one watermark instance can now be applied within the same web-page as long as each instance has specified different watermarkId
• ✅ After the web page is resized, the watermark will be reloaded automatically, which can prevent some display issues of the watermark

Detail Introduction

The watermark DOM element can now be mounted on any specified HTML block element through two attributes: the parentElement and the parentElementId.

A new method load is also introduced for some later modifications of the created watermark. Nearly every options can be reload using this method including the parentElement that the watermark DOM element has already been mounted on.

If the watermark-mounted parentElement is needed to be changed, delete the old one and then generate a new Watermark instance is recommended.

Besides, compatibility problem of IE 11 is solved in this library.

Under some circumstances, the watermark DOM element will be removed in an inappropriate way that not follow a regular manner of the website and result in some unforeseeable consequences. Hence, there is a callback onWatermarkRemove will be triggered when the observer find out that the watermark is removed by any methods other than the destroy function.

Usage

install

npm install watermark-ng

basic usage

import Watermark from "watermark-ng"

const watermark = new Watermark({
    content: 'Hello World!',
    parentElement: document.querySelector("#target"),
    onWatermarkRemove:function(){
        alert("Oops...the watermark is removed!");
    }
});
watermark.create();

// to show the reload
setTimeout(() => {
    watermark.load({
        content: "Bye",
        parentElementId: "targetNext"
    })
}, 1234);

(Part of the) Options

| Name | Type | Default | Description | | ----------------- | ----------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | content | String | '' | The text content of the watermark | | tip | String | '' | The second text content of the watermark. If it is undefined, only the content will be shown | | parentElementId | String | '' | The id of the element that the watermark instance will be mounted on | | parentElement | DOM Element | document.body | The element that the watermark instance will be mounted on (higher priority) | | fontSize | Number | 18 | Font size | | rotate | Number | 330 | Rotate of the text (in degree) | | fontFamily | String | 'sans-serif' | Font family | | alpha | Number | 0.25 | Text alpha | | color | String | '#666666' | Text color | | onSuccess | Function | function(){} | Called after the watermark is created successfully | | onDestroy | Function | function(){} | Called after the watermark is destroyed successfully | | onWatermarkRemove | Function | function(){} | Called after the watermark is removed not in appropriate way (via Dev Tools or other code) | | watermarkId | String | 'wm-ng-dom' | If you need to applied more than one watermark instances within the same web-page, at least one watermark instance should have specified a different watermarkId. Otherwise the display of watermark may be affected. |

Examples

How to applied two watermark within the same page:

// Watermark One
const watermark = new Watermark({
    content: 'Hello World!',
    parentElementId: "target1",
});
watermark.create();

// Watermark Two
const watermark2 = new Watermark({
    content: 'Second watermark',
    parentElementId: "target2",
    watermarkId:"wm-ng2",
});
watermark2.create();