Création d'un filigrane mobile simple pour les sites Web utilisant JavaScript

Création d’un filigrane mobile simple pour les sites Web utilisant JavaScript

Dans cet article, nous aborderons environ Création d’un filigrane mobile simple pour les sites Web utilisant Javascript. Ici, je vais fournir un simple et gratuit Javascript plugin ou module qui génère un simple filigrane de site. L’objectif principal de cet article est de fournir aux étudiants en informatique et aux nouveaux programmeurs une référence pour améliorer leurs connaissances et leurs compétences à l’aide de la programmation orientée objet JavaScript.

Comment créer un filigrane mobile simple en utilisant JavaScript ?

Créer un filigrane pour les sites Web n’est pas si compliqué. En fait, nous pouvons simplement ajouter le filigrane en ajoutant le script HTML du filigrane sur l’interface de votre site et en ajoutant un script de styles pour la conception. En utilisant JavaScript, nous pouvons créer un filigrane texte/image simple pour les sites Web en Manipulation du DOM (Document Object Model) et ajouter un écouteur d’événement pour déplacer l’eau de l’emplacement actuel à un autre.

Plug-in JavaScript simple

Ci-dessous le script d’un simple Plug-in JS qui génère un filigrane mobile pour les sites Web. Le script a été écrit en utilisant l’approche JS OOP.

class SiteWatermark{
    constructor(id, _html, defaultLocation = 'bottom-right', styleOptions = {}, styleConfig, _containerStyles, _container, currentLocation){
        /**
            * Watermark Styles
            */
        this.styleConfig = {
            width : styleOptions.width || 'auto',
            background : styleOptions.background || '#e1e1e1',
            padding : styleOptions.padding || '0.5em 1.5em',
            border : styleOptions.border || '1px solid #bbafaf',
            position : styleOptions.position || 'fixed',
            "z-index" : styleOptions.zIndex || '99',
            "border-radius" : styleOptions.borderRadius || '15px',
            "min-width" : '15px',
            opacity : styleOptions.opacity || '.5',
            "text-align" : styleOptions.textAlign || 'left',
        }
        defaultLocation = defaultLocation.toLowerCase()
        /**
            * set Default window location
            */
        this.setLocation(defaultLocation)
 
        // Container styles
        this._containerStyles = this._containerStyles
 
        // Watermark Container Element
        this._container = document.createElement('div')
 
        // Watermark Container Element ID
        this.id = id
 
        // Watermark Container Element Content/innerHTML
        this._html = _html
        this.currentLocation = defaultLocation
 
        // Watermark Container Element hover Event Listener
        this._container.addEventListener('mouseenter', function(e){
            e.preventDefault();
            if(this.currentLocation == 'bottom-right'){
                this.currentLocation = 'bottom-left'
            }else if(this.currentLocation == 'bottom-left'){
                this.currentLocation = 'top-left'
            }else if(this.currentLocation == 'top-left'){
                this.currentLocation = 'top-right'
            }else if(this.currentLocation == 'top-right'){
                this.currentLocation = 'bottom-right'
            }
            this.setLocation(this.currentLocation)
            this.init()
        }.bind(this))
    }
    /**
        * Set Watermark Location
        * @param {"bottom-right" || "bottom-left" || "top-left" || "top-right"} location 
        */
    setLocation(location){
        /**
            * Reset container position
            */
        if(!!this.styleConfig.top)
            delete this.styleConfig.top;
        if(!!this.styleConfig.bottom)
            delete this.styleConfig.bottom;
        if(!!this.styleConfig.right)
            delete this.styleConfig.right;
        if(!!this.styleConfig.left)
            delete this.styleConfig.left;
 
        /**
            * Update container position
            */
        if(location == "bottom-right"){
            this.styleConfig.bottom = ".5em";
            this.styleConfig.right = ".5em";
        }else if(location == "top-right"){
            this.styleConfig.top = "4em";
            this.styleConfig.right = ".5em";
        }else if(location == "top-left"){
            this.styleConfig.top = "4em";
            this.styleConfig.left = ".5em";
        }else if(location == "bottom-left"){
            this.styleConfig.bottom = ".5em";
            this.styleConfig.left = ".5em";
        }else{
            this.styleConfig.bottom = ".5em";
            this.styleConfig.right = ".5em";
        }
    }
    /**
        * Initialize Watermark
        */
    init(){
        this._containerStyles = Object.assign([], Object.keys(this.styleConfig).map(k => { return `${k}:${this.styleConfig[k]}` }))
        this._containerStyles = this._containerStyles.join(";")
        this._container.setAttribute('style', this._containerStyles)
        this._container.setAttribute('id', this.id)
        this._container.innerHTML = this._html
        document.body.appendChild(this._container)
    }
    /**
        * Update Watermark Container Styles
        * @param {str} style 
        * @param {str} value 
        */
    setStyle(style, value){
        this.styleConfig[style] = value
        this.init()
    }
    /**
        * Update Watermark Content

  


        * @param {HTML or string} html 
        */
    setHTML(html){
        this._html = html
        this.init()
    }
 
}
/**
    * This simple project was developed by:
    * 
    * SourceCode has been published @:
    * https://sourcecodester.com
    * 
    * 01-07-2023
    */

