Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
{{!
2
    This file is part of Moodle - http://moodle.org/
3
 
4
    Moodle is free software: you can redistribute it and/or modify
5
    it under the terms of the GNU General Public License as published by
6
    the Free Software Foundation, either version 3 of the License, or
7
    (at your option) any later version.
8
 
9
    Moodle is distributed in the hope that it will be useful,
10
    but WITHOUT ANY WARRANTY; without even the implied warranty of
11
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12
    GNU General Public License for more details.
13
 
14
    You should have received a copy of the GNU General Public License
15
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16
}}
17
{{!
18
    @template tiny_h5p/modal
19
 
20
    Modal to manage an H5P activity within the Tiny Edigtor.
21
 
22
    Classes required for JS:
23
    * none
24
 
25
    Data attributes required for JS:
26
    * none
27
 
28
    Context variables required for this template:
29
 
30
    Example context (json):
31
    {
32
        "elementid": "exampleId"
33
    }
34
}}
35
 
36
{{< core/modal }}
37
 
38
    {{$title}}
39
        {{#str}} modaltitle, tiny_h5p {{/str}}
40
    {{/title}}
41
 
42
    {{$body}}
43
        <form class="mform">
44
 
45
{{# noh5pcontent }}
46
            <div role="alert" class="alert alert-warning mb-1">
47
                {{#str}} noh5pcontent, tiny_h5p{{/str}}
48
            </div>
49
{{/ noh5pcontent }}
50
 
51
{{# invalidUrl }}
52
            <div role="alert" class="alert alert-warning mb-1">
53
                {{#str}} invalidh5purl, tiny_h5p{{/str}}
54
            </div>
55
{{/ invalidUrl }}
56
 
57
{{#canUploadAndEmbed}}
58
            <div class="mt-2 mb-4">{{#str}} instructions, tiny_h5p{{/str}}</div>
59
{{/canUploadAndEmbed}}
60
 
61
            <div class="mb-4">
62
                <label for="{{elementid}}-{{uniqid}}-filepath">
63
                    {{#canUploadAndEmbed}}
64
                        {{#str}} h5pfileorurl, tiny_h5p{{/str}}
65
                    {{/canUploadAndEmbed}}
66
                    {{^canUploadAndEmbed}}
67
                        {{#canUpload}}
68
                            {{#str}} h5pfile, tiny_h5p{{/str}}
69
                        {{/canUpload}}
70
                        {{#canEmbed}}
71
                            {{#str}} h5purl, tiny_h5p{{/str}}
72
                        {{/canEmbed}}
73
                    {{/canUploadAndEmbed}}
74
                </label>
75
 
76
                <div class="input-group input-append w-100">
77
                    <input name="url" class="form-control" type="url" value="{{fileURL}}"{{!
78
                        }} id="{{elementid}}-{{uniqid}}-filepath"{{!
79
                        }} size="32"{{!
80
                    }} />
81
                    {{#canUpload}}
1441 ariadna 82
                        <button class="btn btn-secondary" type="button" data-target="filepicker">
83
                        {{#str}} browserepositories, tiny_h5p{{/str}}</button>
1 efrain 84
                    {{/canUpload}}
85
                </div>
86
 
87
                {{#canUpload}}
88
                    <fieldset class="mt-2 collapsible" id="{{elementid}}-{{uniqid}}-options">
89
                        <legend class="d-flex align-items-center px-1">
1441 ariadna 90
                            <div class="position-relative d-flex ftoggler align-items-center position-relative me-1">
91
                                <a role="button" data-bs-toggle="collapse"{{!
1 efrain 92
                                    }} href="#h5poptions"{{!
93
                                    }} aria-expanded="{{#showOptions}}true{{/showOptions}}{{^showOptions}}false{{/showOptions}}"{{!
94
                                    }} aria-controls="h5poptions"{{!
1441 ariadna 95
                                    }} class="btn btn-icon me-3 icons-collapse-expand stretched-link fheader {{^showOptions}}collapsed{{/showOptions}}"{{!
1 efrain 96
                                }}>
97
                                    <span class="expanded-icon icon-no-margin p-2"
98
                                        title="{{#str}} collapse, moodle {{/str}}">
99
                                        <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
100
                                    </span>
101
                                    <span class="collapsed-icon icon-no-margin p-2"
102
                                        title="{{#str}} expand, moodle {{/str}}">
103
                                        <span class="dir-rtl-hide">
104
                                            <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
105
                                        </span>
106
                                        <span class="dir-ltr-hide">
107
                                            <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
108
                                        </span>
109
                                    </span>
1441 ariadna 110
                                    <span class="visually-hidden">{{#str}} h5poptions, tiny_h5p{{/str}}</span>
1 efrain 111
                                </a>
112
                                <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
113
                                    {{#str}} h5poptions, tiny_h5p{{/str}}
114
                                </h3>
115
                            </div>
116
                        </legend>
117
                        <div id="h5poptions" class="fcontainer collapseable collapse px-1 {{#showOptions}}show{{/showOptions}}">
118
                            <div class="form-check">
119
                                <input type="checkbox" {{!
120
                                    }} name="download"{{!
121
                                    }} {{# download }}checked{{/ download }}{{!
122
                                    }} class="form-check-input"{{!
123
                                    }} id="{{elementid}}-{{uniqid}}_h5p-option-allow-download"{{!
124
                                    }} />
125
                                <label class="form-check-label" for="{{elementid}}-{{uniqid}}_h5p-option-allow-download">
126
                                {{#str}} downloadbutton, tiny_h5p{{/str}}
127
                                </label>
128
                            </div>
129
                            <div class="form-check">
130
                                <input type="checkbox"{{!
131
                                    }} name="embed"{{!
132
                                    }} {{# embed }}checked{{/ embed }}{{!
133
                                    }} class="form-check-input"{{!
134
                                    }} id="{{elementid}}-{{uniqid}}_h5p-option-embed-button"{{!
135
                                    }} />
136
                                <label class="form-check-label" for="{{elementid}}-{{uniqid}}_h5p-option-embed-button">
137
                                {{#str}} embedbutton, tiny_h5p{{/str}}
138
                                </label>
139
                            </div>
140
                            <div class="form-check mb-2">
141
                                <input type="checkbox"{{!
142
                                    }} name="copyright"{{!
143
                                    }} {{# copyright }}checked{{/ copyright }}{{!
144
                                    }} class="form-check-input"{{!
145
                                    }} id="{{elementid}}-{{uniqid}}_h5p-option-copyright-button" {{!
146
                                }}/>
147
                                <label class="form-check-label" for="{{elementid}}-{{uniqid}}_h5p-option-copyright-button">
148
                                {{#str}} copyrightbutton, tiny_h5p{{/str}}
149
                                </label>
150
                            </div>
151
                        </div>
152
                    </fieldset>
153
                {{/canUpload}}
1441 ariadna 154
 
155
                <fieldset class="mt-2 collapsible" id="{{elementid}}-{{uniqid}}-display-options">
156
                    <legend class="position-relative d-flex ftoggler align-items-center px-1">
157
                        <a role="button" data-bs-toggle="collapse"{{!
158
                            }} href="#displayoptions"{{!
159
                            }} aria-expanded="{{#showDisplayOptions}}true{{/showDisplayOptions}}{{^showDisplayOptions}}false{{/showDisplayOptions}}"{{!
160
                            }} aria-controls="displayoptions"{{!
161
                            }} class="btn btn-icon me-3 icons-collapse-expand stretched-link fheader {{^showDisplayOptions}}collapsed{{/showDisplayOptions}}"{{!
162
                        }}>
163
                            <span class="expanded-icon icon-no-margin p-2"
164
                                title="{{#str}} collapse, moodle {{/str}}">
165
                                <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
166
                            </span>
167
                            <span class="collapsed-icon icon-no-margin p-2"
168
                                title="{{#str}} expand, moodle {{/str}}">
169
                                <span class="dir-rtl-hide">
170
                                    <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
171
                                </span>
172
                                <span class="dir-ltr-hide">
173
                                    <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
174
                                </span>
175
                            </span>
176
                            <span class="visually-hidden">{{#str}} displayoptions, tiny_h5p {{/str}}</span>
177
                        </a>
178
                        <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
179
                            {{#str}} displayoptions, tiny_h5p {{/str}}
180
                        </h3>
181
                    </legend>
182
                    <div id="displayoptions" class="fcontainer collapseable collapse px-1 {{#showDisplayOptions}}show{{/showDisplayOptions}}">
183
                        <div class="form-check mb-2">
184
                            <input type="checkbox" {{!
185
                                }} name="mobileappautoplay"{{!
186
                                }} {{# mobileAppAutoPlay }}checked{{/ mobileAppAutoPlay }}{{!
187
                                }} class="form-check-input"{{!
188
                                }} id="{{elementid}}-{{uniqid}}_display-option-mobileapp-autoplay"{{!
189
                                }} />
190
                            <label class="form-check-label" for="{{elementid}}-{{uniqid}}_display-option-mobileapp-autoplay">
191
                            {{#str}} mobileappautoplay, tiny_h5p{{/str}}
192
                            </label>
193
                        </div>
194
                    </div>
195
                </fieldset>
1 efrain 196
            </div>
197
        </form>
198
    {{/body}}
199
 
200
    {{$footer}}
201
        <button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel, moodle {{/str}}</button>
202
        <button type="button" class="btn btn-primary" data-action="save">{{#str}} insert, tiny_h5p{{/str}}</button>
203
    {{/footer}}
204
{{/ core/modal }}