json_encode/index.php at master · cavo789/json_encode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<?php

declare(strict_types=1);

/**
 * AUTHOR : AVONTURE Christophe.
 *
 * Written date : 24 october 2018
 *
 * Simple JSON_Encode ajax interface.
 *
 * Last mod:
 * 2018-12-31 - Abandonment of jQuery and migration to vue.js
 */

define('REPO', 'https://github.com/cavo789/json_encode');

// Retrieve posted data
$data = json_decode(file_get_contents('php://input'), true);
if ($data !== []) {
    $task = filter_var(($data['task'] ?? ''), FILTER_SANITIZE_FULL_SPECIAL_CHARS);

    if ('encode' == $task) {
        // Retrieve the JSON string
        $JSON = base64_decode(filter_var(($data['json'] ?? ''), FILTER_SANITIZE_FULL_SPECIAL_CHARS));
        // Return the encoded JSON
        header('Content-Type: text/html');
        $JSON = json_encode(utf8_encode($JSON));
        echo base64_encode($JSON);
        die();
    }
}

// Get the GitHub corner
$github = '';
if (is_file($cat = __DIR__ . DIRECTORY_SEPARATOR . 'octocat.tmpl')) {
    $github = str_replace('%REPO%', REPO, file_get_contents($cat));
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="author" content="Christophe Avonture" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
    <title>JSON Encode</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <style>
        pre {
            white-space: pre-wrap;
            /* css-3 */
            white-space: -moz-pre-wrap;
            /* Mozilla, since 1999 */
            white-space: -pre-wrap;
            /* Opera 4-6 */
            white-space: -o-pre-wrap;
            /* Opera 7 */
            word-wrap: break-word;
            /* Internet Explorer 5.5+ */
        }
    </style>
</head>

<body>
    <?php echo $github; ?>
    <div class="container">
        <div class="page-header">
            <h1>JSON Encode</h1>
        </div>
        <div class="container" id="app">
            <div class="form-group">
                <how-to-use demo="https://raw.githubusercontent.com/cavo789/json_encode/master/images/demo.gif">
                    <ul>
                        <li>Type (or paste) a text in the text area here below</li>
                        <li>Press the Encode button</li>
                    </ul>
                </how-to-use>
                <label for="JSON">Copy/Paste your text in the
                    textbox below then click on the Encode button:</label>
                <textarea class="form-control" rows="5" v-model="JSON" name="JSON"></textarea>
            </div>
            <button type="button" @click="processEncode" class="btn btn-primary">Encode</button>
            <hr />
            <pre v-html="HTML"></pre>
        </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        Vue.component('how-to-use', {
            props: {
                demo: {
                    type: String,
                    required: true
                }
            },
            template: `<details>
                        <summary>How to use?</summary>
                        <div class="row">
                            <div class="col-sm">
                                <slot></slot>
                            </div>
                            <div class="col-sm"><img v-bind:src="demo" alt="Demo"></div>
                        </div>
                    </details>`
        });

        var app = new Vue({
            el: '#app',
            data: {
                JSON: "this is a test\nPaição São Paulo\nNuit d'Été, ç'eût\n" +
                    "(Sobre el Bé i el Mal) de Ciceró\ninntrykk av å være lesbar",
                HTML: ''
            },
            methods: {
                processEncode() {
                    var $data = {
                        task: 'encode',
                        json: window.btoa(this.JSON)
                    }
                    axios.post('<?php echo basename(__FILE__); ?>', $data)
                        .then(response => (this.HTML = window.atob(response.data)))
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>

</html>