Installation
npm install --save uncensore
Markup
Markup defines only 2 custom HTML5 attributes.
1. data-censore
As the rule this attribute applies to inline element, because assumes to wrap short phrase only.
<span data-censore="бля">видете ли</span>
2. data-uncensore
data-uncensore
attribute applies to uncensore container element in case if application state is active, otherwise it's does not simply exists. This attribute appears automaticly and doesn't need to be set manually.
Usage
Note: in examples below concrete class object overrides class itself. it's not good practice, however simple example not assumed to use few class object simultaneously.
1. Include
Direct include
Include script into your project and execute code right after DOM loaded.
<!-- ... -->
<script src="/static/assets/vendor/unsektor/uncensore.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function (e) {
var uncensore = new uncensore();
});
</script>
</body>
<!-- ... -->
Include in frontend application
// AMD
define(['uncensore'], function (uncensore) {
// ...
})
// ES6 / ES2015 module
import uncensore from 'uncensore'
// CommonJS
var uncensore = require('unsektor/uncensore');
// Property of window object
window.uncensore()
// ... or simply
uncensore();
2. Use
Example 1 (Simplest way):
// Make sure that library initialization is not before DOM loaded, because
// it's required to detect application state for instant highligth.
window.addEventListener('DOMContentLoaded', function () {
window.uncensore = new uncensore();
});
Example 2 (Example 1 + customization):
// Custom uncensore container DOM element
var uncensoreContainer = document.querySelector('#myContainer');
// Web-site page URI to redirect user first time used this function
var uncensoreInfoPageURI = window.location.protocol + '//www.example.tld/censore';
var uncensore = new uncensore(uncensoreContainer, {
'uri': uncensoreInfoPageURI
});
Example 3 (Example 2 + domain configuration):
If your web-aplplication also serves subdomains, it's required to define base domain (e.g., 'example.tld').
// Custom uncensore container DOM element
var uncensoreContainer = document.body;
// Web-site page URI to redirect user first time used this function
var uncensoreInfoPageURI = window.location.protocol + '//www.example.tld/censore';
// Domain configuration option (e.g., 'example.com' or 'subdomain.example.com').
// If not specified, defaults to the host portion of the current document location
// (but not including subdomains).
var uncensoreDomain = 'example.tld';
var uncensore = new uncensore(uncensoreContainer, {
'uri': uncensoreInfoPageURI,
'domain': uncensoreDomain
});
Example 4 (Example 3 + Custom code):
var uncensore = require('unsektor/uncensore');
var uncensoreContainer = document.body;
/* @group Optional code block */
var censureToggledHandler = function (e) {
if (!e.detail.state){
e.detail.censoredElement.removeAttribute('aria-label');
e.detail.censoredElement.classList.remove('tooltipped', 'tooltipped-n')
} else {
if (e.detail.censureValueBefore !== "") {
e.detail.censoredElement.setAttribute('aria-label', e.detail.censureValueBefore);
e.detail.censoredElement.classList.add('tooltipped', 'tooltipped-n')
}
}
};
// Subscribe handler callback function to uncencsore container to handle uncensore toggle action event.
uncensoreContainer.addEventListener('censureToggled', censureToggledHandler);
/* @end */
window.uncensore = new uncensore(uncensoreContainer, {
'uri': uncensoreInfoPageURI,
'domain': uncensoreDomain
});
if uncensore instance defined in global scope, you may toggle application mode manually. It's useful to build web-site page to warn user first time used this function. For example:
<!-- ... -->
<div class="button" onclick="uncensore.toggle();">
<span data-censore="Bring the fucking censore back">Turn censore off</span>
</div>
<!-- ... -->
3. Stylization
This library is not specially designed to be compatible with each markup methodology, because idea assumes to hide censored content, especially from SEO robots.
// SCSS code
/* Censored element stylization */
[data-censore] {
// disabled state
border-bottom: 1px rgba(0, 0, 0, .12) dotted;
// enabled state
body[data-uncensore] & {
background: rgba(255, 0, 0, .08);
cursor: pointer;
transition: background-color .3s ease;
border-bottom-color: transparent;
}
}
/* Other element stylization depending on uncensore application state */
.censore-block {
// disabled state
color: white;
// enabled state
body[data-uncensore] & {
color: red;
}
}
// Note: code will be different in case if your application uses not-standard container element.
Finally, writing some custom code using event system (like in example 4) makes possible to extend this application as needed.
Keyboard shortuct
This library also provides a keyboard shortcut to toggle application state ⌥D
(Alt + D
).
Acknowledgment
- Александр Котомкин
- Анна Желяк