Massively/htmlGeneratorSnippet.html at master · Agrarvolution/Massively · 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
<figure class="kg-card kg-embed-generator-card">
    <script src="/assets/main/js/embedGenerator.js"></script>
    <form id="generate-embed-html" method="post">
        <span>
            <select name="select-html-snippet" id="select-html-snippet">
                <option value="image">Image</option>
                <option value="gallery">Gallery</option>
                <option value="gallery-narrow">Gallery narrow</option>
                <option value="gallery-flowing">Gallery flowing</option>
                <option value="bookmark">Bookmark</option>
                <option value="video">Video</option>
            </select>
            <label for="select-html-snippet">HTML Template</label>
        </span>
        <span>
            <input type="text" name="fallback-types" id="fallback-types" placeholder='[{"file type": "fallback type"}]'>
            <label for="fallback-types">Fallback file types (Need be created manually in file system!) in JSON</label>
        </span>
        <span>
            <input type="text" name="custom-sizes" id="custom-sizes" placeholder="(min-width: 720px) 720px">
            <label for="custom-sizes">Sizes attribute (Overwrites standard)</label>
        </span>
        <span>
            <input type="text" name="custom-width" id="custom-width" placeholder='[100, "300", ...]'>
            <label for="custom-width">Media widths in px (Overwrites standard)</label>
        </span>
        <span>
            <input type="checkbox" name="enable-responsive" id="enable-responsive" checked>
            <label for="enable-responsive">Enable generation of responsive links (Ghost file structure only)</label>
        </span>
        <span class="kg-column-all">
            <textarea rows="20" style="font-family: monospace; line-height:1;font-size:0.9rem;"  name="links" id="link-json" placeholder='["link1", "link2", ...] | [{"link": "", metadata:""]'></textarea>
            <label for="links">Media links in JSON</label>
        </span>
        <span>
            <div class="kg-form-buttom-container">
                <button id="add-link-template">
                    Add link template
                </button>
                <button id="add-link-template-fallback">
                    Add link (custom fallback)
                </button>
                <button id="add-link-template-remove-first">
                    Remove first
                </button>
                <button id="add-link-template-remove-last">
                    Remove last
                </button>
            </div>
        </span>
        <span>
            <pre style="font-family: monospace; line-height:1;display:none">
[
    "link",
    {
        "link": "",
        "metadata": {
            "aspectRatio": "",
            "objectFit": "",
            "objectPosition": "",
            "targetHref": "link target",
            "openAsNew": "false - defaults to true",
            "srcset": "overwrites general srcset",
            "preload": "auto|metadata|none",
            "fallback": [{
                "link": "overwrites fallback types",
                "srcset": "",
                "sizes": ""
            }]
        },
        "video": {
            "muted": "true",
            "loop": "true",
            "autoplay": "true",
            "controls": false,
            "poster": "link"
        },
        "bookmark": {
            "title": "",
            "description": "",
            "icon": "small icon src",
            "author": "",
            "publisher": ""
        }
    }
]
            </pre>
        </span>

        <span>
            <input type="text" name="figure-classes" id="figure-classes" placeholder="kg-width-wide">
            <label for="figure-classes">Extra figure classes (without or without leading dot)</label>
        </span>
        <span>
            <input type="text" name="caption" id="figure-caption" placeholder="This a caption.">
            <label for="caption">Caption</label>
        </span>
        <span>
            <input type="text" name="wrapping-href" id="wrapping-href" placeholder="https://ghost.com">
            <label for="wrapping-href">Link - block wrap</label>
        </span>
        <span>
            <input type="checkbox" name="open-link" id="open-link">
            <label for="open-link">Open in new window</label>
        </span>
        <span class="kg-column-all">
            <textarea rows="10" style="font-family: monospace; line-height:1;font-size:0.9rem;" name="links" id="settings-json"></textarea>
            <label for="links">Settings JSON - will be overridden by settings above</label>
        </span>
        <span class="kg-column-all">
            <p id="generator-errors"></p>
        </span>
        <span class="kg-column-all">
            <button id="reset-generator" type="reset">Reset</button>
            <button id="generate-json" type="Submit">Create JSON</button>
            <button id="generate-html" type="Submit">Create HTML</button>
        </span>
    </form>
    <hr>
    <h3 id="generator-output">Output</h3>
    <textarea class="kg-column-all" id="output-space" style="font-family: monospace; height: 300px; line-height:1;">Script is not working / loading.</textarea>
    <span class="kg-column-all">
        <button id="copy-to-clipboard">Copy to clipboard</button>
    </span>
    <div id="html-preview"></div>
    </div>
</figure>