bunzilla/tpl/material/toolsModal.html at master · dayvonjersen/bunzilla · 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
<!--
    begin toolsModal postFormat widget thing
-->
        <div class="md-modal md-effect-7 z-depth-5" id="toolsModal">
         <div class="md-content shade-text section" >
            <div class="row center">
			<p class="col s12 m3 l2">
                <label>text style</label>
				<button class="btn-flat btn-floating shade-text btn tooltipped waves-effect" data-position="bottom" data-tooltip="<b>bold</b>" data-markup="b" title="bold"><i class="icon-bold"></i></i></button>
				<button class="btn-flat btn-floating shade-text btn tooltipped waves-effect" data-markup="i" data-position="bottom" data-tooltip="<i>italic</i>" title="italic"><i class="icon-italic"></i></button>
				<button class="btn-flat btn-floating shade-text btn tooltipped waves-effect" data-markup="u" data-position="bottom" data-tooltip="<u>underline</u>" data-markup="u" title="underline"><i class="icon-underline"></i></button>
				<button class="btn-flat btn-floating shade-text btn tooltipped waves-effect" data-position="bottom" data-tooltip="<s>strikethrough</s>" data-markup="s" title="strikethrough"><i class="icon-strike"></i></button>
			</p>
			<p class="col s12 m3 l2">
                <label>font size</label>
				<button class="btn-flat btn-floating shade-text btn tooltipped waves-effect" data-position="bottom" data-tooltip="<big>bigger</big>" data-markup="big" title="bigger"><i class="icon-fontsize-large"></i></button>
				<button class="btn-flat btn-floating shade-text btn tooltipped waves-effect" data-position="bottom" data-tooltip="<small>smaller</small>" data-markup="small" title="smaller"><i class="icon-fontsize-small"></i></button>
				<button class="btn-flat btn-floating shade-text btn tooltipped waves-effect" data-position="bottom" data-tooltip="super<sup>script</sup>" data-markup="sup" title="superscript"><i class="icon-superscript"></i></button>
				<button class="btn-flat btn-floating shade-text btn  tooltipped waves-effect" data-position="bottom" data-tooltip="sub<sub>script</sub>" data-markup="sub" title="subscript"><i class="icon-subscript"></i></button>
			</p>
			<p class="col s12 m3 l2 ">
                <label>lists, links, and images</label>
				<button class="btn-flat btn-floating shade-text btn  tooltipped waves-effect" data-position="bottom" data-tooltip="<ul><li>unordered</li><li>list</li></ul>" data-markup="ul" title="unordered list"><i class="icon-ul"></i></button>
				<button class="btn-flat btn-floating shade-text btn  tooltipped waves-effect" data-position="bottom" data-tooltip="<ol><li>ordered</li><li>list</li></ol>" data-markup="ol" title="ordered list"><i class="icon-ol"></i></button>
				<button class="btn-flat btn-floating shade-text btn  tooltipped waves-effect" data-position="bottom" data-tooltip="<a href=#>hyperlink</a>" data-markup="link" title="insert link"><i class="icon-link"></i></button>
				<button class="btn-flat btn-floating shade-text btn  tooltipped waves-effect" data-position="bottom" data-tooltip="<img src=something alt=image>" data-markup="image" title="insert image"><i class="icon-picture"></i></button>			</p>
            <div class="col s12 m3 l2">
<div class="row">
			<p class="col s8 m6" id="selectBoxesAreHard">
                    <label>language (optional)</label>
        				<select id="codelang" class="secondary-text  browser-default">
<!--
    if this is your copy of bunzilla:

    feel free to delete the languages
    you will never have occasion to use from

    tpl/material/assets/js/highlight.js-languages.json
-->
        				</select>
                </p><p class="col s4 m6 tooltipped" data-position="bottom" data-tooltip="yay code highlighting">
                <label>insert code</label>
                <button class="btn-flat btn-floating shade-text btn" data-markup="code" title="insert code">
                    <i class="icon-code"></i>
                </button>
            </p>
</div>
            </div>
			<p class="col s6 l2 tooltipped" data-position="bottom" data-tooltip="<del>oldtext</del><ins>new text!</ins>">
                <label>quick edit</label>
				<button class="btn-flat btn-floating shade-text btn waves-effect" data-markup="delins" title="delete and insert"><i class="icon-pencil-alt"></i></button>
            </p>
            <div class="col s6 l2"><button class="btn btn-flat danger-base waves-effect waves-red icon-cancel" onclick="toggleModal(event)">Close</button></div>
            </div>
        </div>
</div>
<script src="<?= BUNZ_JS_DIR ?>toolsModal.js"></script>
<style>@import '<?= BUNZ_CSS_DIR ?>modal-alt.css';</style>
<script>
document.body.onload = (function(){
    toolsModal.init(document.getElementById("withToolsModal"));

    $.getJSON("<?= BUNZ_JS_DIR ?>highlight.js-languages.json", function(lang) {
        for(var i = 0; i < lang.length; i++) {
           $("#codelang").append("<option value='"+lang[i]+"'>"+lang[i]+"</option>");
        }
    });

    window.toggleModal = function(evt)
    {
        if(evt)
            evt.preventDefault();

        $('#toolsModal').toggleClass('md-show');
        if($('#toolsModal').hasClass('md-show'))
            toolsModal.activate();
        else
            toolsModal.deactivate();
    }
});
</script>
<!--
    end widget
-->