WordPress.org
Get WordPress

Plugin Directory

Changeset 3405257


Ignore:
Timestamp:
11/28/2025 02:08:01 PM (2 weeks ago)
Author:
dhanendran
Message:

tagging version 1.0.0

Location:
qr-code-creator
Files:
5 edited
3 copied

Legend:

Unmodified
Added
Removed

  • qr-code-creator/tags/1.0.0/qr-code-creator.php

    r3215850 r3405257  
    11<?php
    2 
    32/**
    4  * @author            Dhanendran (https://dhanendranrajagopal.me/)
    5  * @link              https://dhanendranrajagopal.me/
    6  * @since             0.1.0
    7  * @package           qr-code-creator
     3 * QR Code Creator
     4 *
     5 * A WordPress plugin which will help you to create QR Codes.
     6 *
     7 * @package           QRCodeCreator
     8 * @author            Dhanendran Rajagopal
     9 * @copyright         2024 Dhanendran Rajagopal
     10 * @license           GPL-2.0+
    811 *
    912 * @wordpress-plugin
    … …  
    1114 * Plugin URI:        https://github.com/dhanendran/qr-code-creator
    1215 * Description:       A WordPress plugin which will help you to create QR Codes.
    13  * Tags:              QR Code, Generator, QR Code Creator, QR Code Generator
    14  * Version:           0.1.5
    15  * Author:            Dhanendran
    16  * Author URI:        http://dhanendranrajagopal.me/
     16 * Short Description: Create customizable QR codes with size, color, and error correction options.
     17 * Version:           0.2.0
     18 * Author:            Dhanendran Rajagopal
     19 * Author URI:        https://dhanendranrajagopal.me/
    1720 * License:           GPL-2.0+
    1821 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
    1922 * Text Domain:       qr-code-creator
     23 * Domain Path:       /languages
     24 * Requires at least: 4.4
     25 * Tested up to:      6.7.4
     26 * Requires PHP:      7.4
    2027 */
    2128
    … …  
    2532}
    2633
     34/**
     35 * Plugin version constant.
     36 *
     37 * @since 0.2.0
     38 */
     39define( 'QR_CODE_CREATOR_VERSION', '0.2.0' );
     40
     41/**
     42 * Plugin directory path.
     43 *
     44 * @since 0.2.0
     45 */
     46define( 'QR_CODE_CREATOR_PATH', plugin_dir_path( __FILE__ ) );
     47
     48/**
     49 * Plugin directory URL.
     50 *
     51 * @since 0.2.0
     52 */
     53define( 'QR_CODE_CREATOR_URL', plugin_dir_url( __FILE__ ) );
     54
     55/**
     56 * The core plugin class.
     57 *
     58 * @since 0.1.0
     59 */
    2760class QRCodeCreator {
     61
    2862    /**
    29      * Start up
     63     * Plugin version.
     64     *
     65     * @since 0.2.0
     66     * @var string
    3067     */
    31     public function init() {
    32         add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
     68    private $version;
    3369
    34         wp_enqueue_script( 'qr_code_creator_script', plugin_dir_url( __FILE__ ) . 'script.js', array(), '1.0.0', true );
     70    /**
     71     * Admin instance.
     72     *
     73     * @since 0.2.0
     74     * @var QRCodeCreator_Admin
     75     */
     76    private $admin;
     77
     78    /**
     79     * Initialize the plugin.
     80     *
     81     * @since 0.1.0
     82     */
     83    public function __construct() {
     84        $this->version = QR_CODE_CREATOR_VERSION;
     85        $this->load_dependencies();
     86        $this->init_hooks();
    3587    }
    3688
    3789    /**
    38      * Add options page
     90     * Load required dependencies.
     91     *
     92     * @since 0.2.0
    3993     */
    40     public function add_plugin_page() {
    41         add_options_page(
    42             'QR Code Creator',
    43             'QR Code Creator',
    44             'manage_options',
    45             'qr-code-creator',
    46             array( $this, 'create_admin_page' )
    47         );
     94    private function load_dependencies() {
     95        require_once QR_CODE_CREATOR_PATH . 'includes/class-qrcode-creator-admin.php';
    4896    }
    4997
    5098    /**
    51      * Options page callback
     99     * Initialize hooks.
     100     *
     101     * @since 0.2.0
    52102     */
    53     public function create_admin_page() {
    54         ?>
    55         <div class="qr-code-creator">
    56             <h1>QR Code Creator</h1>
    57             <textarea name="qr_code_content" id="qr_code_content" rows="10" cols="70" placeholder="Enter your content here"></textarea>
    58             <div class="actions">
    59                 <button id="create_qr_code" class="button button-primary">Create</button>
    60                 <button id="reset_qr_code" class="button button-secondary">Reset</button>
    61             </div>
    62             <h2>QR Code</h2>
    63             <img id="qr_code">
    64             <h4>Download: </h4>
    65             <div id="qr_code_download_link"></div>
    66         </div>
    67         <?php
     103    private function init_hooks() {
     104        add_action( 'plugins_loaded', array( $this, 'init' ) );
     105        register_activation_hook( __FILE__, array( $this, 'activate' ) );
     106        register_deactivation_hook( __FILE__, array( $this, 'deactivate' ) );
     107    }
     108
     109    /**
     110     * Initialize the plugin.
     111     *
     112     * @since 0.1.0
     113     */
     114    public function init() {
     115        if ( is_admin() ) {
     116            $this->admin = new QRCodeCreator_Admin( $this->version );
     117        }
     118    }
     119
     120    /**
     121     * Activation hook.
     122     *
     123     * @since 0.2.0
     124     */
     125    public function activate() {
     126        // Add activation logic here if needed.
     127    }
     128
     129    /**
     130     * Deactivation hook.
     131     *
     132     * @since 0.2.0
     133     */
     134    public function deactivate() {
     135        // Add deactivation logic here if needed.
    68136    }
    69137}
    70138
    71 if ( is_admin() ) {
    72     $qrCodeCreator = new QRCodeCreator();
    73     $qrCodeCreator->init();
     139/**
     140 * Initialize the plugin.
     141 *
     142 * @since 0.1.0
     143 */
     144function qr_code_creator_init() {
     145    new QRCodeCreator();
    74146}
     147qr_code_creator_init();
    75148
    76149

  • qr-code-creator/tags/1.0.0/script.js

    r1855115 r3405257  
    1 jQuery(document).ready(function($) {
    2     // Create QR code.
    3     $( '#create_qr_code' ).on( 'click', function( e ) {
    4         var content = $('#qr_code_content').val().trim();
    5 
    6         if ( content.length <= 0 ) {
    7             return;
    8         }
    9 
    10         content = encodeURIComponent( content );
    11 
    12         var imgUrl = 'https://api.qrserver.com/v1/create-qr-code/?data=' + content;
    13 
    14         $( '#qr_code' ).attr( 'src', imgUrl + '&size=150x150' );
    15 
    16         imgUrl += '&size=250x250';
    17         $( '#qr_code_download_link' ).html( '<a href="'+imgUrl+'&format=png" target="_blank">PNG</a> | <a href="'+imgUrl+'&format=jpg" target="_blank">JPG</a> | <a href="'+imgUrl+'&format=svg" target="_blank">SVG</a> | <a href="'+imgUrl+'&format=eps" target="_blank">EPS</a>' );
    18 
    19     } );
    20 
    21     // Reset text field.
    22     $( '#reset_qr_code' ).on( 'click', function( e ) {
    23         $('#qr_code_content').val('');
    24         $( '#qr_code' ).attr( 'src', '');
    25         $( '#qr_code_download_link' ).html('');
     1/**
     2 * QR Code Creator Admin Scripts
     3 *
     4 * @package QRCodeCreator
     5 */
     6
     7(function($) {
     8    'use strict';
     9
     10    /**
     11     * QR Code Creator Admin Object
     12     */
     13    const QRCodeCreatorAdmin = {
     14        /**
     15         * Initialize
     16         */
     17        init: function() {
     18            this.bindEvents();
     19        },
     20
     21        /**
     22         * Bind events
     23         */
     24        bindEvents: function() {
     25            $( '#create_qr_code' ).on( 'click', this.handleCreateQRCode.bind( this ) );
     26            $( '#reset_qr_code' ).on( 'click', this.handleReset.bind( this ) );
     27            $( '#qr_code_content' ).on( 'keypress', function( e ) {
     28                if ( e.which === 13 && e.ctrlKey ) {
     29                    $( '#create_qr_code' ).trigger( 'click' );
     30                }
     31            });
     32        },
     33
     34        /**
     35         * Handle create QR code
     36         *
     37         * @param {Event} e Event object
     38         */
     39        handleCreateQRCode: function( e ) {
     40            e.preventDefault();
     41
     42            const content = $( '#qr_code_content' ).val().trim();
     43
     44            // Validate content
     45            if ( content.length <= 0 ) {
     46                this.showError( qrCodeCreator.i18n.errorEmpty );
     47                return;
     48            }
     49
     50            // Get form values
     51            const size     = $( '#qr_code_size' ).val() || '200x200';
     52            const ecc      = $( '#qr_code_ecc' ).val() || 'M';
     53            const color    = $( '#qr_code_color' ).val() || '#000000';
     54            const bgcolor  = $( '#qr_code_bgcolor' ).val() || '#FFFFFF';
     55
     56            // Show loading state
     57            this.showLoading();
     58
     59            // Build API URL
     60            const apiUrl = this.buildApiUrl( content, size, ecc, color, bgcolor );
     61
     62            // Generate preview URL (smaller size for preview)
     63            const previewSize = '200x200';
     64            const previewUrl  = this.buildApiUrl( content, previewSize, ecc, color, bgcolor );
     65
     66            // Load QR code image
     67            this.loadQRCode( previewUrl, apiUrl );
     68        },
     69
     70        /**
     71         * Build API URL
     72         *
     73         * @param {string} content Content to encode
     74         * @param {string} size QR code size
     75         * @param {string} ecc Error correction level
     76         * @param {string} color Foreground color
     77         * @param {string} bgcolor Background color
     78         * @return {string} API URL
     79         */
     80        buildApiUrl: function( content, size, ecc, color, bgcolor ) {
     81            const baseUrl = qrCodeCreator.apiUrl || 'https://api.qrserver.com/v1/create-qr-code/';
     82            const params  = {
     83                data:    encodeURIComponent( content ),
     84                size:    size,
     85                ecc:     ecc,
     86                color:   color.replace( '#', '' ),
     87                bgcolor: bgcolor.replace( '#', '' ),
     88            };
     89
     90            const queryString = Object.keys( params )
     91                .map( function( key ) {
     92                    return encodeURIComponent( key ) + '=' + encodeURIComponent( params[ key ] );
     93                })
     94                .join( '&' );
     95
     96            return baseUrl + '?' + queryString;
     97        },
     98
     99        /**
     100         * Load QR code image
     101         *
     102         * @param {string} previewUrl Preview image URL
     103         * @param {string} downloadUrl Download image URL
     104         */
     105        loadQRCode: function( previewUrl, downloadUrl ) {
     106            const img = new Image();
     107
     108            img.onload = function() {
     109                QRCodeCreatorAdmin.hideLoading();
     110                QRCodeCreatorAdmin.hideError();
     111                QRCodeCreatorAdmin.showQRCode( previewUrl, downloadUrl );
     112            };
     113
     114            img.onerror = function() {
     115                QRCodeCreatorAdmin.hideLoading();
     116                QRCodeCreatorAdmin.showError( qrCodeCreator.i18n.errorApi );
     117            };
     118
     119            img.src = previewUrl;
     120        },
     121
     122        /**
     123         * Show QR code
     124         *
     125         * @param {string} previewUrl Preview image URL
     126         * @param {string} downloadUrl Download image URL
     127         */
     128        showQRCode: function( previewUrl, downloadUrl ) {
     129            $( '#qr_code' ).attr( 'src', previewUrl );
     130            $( '#qr_code_preview' ).fadeIn();
     131
     132            // Generate download links
     133            const formats = [
     134                { name: 'PNG', format: 'png' },
     135                { name: 'JPG', format: 'jpg' },
     136                { name: 'SVG', format: 'svg' },
     137                { name: 'EPS', format: 'eps' },
     138            ];
     139
     140            let downloadLinks = '';
     141            formats.forEach( function( format ) {
     142                const url = downloadUrl + '&format=' + format.format;
     143                downloadLinks += '<a href="' + url + '" class="button" download target="_blank" rel="noopener noreferrer">' + format.name + '</a> ';
     144            });
     145
     146            $( '#qr_code_download_link' ).html( downloadLinks );
     147            $( '#qr_code_download' ).fadeIn();
     148        },
     149
     150        /**
     151         * Show loading state
     152         */
     153        showLoading: function() {
     154            $( '#qr_code_loading' ).show();
     155            $( '#qr_code_preview' ).hide();
     156            $( '#qr_code_download' ).hide();
     157            $( '#qr_code_error' ).hide();
     158        },
     159
     160        /**
     161         * Hide loading state
     162         */
     163        hideLoading: function() {
     164            $( '#qr_code_loading' ).hide();
     165        },
     166
     167        /**
     168         * Show error message
     169         *
     170         * @param {string} message Error message
     171         */
     172        showError: function( message ) {
     173            $( '#qr_code_error p' ).text( message );
     174            $( '#qr_code_error' ).fadeIn();
     175            $( '#qr_code_preview' ).hide();
     176            $( '#qr_code_download' ).hide();
     177        },
     178
     179        /**
     180         * Hide error message
     181         */
     182        hideError: function() {
     183            $( '#qr_code_error' ).hide();
     184        },
     185
     186        /**
     187         * Handle reset
     188         *
     189         * @param {Event} e Event object
     190         */
     191        handleReset: function( e ) {
     192            e.preventDefault();
     193
     194            // Reset form
     195            $( '#qr_code_content' ).val( '' );
     196            $( '#qr_code_size' ).val( '200x200' );
     197            $( '#qr_code_ecc' ).val( 'M' );
     198            $( '#qr_code_color' ).val( '#000000' );
     199            $( '#qr_code_bgcolor' ).val( '#FFFFFF' );
     200
     201            // Reset preview
     202            $( '#qr_code' ).attr( 'src', '' );
     203            $( '#qr_code_preview' ).hide();
     204            $( '#qr_code_download' ).hide();
     205            $( '#qr_code_download_link' ).html( '' );
     206            $( '#qr_code_error' ).hide();
     207            $( '#qr_code_loading' ).hide();
     208
     209            // Focus on content field
     210            $( '#qr_code_content' ).focus();
     211        },
     212    };
     213
     214    // Initialize when document is ready
     215    $( document ).ready( function() {
     216        QRCodeCreatorAdmin.init();
    26217    });
    27 });
     218
     219})( jQuery );
     220

  • qr-code-creator/tags/1.0.0/style.css

    r1855115 r3405257  
    1 .qr-code-creator .actions {
    2     display: block;
    3 }
     1/**
     2 * QR Code Creator Admin Styles
     3 *
     4 * @package QRCodeCreator
     5 */
     6
     7/* Container */
     8.qr-code-creator-admin {
     9    max-width: 1200px;
     10}
     11
     12.qr-code-creator-container {
     13    display: flex;
     14    gap: 30px;
     15    margin-top: 20px;
     16}
     17
     18.qr-code-creator-form {
     19    flex: 1;
     20    min-width: 0;
     21}
     22
     23.qr-code-creator-result {
     24    flex: 0 0 400px;
     25    min-width: 0;
     26}
     27
     28/* Form Styles */
     29.qr-code-creator-form .form-table {
     30    margin-top: 20px;
     31}
     32
     33.qr-code-creator-form .form-table th {
     34    width: 200px;
     35    padding: 20px 10px 20px 0;
     36    vertical-align: top;
     37}
     38
     39.qr-code-creator-form .form-table td {
     40    padding: 15px 10px;
     41    vertical-align: top;
     42}
     43
     44.qr-code-creator-form textarea {
     45    width: 100%;
     46    max-width: 100%;
     47    resize: vertical;
     48    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     49}
     50
     51.qr-code-creator-form select {
     52    min-width: 200px;
     53}
     54
     55.qr-code-creator-form input[type="color"] {
     56    width: 80px;
     57    height: 40px;
     58    cursor: pointer;
     59    border: 1px solid #8c8f94;
     60    border-radius: 4px;
     61}
     62
     63.qr-code-creator-form .description {
     64    margin-top: 8px;
     65    margin-bottom: 0;
     66    color: #646970;
     67    font-style: normal;
     68}
     69
     70.qr-code-creator-form .submit {
     71    margin-top: 20px;
     72    padding-top: 20px;
     73    border-top: 1px solid #dcdcde;
     74}
     75
     76.qr-code-creator-form .button {
     77    margin-right: 10px;
     78}
     79
     80/* Result Styles */
     81.qr-code-creator-result {
     82    background: #fff;
     83    border: 1px solid #c3c4c7;
     84    border-radius: 4px;
     85    padding: 20px;
     86    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
     87}
     88
     89.qr-code-creator-result h2 {
     90    margin-top: 0;
     91    margin-bottom: 20px;
     92    padding-bottom: 10px;
     93    border-bottom: 1px solid #dcdcde;
     94}
     95
     96/* Loading State */
     97.qr-code-loading {
     98    text-align: center;
     99    padding: 40px 20px;
     100}
     101
     102.qr-code-loading .spinner {
     103    float: none;
     104    margin: 0 auto 10px;
     105}
     106
     107.qr-code-loading p {
     108    margin: 0;
     109    color: #646970;
     110}
     111
     112/* Error State */
     113.qr-code-error {
     114    margin: 0 0 20px 0;
     115}
     116
     117.qr-code-error p {
     118    margin: 0;
     119}
     120
     121/* Preview */
     122.qr-code-preview {
     123    text-align: center;
     124    margin-bottom: 20px;
     125    padding: 20px;
     126    background: #f6f7f7;
     127    border-radius: 4px;
     128}
     129
     130.qr-code-preview img {
     131    max-width: 100%;
     132    height: auto;
     133    border: 1px solid #dcdcde;
     134    border-radius: 4px;
     135    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     136}
     137
     138/* Download Links */
     139.qr-code-download {
     140    margin-top: 20px;
     141    padding-top: 20px;
     142    border-top: 1px solid #dcdcde;
     143}
     144
     145.qr-code-download h3 {
     146    margin-top: 0;
     147    margin-bottom: 15px;
     148    font-size: 14px;
     149}
     150
     151.qr-code-download-links {
     152    display: flex;
     153    flex-wrap: wrap;
     154    gap: 10px;
     155}
     156
     157.qr-code-download-links .button {
     158    margin: 0;
     159    text-decoration: none;
     160}
     161
     162.qr-code-download-links .button:hover {
     163    text-decoration: none;
     164}
     165
     166/* Info Section */
     167.qr-code-creator-info {
     168    margin-top: 30px;
     169    padding: 20px;
     170    background: #f0f6fc;
     171    border-left: 4px solid #2271b1;
     172    border-radius: 4px;
     173}
     174
     175.qr-code-creator-info h3 {
     176    margin-top: 0;
     177}
     178
     179.qr-code-creator-info p {
     180    margin-bottom: 0;
     181}
     182
     183.qr-code-creator-info a {
     184    text-decoration: none;
     185}
     186
     187.qr-code-creator-info a:hover {
     188    text-decoration: underline;
     189}
     190
     191/* Responsive Design */
     192@media screen and (max-width: 782px) {
     193    .qr-code-creator-container {
     194        flex-direction: column;
     195        gap: 20px;
     196    }
     197
     198    .qr-code-creator-result {
     199        flex: 1;
     200    }
     201
     202    .qr-code-creator-form .form-table th,
     203    .qr-code-creator-form .form-table td {
     204        display: block;
     205        width: 100%;
     206        padding: 10px 0;
     207    }
     208
     209    .qr-code-creator-form .form-table th {
     210        padding-bottom: 5px;
     211    }
     212
     213    .qr-code-creator-form select,
     214    .qr-code-creator-form textarea {
     215        width: 100%;
     216        max-width: 100%;
     217    }
     218
     219    .qr-code-creator-form .submit {
     220        text-align: left;
     221    }
     222
     223    .qr-code-creator-form .button {
     224        width: 100%;
     225        margin-bottom: 10px;
     226        margin-right: 0;
     227    }
     228}
     229
     230/* Accessibility */
     231.qr-code-creator-form label {
     232    font-weight: 600;
     233}
     234
     235.qr-code-creator-form input:focus,
     236.qr-code-creator-form select:focus,
     237.qr-code-creator-form textarea:focus {
     238    border-color: #2271b1;
     239    box-shadow: 0 0 0 1px #2271b1;
     240    outline: 2px solid transparent;
     241}
     242
     243.qr-code-download-links .button:focus {
     244    outline: 2px solid #2271b1;
     245    outline-offset: 2px;
     246}

  • qr-code-creator/trunk/qr-code-creator.php

    r3215850 r3405257  
    11<?php
    2 
    32/**
    4  * @author            Dhanendran (https://dhanendranrajagopal.me/)
    5  * @link              https://dhanendranrajagopal.me/
    6  * @since             0.1.0
    7  * @package           qr-code-creator
     3 * QR Code Creator
     4 *
     5 * A WordPress plugin which will help you to create QR Codes.
     6 *
     7 * @package           QRCodeCreator
     8 * @author            Dhanendran Rajagopal
     9 * @copyright         2024 Dhanendran Rajagopal
     10 * @license           GPL-2.0+
    811 *
    912 * @wordpress-plugin
    … …  
    1114 * Plugin URI:        https://github.com/dhanendran/qr-code-creator
    1215 * Description:       A WordPress plugin which will help you to create QR Codes.
    13  * Tags:              QR Code, Generator, QR Code Creator, QR Code Generator
    14  * Version:           0.1.5
    15  * Author:            Dhanendran
    16  * Author URI:        http://dhanendranrajagopal.me/
     16 * Short Description: Create customizable QR codes with size, color, and error correction options.
     17 * Version:           0.2.0
     18 * Author:            Dhanendran Rajagopal
     19 * Author URI:        https://dhanendranrajagopal.me/
    1720 * License:           GPL-2.0+
    1821 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
    1922 * Text Domain:       qr-code-creator
     23 * Domain Path:       /languages
     24 * Requires at least: 4.4
     25 * Tested up to:      6.7.4
     26 * Requires PHP:      7.4
    2027 */
    2128
    … …  
    2532}
    2633
     34/**
     35 * Plugin version constant.
     36 *
     37 * @since 0.2.0
     38 */
     39define( 'QR_CODE_CREATOR_VERSION', '0.2.0' );
     40
     41/**
     42 * Plugin directory path.
     43 *
     44 * @since 0.2.0
     45 */
     46define( 'QR_CODE_CREATOR_PATH', plugin_dir_path( __FILE__ ) );
     47
     48/**
     49 * Plugin directory URL.
     50 *
     51 * @since 0.2.0
     52 */
     53define( 'QR_CODE_CREATOR_URL', plugin_dir_url( __FILE__ ) );
     54
     55/**
     56 * The core plugin class.
     57 *
     58 * @since 0.1.0
     59 */
    2760class QRCodeCreator {
     61
    2862    /**
    29      * Start up
     63     * Plugin version.
     64     *
     65     * @since 0.2.0
     66     * @var string
    3067     */
    31     public function init() {
    32         add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
     68    private $version;
    3369
    34         wp_enqueue_script( 'qr_code_creator_script', plugin_dir_url( __FILE__ ) . 'script.js', array(), '1.0.0', true );
     70    /**
     71     * Admin instance.
     72     *
     73     * @since 0.2.0
     74     * @var QRCodeCreator_Admin
     75     */
     76    private $admin;
     77
     78    /**
     79     * Initialize the plugin.
     80     *
     81     * @since 0.1.0
     82     */
     83    public function __construct() {
     84        $this->version = QR_CODE_CREATOR_VERSION;
     85        $this->load_dependencies();
     86        $this->init_hooks();
    3587    }
    3688
    3789    /**
    38      * Add options page
     90     * Load required dependencies.
     91     *
     92     * @since 0.2.0
    3993     */
    40     public function add_plugin_page() {
    41         add_options_page(
    42             'QR Code Creator',
    43             'QR Code Creator',
    44             'manage_options',
    45             'qr-code-creator',
    46             array( $this, 'create_admin_page' )
    47         );
     94    private function load_dependencies() {
     95        require_once QR_CODE_CREATOR_PATH . 'includes/class-qrcode-creator-admin.php';
    4896    }
    4997
    5098    /**
    51      * Options page callback
     99     * Initialize hooks.
     100     *
     101     * @since 0.2.0
    52102     */
    53     public function create_admin_page() {
    54         ?>
    55         <div class="qr-code-creator">
    56             <h1>QR Code Creator</h1>
    57             <textarea name="qr_code_content" id="qr_code_content" rows="10" cols="70" placeholder="Enter your content here"></textarea>
    58             <div class="actions">
    59                 <button id="create_qr_code" class="button button-primary">Create</button>
    60                 <button id="reset_qr_code" class="button button-secondary">Reset</button>
    61             </div>
    62             <h2>QR Code</h2>
    63             <img id="qr_code">
    64             <h4>Download: </h4>
    65             <div id="qr_code_download_link"></div>
    66         </div>
    67         <?php
     103    private function init_hooks() {
     104        add_action( 'plugins_loaded', array( $this, 'init' ) );
     105        register_activation_hook( __FILE__, array( $this, 'activate' ) );
     106        register_deactivation_hook( __FILE__, array( $this, 'deactivate' ) );
     107    }
     108
     109    /**
     110     * Initialize the plugin.
     111     *
     112     * @since 0.1.0
     113     */
     114    public function init() {
     115        if ( is_admin() ) {
     116            $this->admin = new QRCodeCreator_Admin( $this->version );
     117        }
     118    }
     119
     120    /**
     121     * Activation hook.
     122     *
     123     * @since 0.2.0
     124     */
     125    public function activate() {
     126        // Add activation logic here if needed.
     127    }
     128
     129    /**
     130     * Deactivation hook.
     131     *
     132     * @since 0.2.0
     133     */
     134    public function deactivate() {
     135        // Add deactivation logic here if needed.
    68136    }
    69137}
    70138
    71 if ( is_admin() ) {
    72     $qrCodeCreator = new QRCodeCreator();
    73     $qrCodeCreator->init();
     139/**
     140 * Initialize the plugin.
     141 *
     142 * @since 0.1.0
     143 */
     144function qr_code_creator_init() {
     145    new QRCodeCreator();
    74146}
     147qr_code_creator_init();
    75148
    76149

  • qr-code-creator/trunk/script.js

    r1855115 r3405257  
    1 jQuery(document).ready(function($) {
    2     // Create QR code.
    3     $( '#create_qr_code' ).on( 'click', function( e ) {
    4         var content = $('#qr_code_content').val().trim();
    5 
    6         if ( content.length <= 0 ) {
    7             return;
    8         }
    9 
    10         content = encodeURIComponent( content );
    11 
    12         var imgUrl = 'https://api.qrserver.com/v1/create-qr-code/?data=' + content;
    13 
    14         $( '#qr_code' ).attr( 'src', imgUrl + '&size=150x150' );
    15 
    16         imgUrl += '&size=250x250';
    17         $( '#qr_code_download_link' ).html( '<a href="'+imgUrl+'&format=png" target="_blank">PNG</a> | <a href="'+imgUrl+'&format=jpg" target="_blank">JPG</a> | <a href="'+imgUrl+'&format=svg" target="_blank">SVG</a> | <a href="'+imgUrl+'&format=eps" target="_blank">EPS</a>' );
    18 
    19     } );
    20 
    21     // Reset text field.
    22     $( '#reset_qr_code' ).on( 'click', function( e ) {
    23         $('#qr_code_content').val('');
    24         $( '#qr_code' ).attr( 'src', '');
    25         $( '#qr_code_download_link' ).html('');
     1/**
     2 * QR Code Creator Admin Scripts
     3 *
     4 * @package QRCodeCreator
     5 */
     6
     7(function($) {
     8    'use strict';
     9
     10    /**
     11     * QR Code Creator Admin Object
     12     */
     13    const QRCodeCreatorAdmin = {
     14        /**
     15         * Initialize
     16         */
     17        init: function() {
     18            this.bindEvents();
     19        },
     20
     21        /**
     22         * Bind events
     23         */
     24        bindEvents: function() {
     25            $( '#create_qr_code' ).on( 'click', this.handleCreateQRCode.bind( this ) );
     26            $( '#reset_qr_code' ).on( 'click', this.handleReset.bind( this ) );
     27            $( '#qr_code_content' ).on( 'keypress', function( e ) {
     28                if ( e.which === 13 && e.ctrlKey ) {
     29                    $( '#create_qr_code' ).trigger( 'click' );
     30                }
     31            });
     32        },
     33
     34        /**
     35         * Handle create QR code
     36         *
     37         * @param {Event} e Event object
     38         */
     39        handleCreateQRCode: function( e ) {
     40            e.preventDefault();
     41
     42            const content = $( '#qr_code_content' ).val().trim();
     43
     44            // Validate content
     45            if ( content.length <= 0 ) {
     46                this.showError( qrCodeCreator.i18n.errorEmpty );
     47                return;
     48            }
     49
     50            // Get form values
     51            const size     = $( '#qr_code_size' ).val() || '200x200';
     52            const ecc      = $( '#qr_code_ecc' ).val() || 'M';
     53            const color    = $( '#qr_code_color' ).val() || '#000000';
     54            const bgcolor  = $( '#qr_code_bgcolor' ).val() || '#FFFFFF';
     55
     56            // Show loading state
     57            this.showLoading();
     58
     59            // Build API URL
     60            const apiUrl = this.buildApiUrl( content, size, ecc, color, bgcolor );
     61
     62            // Generate preview URL (smaller size for preview)
     63            const previewSize = '200x200';
     64            const previewUrl  = this.buildApiUrl( content, previewSize, ecc, color, bgcolor );
     65
     66            // Load QR code image
     67            this.loadQRCode( previewUrl, apiUrl );
     68        },
     69
     70        /**
     71         * Build API URL
     72         *
     73         * @param {string} content Content to encode
     74         * @param {string} size QR code size
     75         * @param {string} ecc Error correction level
     76         * @param {string} color Foreground color
     77         * @param {string} bgcolor Background color
     78         * @return {string} API URL
     79         */
     80        buildApiUrl: function( content, size, ecc, color, bgcolor ) {
     81            const baseUrl = qrCodeCreator.apiUrl || 'https://api.qrserver.com/v1/create-qr-code/';
     82            const params  = {
     83                data:    encodeURIComponent( content ),
     84                size:    size,
     85                ecc:     ecc,
     86                color:   color.replace( '#', '' ),
     87                bgcolor: bgcolor.replace( '#', '' ),
     88            };
     89
     90            const queryString = Object.keys( params )
     91                .map( function( key ) {
     92                    return encodeURIComponent( key ) + '=' + encodeURIComponent( params[ key ] );
     93                })
     94                .join( '&' );
     95
     96            return baseUrl + '?' + queryString;
     97        },
     98
     99        /**
     100         * Load QR code image
     101         *
     102         * @param {string} previewUrl Preview image URL
     103         * @param {string} downloadUrl Download image URL
     104         */
     105        loadQRCode: function( previewUrl, downloadUrl ) {
     106            const img = new Image();
     107
     108            img.onload = function() {
     109                QRCodeCreatorAdmin.hideLoading();
     110                QRCodeCreatorAdmin.hideError();
     111                QRCodeCreatorAdmin.showQRCode( previewUrl, downloadUrl );
     112            };
     113
     114            img.onerror = function() {
     115                QRCodeCreatorAdmin.hideLoading();
     116                QRCodeCreatorAdmin.showError( qrCodeCreator.i18n.errorApi );
     117            };
     118
     119            img.src = previewUrl;
     120        },
     121
     122        /**
     123         * Show QR code
     124         *
     125         * @param {string} previewUrl Preview image URL
     126         * @param {string} downloadUrl Download image URL
     127         */
     128        showQRCode: function( previewUrl, downloadUrl ) {
     129            $( '#qr_code' ).attr( 'src', previewUrl );
     130            $( '#qr_code_preview' ).fadeIn();
     131
     132            // Generate download links
     133            const formats = [
     134                { name: 'PNG', format: 'png' },
     135                { name: 'JPG', format: 'jpg' },
     136                { name: 'SVG', format: 'svg' },
     137                { name: 'EPS', format: 'eps' },
     138            ];
     139
     140            let downloadLinks = '';
     141            formats.forEach( function( format ) {
     142                const url = downloadUrl + '&format=' + format.format;
     143                downloadLinks += '<a href="' + url + '" class="button" download target="_blank" rel="noopener noreferrer">' + format.name + '</a> ';
     144            });
     145
     146            $( '#qr_code_download_link' ).html( downloadLinks );
     147            $( '#qr_code_download' ).fadeIn();
     148        },
     149
     150        /**
     151         * Show loading state
     152         */
     153        showLoading: function() {
     154            $( '#qr_code_loading' ).show();
     155            $( '#qr_code_preview' ).hide();
     156            $( '#qr_code_download' ).hide();
     157            $( '#qr_code_error' ).hide();
     158        },
     159
     160        /**
     161         * Hide loading state
     162         */
     163        hideLoading: function() {
     164            $( '#qr_code_loading' ).hide();
     165        },
     166
     167        /**
     168         * Show error message
     169         *
     170         * @param {string} message Error message
     171         */
     172        showError: function( message ) {
     173            $( '#qr_code_error p' ).text( message );
     174            $( '#qr_code_error' ).fadeIn();
     175            $( '#qr_code_preview' ).hide();
     176            $( '#qr_code_download' ).hide();
     177        },
     178
     179        /**
     180         * Hide error message
     181         */
     182        hideError: function() {
     183            $( '#qr_code_error' ).hide();
     184        },
     185
     186        /**
     187         * Handle reset
     188         *
     189         * @param {Event} e Event object
     190         */
     191        handleReset: function( e ) {
     192            e.preventDefault();
     193
     194            // Reset form
     195            $( '#qr_code_content' ).val( '' );
     196            $( '#qr_code_size' ).val( '200x200' );
     197            $( '#qr_code_ecc' ).val( 'M' );
     198            $( '#qr_code_color' ).val( '#000000' );
     199            $( '#qr_code_bgcolor' ).val( '#FFFFFF' );
     200
     201            // Reset preview
     202            $( '#qr_code' ).attr( 'src', '' );
     203            $( '#qr_code_preview' ).hide();
     204            $( '#qr_code_download' ).hide();
     205            $( '#qr_code_download_link' ).html( '' );
     206            $( '#qr_code_error' ).hide();
     207            $( '#qr_code_loading' ).hide();
     208
     209            // Focus on content field
     210            $( '#qr_code_content' ).focus();
     211        },
     212    };
     213
     214    // Initialize when document is ready
     215    $( document ).ready( function() {
     216        QRCodeCreatorAdmin.init();
    26217    });
    27 });
     218
     219})( jQuery );
     220

  • qr-code-creator/trunk/style.css

    r1855115 r3405257  
    1 .qr-code-creator .actions {
    2     display: block;
    3 }
     1/**
     2 * QR Code Creator Admin Styles
     3 *
     4 * @package QRCodeCreator
     5 */
     6
     7/* Container */
     8.qr-code-creator-admin {
     9    max-width: 1200px;
     10}
     11
     12.qr-code-creator-container {
     13    display: flex;
     14    gap: 30px;
     15    margin-top: 20px;
     16}
     17
     18.qr-code-creator-form {
     19    flex: 1;
     20    min-width: 0;
     21}
     22
     23.qr-code-creator-result {
     24    flex: 0 0 400px;
     25    min-width: 0;
     26}
     27
     28/* Form Styles */
     29.qr-code-creator-form .form-table {
     30    margin-top: 20px;
     31}
     32
     33.qr-code-creator-form .form-table th {
     34    width: 200px;
     35    padding: 20px 10px 20px 0;
     36    vertical-align: top;
     37}
     38
     39.qr-code-creator-form .form-table td {
     40    padding: 15px 10px;
     41    vertical-align: top;
     42}
     43
     44.qr-code-creator-form textarea {
     45    width: 100%;
     46    max-width: 100%;
     47    resize: vertical;
     48    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     49}
     50
     51.qr-code-creator-form select {
     52    min-width: 200px;
     53}
     54
     55.qr-code-creator-form input[type="color"] {
     56    width: 80px;
     57    height: 40px;
     58    cursor: pointer;
     59    border: 1px solid #8c8f94;
     60    border-radius: 4px;
     61}
     62
     63.qr-code-creator-form .description {
     64    margin-top: 8px;
     65    margin-bottom: 0;
     66    color: #646970;
     67    font-style: normal;
     68}
     69
     70.qr-code-creator-form .submit {
     71    margin-top: 20px;
     72    padding-top: 20px;
     73    border-top: 1px solid #dcdcde;
     74}
     75
     76.qr-code-creator-form .button {
     77    margin-right: 10px;
     78}
     79
     80/* Result Styles */
     81.qr-code-creator-result {
     82    background: #fff;
     83    border: 1px solid #c3c4c7;
     84    border-radius: 4px;
     85    padding: 20px;
     86    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
     87}
     88
     89.qr-code-creator-result h2 {
     90    margin-top: 0;
     91    margin-bottom: 20px;
     92    padding-bottom: 10px;
     93    border-bottom: 1px solid #dcdcde;
     94}
     95
     96/* Loading State */
     97.qr-code-loading {
     98    text-align: center;
     99    padding: 40px 20px;
     100}
     101
     102.qr-code-loading .spinner {
     103    float: none;
     104    margin: 0 auto 10px;
     105}
     106
     107.qr-code-loading p {
     108    margin: 0;
     109    color: #646970;
     110}
     111
     112/* Error State */
     113.qr-code-error {
     114    margin: 0 0 20px 0;
     115}
     116
     117.qr-code-error p {
     118    margin: 0;
     119}
     120
     121/* Preview */
     122.qr-code-preview {
     123    text-align: center;
     124    margin-bottom: 20px;
     125    padding: 20px;
     126    background: #f6f7f7;
     127    border-radius: 4px;
     128}
     129
     130.qr-code-preview img {
     131    max-width: 100%;
     132    height: auto;
     133    border: 1px solid #dcdcde;
     134    border-radius: 4px;
     135    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     136}
     137
     138/* Download Links */
     139.qr-code-download {
     140    margin-top: 20px;
     141    padding-top: 20px;
     142    border-top: 1px solid #dcdcde;
     143}
     144
     145.qr-code-download h3 {
     146    margin-top: 0;
     147    margin-bottom: 15px;
     148    font-size: 14px;
     149}
     150
     151.qr-code-download-links {
     152    display: flex;
     153    flex-wrap: wrap;
     154    gap: 10px;
     155}
     156
     157.qr-code-download-links .button {
     158    margin: 0;
     159    text-decoration: none;
     160}
     161
     162.qr-code-download-links .button:hover {
     163    text-decoration: none;
     164}
     165
     166/* Info Section */
     167.qr-code-creator-info {
     168    margin-top: 30px;
     169    padding: 20px;
     170    background: #f0f6fc;
     171    border-left: 4px solid #2271b1;
     172    border-radius: 4px;
     173}
     174
     175.qr-code-creator-info h3 {
     176    margin-top: 0;
     177}
     178
     179.qr-code-creator-info p {
     180    margin-bottom: 0;
     181}
     182
     183.qr-code-creator-info a {
     184    text-decoration: none;
     185}
     186
     187.qr-code-creator-info a:hover {
     188    text-decoration: underline;
     189}
     190
     191/* Responsive Design */
     192@media screen and (max-width: 782px) {
     193    .qr-code-creator-container {
     194        flex-direction: column;
     195        gap: 20px;
     196    }
     197
     198    .qr-code-creator-result {
     199        flex: 1;
     200    }
     201
     202    .qr-code-creator-form .form-table th,
     203    .qr-code-creator-form .form-table td {
     204        display: block;
     205        width: 100%;
     206        padding: 10px 0;
     207    }
     208
     209    .qr-code-creator-form .form-table th {
     210        padding-bottom: 5px;
     211    }
     212
     213    .qr-code-creator-form select,
     214    .qr-code-creator-form textarea {
     215        width: 100%;
     216        max-width: 100%;
     217    }
     218
     219    .qr-code-creator-form .submit {
     220        text-align: left;
     221    }
     222
     223    .qr-code-creator-form .button {
     224        width: 100%;
     225        margin-bottom: 10px;
     226        margin-right: 0;
     227    }
     228}
     229
     230/* Accessibility */
     231.qr-code-creator-form label {
     232    font-weight: 600;
     233}
     234
     235.qr-code-creator-form input:focus,
     236.qr-code-creator-form select:focus,
     237.qr-code-creator-form textarea:focus {
     238    border-color: #2271b1;
     239    box-shadow: 0 0 0 1px #2271b1;
     240    outline: 2px solid transparent;
     241}
     242
     243.qr-code-download-links .button:focus {
     244    outline: 2px solid #2271b1;
     245    outline-offset: 2px;
     246}
Note: See TracChangeset for help on using the changeset viewer.