Skip to content

Instantly share code, notes, and snippets.

@KagurazakaNyaa
Created June 14, 2020 17:32
Show Gist options
  • Save KagurazakaNyaa/6c1fcd1b44d083da14b8b4f3c0bf4f34 to your computer and use it in GitHub Desktop.
Save KagurazakaNyaa/6c1fcd1b44d083da14b8b4f3c0bf4f34 to your computer and use it in GitHub Desktop.
Pathfinder WaterMark
[PLUGIN]
MODULES_ENABLED = 1
[PLUGIN.MODULES]
DEMO = ./app/ui/module/demo
EMPTY = ./app/ui/module/empty
WATERMARK = ./app/ui/module/watermark
define([ // dependencies for this module
'module/base', // abstract `parent` module class definition [required]
'app/render' // ... for demo purpose, we load a Render helper object
], (BaseModule, Render) => {
'use strict';
/**
* WatermarkModule class
* -> skeleton for custom module plugins
* @type {WatermarkModule}
*/
let WatermarkModule = class WatermarkModule extends BaseModule {
constructor(config = {}) {
super(Object.assign({}, new.target.defaultConfig, config));
}
/**
* initial module render method
* -> implementation is enforced by BaseModule
* -> must return a single node element
* @param mapId
* @param systemData
* @returns {HTMLElement}
*/
render(mapId, systemData){
this._systemData = systemData;
// ... append your custom module body
let bodyEl = Object.assign(document.createElement('div'), {
className: this._config.bodyClassName
});
this.moduleElement.append(bodyEl);
return this.moduleElement;
}
/**
* init module
*/
init(){
super.init();
}
beforeHide(){
super.beforeHide();
}
beforeDestroy(){
super.beforeDestroy();
}
onSortableEvent(name, e){
super.onSortableEvent(name, e);
}
};
WatermarkModule.isPlugin = true; // module is defined as 'plugin'
WatermarkModule.scope = 'system'; // module scope controls how module gets updated and what type of data is injected
WatermarkModule.sortArea = 'a'; // default sortable area
WatermarkModule.position = 15; // default sort/order position within sortable area
WatermarkModule.label = 'watermark'; // static module label (e.g. description)
WatermarkModule.defaultConfig = {
className: 'pf-system-watermark-module', // class for module
sortTargetAreas: ['a', 'b', 'c'], // sortable areas where module can be dragged into
headline: 'watermark Module',
};
return WatermarkModule;
});
let container = document.getElementById('pf-map-tab-element');
let content = document.getElementsByClassName('hidden-xs')[0].innerHTML;
var canvas = document.createElement('canvas');
canvas.setAttribute('width', '150px');
canvas.setAttribute('height', '150px');
var ctx = canvas.getContext("2d");
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = "20px oxygen-sans";
ctx.fillStyle = 'rgba(184, 184, 184, 0.1)';
ctx.rotate(Math.PI / 180 * 45);
ctx.fillText(content, 130, 0, 150);
var base64Url = canvas.toDataURL();
const watermarkDiv = document.createElement("div");
watermarkDiv.setAttribute('style', `
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
pointer-events:none;
background-repeat:repeat;
background-image:url('${base64Url}')`);
container.style.position = 'relative';
container.insertBefore(watermarkDiv, container.firstChild);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment