images.html

 1   
 2   
 3   <div class="container panel panel-default">
 4       <h3><span class="ti ti-file-image fa-lg"></span> &nbsp; #i18n{wiki.modify_page.titleImages}</h3>
 5       <div class="row">
 6           <!-- Display images -->
 7           <div class="col-sm-8">
 8               <div  id="table-images" class="image-grid "></div>
 9           </div>
 10           <!-- Image upload form -->
 11           <div class="col-sm-4">
 12               <form id="form-image-upload" action="jsp/site/Portal.jsp" method="post" enctype="multipart/form-data" >
 13                   <input type="hidden" name="page" value="wiki" />
 14                   <input type="hidden" name="page_name" value="${topic.pageName}" />
 15                   <input type="hidden" name="action_uploadImage" value="uploadImage" />
 16                   <input type="hidden" name="topic_id" value="${topic.idTopic}" />
 17                   <input type="file" id="fileInput" multiple name="image_file" hidden />
 18                   <div class="uploader" id="fileSelect">
 19                       <p>
 20                           #i18n{wiki.modify_page.buttonUpload} Image
 21                       </p>
 22                   </div>
 23                   <div id="new_image_modal" class="modal-panel" style="display: none;">
 24                       <div class="modal-header">
 25                       <p>
 26                           #i18n{wiki.modify_page.buttonUpload} Image
 27                       </p>
 28                       </div>
 29                       <output></output>
 30                       <div class="modal-body">
 31                           <label for="image_name">#i18n{wiki.modify_page.labelDescription} (required) :</label>
 32                           <input class="form-control" required id="image_name" name="image_name" type="text"  placeholder="#i18n{wiki.modify_page.labelDescription} (required)" aria-required="true" />
 33                       </div>
 34                       <div id="upload-cancel" class="modal-footer">
 35                           <button id="btn-upload" class="btn btn-primary" type="submit" onclick="postImageForm()">
 36                               <span class="ti ti-upload fa-lg"></span> &nbsp; #i18n{wiki.modify_page.buttonUpload}
 37                           </button>
 38                           <button id="btn-cancel" class="btn btn-danger" type="button" onclick="
 39                           if (document.getElementById('new_image_modal').style.display !== 'none')
 40                              {
 41                               document.getElementById('new_image_modal').style.display = 'none';
 42                               removeEventListener('click', outsideClickImageModal);
 43                              }">
 44   
 45                               <span class="ti ti-times fa-lg"></span> &nbsp; #i18n{wiki.modify_page.buttonCancel}
 46                           </button>
 47                       </div>
 48                   </div>
 49               </form>
 50           </div>
 51       </div>
 52   </div>