NewPage/script.js at main · BarclaySoftware/NewPage · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
// Copyright (C) 2025-2026 PagePerfect(TM) Group. All Rights Reserved.
// The PagePerfect(TM) Content Editor is licensed under the MIT License.
// However this website and its source code are NOT.
// Contact us at https://pageperfect.pages.dev/help/form
// for a customized verion of PagePerfect(TM) for your company.

// Build the PagePerfect(TM) Content Editor (the core component of PagePerfect(TM))
const editor=new PagePerfect('#editor',{height:400,toolbarSticky:false,buttons:"find,undo,redo,print,spellcheck,copyformat,eraser,about, |,paragraph, |,font, |,fontsize, |,bold,italic,underline,strikethrough,brush, |,cut,copy,paste,selectall, |,hr,fullsize |,link,image,video,file,table,symbols |,align,lineHeight,ul,ol, |,indent,outdent, |,superscript,subscript, |,source,preview",spellcheck:true});

// Ask the user what they want to call their project
let projectName = null;
function askForProjectName() {
    if (projectName) return projectName;

    const name = prompt(
        'Name your project:\n\nThis will be used as the page title and file name.',
        'Untitled Page'
    );

    if (!name) return null;

    projectName = name.trim();
    return projectName;
}

// Creates the template HTML on export
function buildHTML(content, title = 'Untitled Page') {
    return `<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="PagePerfect 26"><title>${title} | PagePerfect 26</title><meta property="og:title" content="${title}"><meta property="og:image" content="https://pageperfect.pages.dev/cdn/assets/builtwith.png"/><meta property="og:description" content="This webpage was built with PagePerfect!"/><link rel="shortcut icon" href="https://pageperfect.pages.dev/cdn/assets/favicon.png" type="image/x-icon"><link rel="stylesheet" type="text/css" href="https://pageperfect.pages.dev/cdn/global.css"></head>\n<body><main class="content-container">${content}</main></body></html>`;
}

// The PagePerfect(TM) Project (p^3)/.p3 file format is the current PROPRIETARY format for PagePerfect(TM)
function extractContentFromHTML(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');

    // Verify the file was generated by a PagePerfect(TM) version
    const generator = doc.querySelector('meta[name="generator"]');
    if (!generator || !generator.content.includes('PagePerfect')) {
        throw new Error('Not a valid PagePerfect project file.');
    }

    const main = doc.querySelector('main.content-container');
    if (!main) {
        throw new Error('Invalid PagePerfect file structure.');
    }

    return main.innerHTML;
}

// Save the .p3 file (see 'downloadBtn' for HTML code)
document.getElementById('saveBtn').addEventListener('click', function () {
    const content = editor.value;
    if (!content) {
        alert('FAILURE: Your page is empty.');
        return;
    }

    const name = askForProjectName();
    if (!name) return;

    const blob = new Blob(
        [buildHTML(content, name)],
        { type: 'application/x-pageperfect-project' }
    );

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `${name}.p3`;

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

// Open a .p3 file. The PagePerfect(TM) Content Editor does not allow users
// to open HTML files in order to protect their work and make sure the editor
// does not break
document.getElementById('openBtn').addEventListener('click', function () {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.p3';

    input.addEventListener('change', function () {
        const file = input.files[0];
        if (!file) return;

        if (!file.name.toLowerCase().endsWith('.p3')) {
            alert('FAILURE: Only .p3 PagePerfect project files are supported.');
            return;
        }

        const reader = new FileReader();
        reader.onload = function (e) {
            try {
                const html = e.target.result;
                const content = extractContentFromHTML(html);

                editor.value = content;
            } catch (err) {
                alert(
                    'FAILURE: This file is not a valid PagePerfect project.\n\n' +
                    'DETAILS: ' + err.message
                );
            }
        };

        reader.readAsText(file);
    });

    input.click();
});

// Save the HTML code (see 'saveBtn' for .p3 file)
document.getElementById('downloadBtn').addEventListener('click', function () {
    const content = editor.value;
    if (!content) {
        alert('FAILURE: Your page is empty.');
        return;
    }

    const name = askForProjectName();
    if (!name) return;

    const blob = new Blob(
        [buildHTML(content, name)],
        { type: 'text/html' }
    );

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `${name}.html`;

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

// Copy the HTML to the user's clipboard
document.getElementById('copyBtn').addEventListener('click', async function () {
    const content = editor.value;
    if (!content) {
        alert('FAILURE: Your page is empty.');
        return;
    }

    const name = askForProjectName();
    if (!name) return;

    try {
        await navigator.clipboard.writeText(buildHTML(content, name));
        alert('SUCCESS: The content has been copied to your clipboard.');
    } catch (err) {
        alert(
            'FAILURE: The content was not copied to your clipboard.\n\n' +
            'SUGGESTION: Ensure PagePerfect has permission to access your clipboard.'
        );
        console.error(err);
    }
});

// Old clearBtn logic
// document.getElementById('clearBtn').addEventListener('click',function(){editor.value='';});

// Clear the PagePerfect(TM) Content Editor
document.getElementById('clearBtn').addEventListener('click', function () {
    const content = editor.value;

    if (!content) {
        return;
    }

    const confirmed = confirm(
        'WARNING: Are you sure you want to clear this page? This action cannot be undone.\n\nNOTICE: All of your content will be erased.'
    );

    if (confirmed) {
        editor.value = '';
    }
});

// Open the PagePerfect(TM) help documentation
document.getElementById('helpBtn').addEventListener('click',function(){window.open("https://pageperfect.pages.dev/help/");})

// Prevent users from losing unsaved progress
window.addEventListener('beforeunload',function(e){const content=editor.value;if(content){e.preventDefault();}});