Mercurial > kallithea
view kallithea/templates/admin/gists/edit.html @ 6416:ba18d1f6d081
style: refactor panel headings - use pull-left and pull-right and introduce clearfix like Bootstrap
Based on work by Dominik Ruf.
author | Mads Kiilerich <mads@kiilerich.com> |
---|---|
date | Sat, 24 Dec 2016 17:26:48 +0100 |
parents | 8656c0073e17 |
children | d99afb88579e |
line wrap: on
line source
## -*- coding: utf-8 -*- <%inherit file="/base/base.html"/> <%block name="title"> ${_('Edit Gist')} · ${c.gist.gist_access_id} </%block> <%block name="js_extra"> <script type="text/javascript" src="${h.url('/codemirror/lib/codemirror.js')}"></script> <script type="text/javascript" src="${h.url('/js/codemirror_loadmode.js')}"></script> <script type="text/javascript" src="${h.url('/codemirror/mode/meta.js')}"></script> </%block> <%block name="css_extra"> <link rel="stylesheet" type="text/css" href="${h.url('/codemirror/lib/codemirror.css')}"/> </%block> <%def name="breadcrumbs_links()"> ${_('Edit Gist')} · ${c.gist.gist_access_id} </%def> <%block name="header_menu"> ${self.menu('gists')} </%block> <%def name="main()"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> ${self.breadcrumbs()} </div> <div class="table"> <div id="edit_error" style="display: none" class="flash_msg"> <div class="alert alert-dismissable alert-warning"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="icon-cancel-circled"></i></button> ${h.literal(_('Gist was update since you started editing. Copy your changes and click %(here)s to reload new version.') % {'here': h.link_to('here',h.url('edit_gist', gist_id=c.gist.gist_access_id))})} </div> <script> if (typeof jQuery != 'undefined') { $(".alert").alert(); } </script> </div> <div id="files_data"> ${h.form(h.url('edit_gist', gist_id=c.gist.gist_access_id), method='post', id='eform')} <div> ${h.gravatar_div(c.authuser.email, size=32)} <input type="hidden" value="${c.file_changeset.raw_id}" name="parent_hash"> <textarea style="resize:vertical; width:400px;border: 1px solid #ccc;border-radius: 3px;" id="description" name="description" placeholder="${_('Gist description ...')}">${c.gist.gist_description}</textarea> <div style="padding:0px 0px 0px 42px"> <label> ${_('Gist lifetime')} ${h.select('lifetime', '0', c.lifetime_options)} </label> <span class="text-muted"> %if c.gist.gist_expires == -1: ${_('Expires')}: ${_('Never')} %else: ${_('Expires')}: ${h.age(h.time_to_datetime(c.gist.gist_expires))} %endif </span> </div> </div> % for cnt, file in enumerate(c.files): <div id="body" class="codeblock" style="margin-bottom: 4px"> <div style="padding: 10px 10px 10px 26px;color:#666666"> <input type="hidden" value="${h.safe_unicode(file.path)}" name="org_files"> <input id="filename_${h.FID('f',file.path)}" name="files" size="30" type="text" value="${h.safe_unicode(file.path)}"> <select id="mimetype_${h.FID('f',file.path)}" name="mimetypes"></select> </div> <div class="editor_container"> <pre id="editor_pre"></pre> <textarea id="editor_${h.FID('f',file.path)}" name="contents" style="display:none">${file.content}</textarea> </div> </div> ## dynamic edit box. <script type="text/javascript"> $(document).ready(function(){ var myCodeMirror = initCodeMirror("editor_${h.FID('f',file.path)}", "${request.script_name}", ''); //inject new modes var $mimetype_select = $('#mimetype_${h.FID('f',file.path)}'); $mimetype_select.each(function(){ var modes_select = this; var index = 1; for(var i=0;i<CodeMirror.modeInfo.length;i++) { var m = CodeMirror.modeInfo[i]; var opt = new Option(m.name, m.mime); $(opt).attr('mode', m.mode); if (m.mime == 'text/plain') { // default plain text $(opt).prop('selected', true); modes_select.options[0] = opt; } else { modes_select.options[index++] = opt; } } }); var $filename_input = $('#filename_${h.FID('f',file.path)}'); // on select change set new mode $mimetype_select.change(function(e){ var selected = e.currentTarget; var node = selected.options[selected.selectedIndex]; var detected_mode = CodeMirror.findModeByMIME(node.value); setCodeMirrorMode(myCodeMirror, detected_mode); var proposed_ext = CodeMirror.findExtensionByMode(detected_mode); var file_data = CodeMirror.getFilenameAndExt($filename_input.val()); var filename = file_data['filename'] || 'filename1'; $filename_input.val(filename + '.' + proposed_ext); }); // on type the new filename set mode $filename_input.keyup(function(e){ var file_data = CodeMirror.getFilenameAndExt(this.value); if(file_data['ext'] != null){ var detected_mode = CodeMirror.findModeByExtension(file_data['ext']) || CodeMirror.findModeByMIME('text/plain'); if (detected_mode){ setCodeMirrorMode(myCodeMirror, detected_mode); $mimetype_select.val(detected_mode.mime); } } }); // set mode on page load var detected_mode = CodeMirror.findModeByExtension("${file.extension}"); if (detected_mode){ setCodeMirrorMode(myCodeMirror, detected_mode); $mimetype_select.val(detected_mode.mime); } }); </script> %endfor <div style="padding-top: 5px"> ${h.submit('update',_('Update Gist'),class_="btn btn-success")} <a class="btn btn-default" href="${h.url('gist', gist_id=c.gist.gist_access_id)}">${_('Cancel')}</a> </div> ${h.end_form()} <script> $('#update').on('click', function(e){ e.preventDefault(); // check for newer version. $.ajax({ url: "${h.url('edit_gist_check_revision', gist_id=c.gist.gist_access_id)}", data: {'revision': '${c.file_changeset.raw_id}', '_authentication_token': _authentication_token}, dataType: 'json', type: 'POST', success: function(data) { if(data.success == false){ $('#edit_error').show(); } else{ $('#eform').submit(); } } }); }); </script> </div> </div> </div> </%def>