En utilisant le plugin JS ci-dessus, les développeurs peuvent simplement lancer ou générer un filigrane pour le site qu’ils construisent ou gèrent. Les filigranes créés se déplacent autour des quatre (4) coins de la fenêtre du site lorsqu’ils sont survolés. Chaque fois que les utilisateurs finaux placent le curseur de la souris sur le filigrane, le filigrane est automatiquement déplacé ou transféré vers l’autre coin de la fenêtre. Les développeurs peuvent également initier le filigrane avec le style souhaité.

Syntaxe

Voici un exemple d’extrait qui illustre l’utilisation de Plugin de filigrane JS simple.

    /**
    * new SiteWatermark()
    * @param {string} id 
    * @param {html || string} _html 
    * @param {"bottom-right" || "bottom-left" || "top-left" || "top-right"} defaultLocation 
    * @param {object(width, background, padding, border, position, zIndex, borderRadius, opacity, textAlign)} styleOptions 
    */
    var styles = {
        background:'#DAEAF1',
        width : '300px', 
        opacity : '.9', 
        textAlign : 'center', 
    }
    let wm = new SiteWatermark('SampleWaterMark',"SourceCodester","top-right",styles)
    //Initialize Watermark
        wm.init()

Changer le style de conteneur de filigrane/CSS

Vous pouvez également manipuler ou mettre à jour le style du conteneur Filigrane à l’aide de la setStyle() méthode. Voir l’extrait suivant pour l’utilisation de cette méthode.

    /**
    * setStyle(style, value)
    * Update Watermark Container Styles
    * @param {str} style 
    * @param {str} value 
    */
    wm.setStyle('background', '#bbafaf')

Modifier le contenu du filigrane

Vous pouvez également manipuler ou mettre à jour le contenu du conteneur Watermark à l’aide de la setHTML() méthode. Voir l’extrait suivant pour l’utilisation de cette méthode.

    /**
     * setHTML(html)
     * Update Watermark Content
     * @param {HTML or string} html 
     */
    wm.setHTML(`<h2 style="text-center">Sample Watermark</h2>`)

Modifier la position du conteneur de filigrane

Vous pouvez également manipuler ou mettre à jour la position du conteneur de filigrane à l’aide de la setLocation() méthode. Voir l’extrait suivant pour l’utilisation de cette méthode.

    /**
    * Set Watermark Location
    * @param {"bottom-right" || "bottom-left" || "top-left" || "top-right"} location 
    */
    wm.setHTML(`<h2 style="text-center">Sample Watermark</h2>`)
    wm.init()

Objet styleOptions de Watermark JS

Voici les styles valides suivants qui peuvent être définis par défaut à l’aide de la styleOptions.

largeur = largeur du conteneur
Contexte = arrière-plan du conteneur
rembourrage = rembourrage du conteneur
zIndex = index z du conteneur
borderRadius = rayon de bordure du conteneur
opacité = opacité du conteneur
texteAligner = aligner le texte du conteneur

Si l’option CSS souhaitée n’est pas valide pour styleOptionsvous le définissez à l’aide de la setStyle() méthode.

Exemple

Voici un exemple de script de code source qui illustre l’utilisation du Plug-in Simple Watermark JS.

Interface

index.html

<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
        html, body{
            height: 100%;
            width: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        body>nav{
            flex-shrink: 1;
        }
        body>#main{
            flex-grow: 1;
        }
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
            <a class="navbar-brand" href="./">Moving Site Watermark using JS</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
    <div class="container-fluid px-5 my-3 d-flex h-100 justify-content-center flex-column" id="main">
        <div class="col-lg-10 col-md-11 col-sm-12 col-xs-12 mx-auto">
            <div class="card rounded-0">
                <div class="card-body bg-white border-3">
                    <div class="container-fluid">
                        <h1 class="text-center">Simple Moving when Hovered Watermark for sites using JavaScript</h1>
    <!-- <div id="0623">
    </div> -->
        var wm;
        window.onload = function(){
            styles = {
                background:'#DAEAF1',
                width : '300px', 
                opacity : '.9', 
                textAlign : 'center', 
            }
            wm = new SiteWatermark('testWatermark','<a class="text-decoration-none fw-bolder text-muted" href=">sourcecodester.com</a>','top-right' , styles)
                wm.init()
        }

Résultat

J’ai également fourni l’exemple de fichier zip de code source de travail que j’ai créé et qui illustre le Plugin JS de filigrane simple. Vous pouvez le télécharger en cliquant sur le Bouton de téléchargement situé ci-dessous.

C’est ça! J’espère Cela Plug-in Simple Watermark JS pour les sites Web sera utile pour vos projets actuels et futurs.

Bon codage =)

Remarque : En raison de la taille ou de la complexité de cette soumission, l’auteur l’a soumise sous forme de fichier .zip pour raccourcir votre temps de téléchargement. Après l’avoir téléchargé, vous aurez besoin d’un programme comme Winzip pour le décompresser.

Remarque sur les virus : Tous les fichiers sont analysés une fois par jour par SourceCodester.com à la recherche de virus, mais de nouveaux virus apparaissent chaque jour, de sorte qu’aucun programme de prévention ne peut en détecter 100 %.

POUR VOTRE PROPRE SÉCURITÉ, VEUILLEZ :

1. Analysez à nouveau les fichiers téléchargés à l’aide de votre antivirus personnel avant de l’utiliser.
2. N’exécutez JAMAIS, JAMAIS des fichiers compilés (.exe, .ocx, .dll, etc.) – n’exécutez que le code source.

Télécharger ici

A propos de l'auteur