Dev: Replace file-upload jQuery UI with bootstrap modal

LimeSurvey · Mar 23, 2016 · 448c1e0 · Shnoulle · Mar 23, 2016 · 448c1e0
1 parent 576198d
commit 448c1e0
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 8 deletions.
diff --git a/application/helpers/qanda_helper.php b/application/helpers/qanda_helper.php
@@ -2531,12 +2531,6 @@ function do_file_upload($ia)
         $questgrppreview = 0;
     }
 
-    $uploadurl  = $scriptloc . "?sid=" . Yii::app()->getConfig('surveyID') . "&fieldname=" . $ia[1] . "&qid=" . $ia[0];
-    $uploadurl .= "&preview=" . $questgrppreview . "&show_title=" . $aQuestionAttributes['show_title'];
-    $uploadurl .= "&show_comment=" . $aQuestionAttributes['show_comment'];
-    $uploadurl .= "&minfiles=" . $aQuestionAttributes['min_num_of_files'];  // TODO: Regression here: Should use LEMval(minfiles)
-    $uploadurl .= "&maxfiles=" . $aQuestionAttributes['max_num_of_files'];  // Same here.
-
     $answer = "<script type='text/javascript'>
         function upload_$ia[1]() {
             var uploadurl = '{$scriptloc}?sid=".Yii::app()->getConfig('surveyID')."&fieldname={$ia[1]}&qid={$ia[0]}';
@@ -2628,8 +2622,37 @@ function upload_$ia[1]() {
     });
     </script>';
 
-        //$('<iframe id=\"uploader\" name=\"uploader\" class=\"externalSite\" src=\"' + this.href + '\" />').dialog({
-    $answer .= "<div id='uploader-div' class='hidden'><iframe id='uploader' name='uploader' class='externalSite' src='{$uploadurl}'></iframe></div>";
+    $uploadurl  = $scriptloc . "?sid=" . Yii::app()->getConfig('surveyID') . "&fieldname=" . $ia[1] . "&qid=" . $ia[0];
+    $uploadurl .= "&preview=" . $questgrppreview . "&show_title=" . $aQuestionAttributes['show_title'];
+    $uploadurl .= "&show_comment=" . $aQuestionAttributes['show_comment'];
+    $uploadurl .= "&minfiles=" . $aQuestionAttributes['min_num_of_files'];  // TODO: Regression here? Should use LEMval(minfiles) like above
+    $uploadurl .= "&maxfiles=" . $aQuestionAttributes['max_num_of_files'];  // Same here.
+
+    $answer .= '
+        <!-- Trigger the modal with a button -->
+        <!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
+
+        <!-- Modal -->
+        <div id="file-upload-modal-' . $ia[1] . '" class="modal fade" role="dialog">
+            <div class="modal-dialog">
+
+                <!-- Modal content-->
+                <div class="modal-content" style="vertical-align: middle;">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <h4 class="modal-title">' . ngT("Upload file|Upload files", 1) . '</h4>
+                    </div>
+                    <div class="modal-body file-upload-modal-body">
+                        <iframe id="uploader" name="uploader" class="externalSite" src="' . $uploadurl . '"></iframe>
+                    </div>
+                    <div class="modal-footer file-upload-modal-footer">
+                        <button type="button" class="btn btn-success" data-dismiss="modal">' . gT("Save changes") . '</button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    ';
 
     $inputnames[] = $ia[1];
     $inputnames[] = $ia[1]."_filecount";

diff --git a/scripts/modaldialog.js b/scripts/modaldialog.js
@@ -18,6 +18,26 @@ function openUploadModalDialog(){
 
         //$('#uploader').dialog('destroy').remove(); // destroy the old modal dialog
         //$('<iframe id=\"uploader\" name=\"uploader\" class=\"externalSite\" src=\"' + this.href + '\" />').dialog({
+        console.log('fieldname', fieldname);
+        $('#file-upload-modal-' + fieldname).modal();
+        $('#file-upload-modal-' + fieldname).on('show.bs.modal', function() {
+            $('#file-upload-modal-' + fieldname).find('iframe').css('height', 'inherit');
+        });
+        $('#file-upload-modal-' + fieldname).on('hide.bs.modal', function() {
+            var pass;
+            if(document.getElementById('uploader').contentDocument) {
+                if(document.getElementById('uploader').contentDocument.defaultView)
+                    {       /*Firefox*/
+                    pass=document.getElementById('uploader').contentDocument.defaultView.saveAndExit(fieldname,show_title,show_comment,pos);
+                }else{       /*IE8*/
+                    pass=document.getElementById('uploader').contentWindow.saveAndExit(fieldname,show_title,show_comment,pos);
+                }
+            }else{    /*IE6*/
+                pass=document.getElementById('uploader').contentWindow.saveAndExit(fieldname,show_title,show_comment,pos);
+            }
+            return pass;
+        });
+
         $('#uploader-div').dialog({
             title: uploadLang.title,
             autoOpen: true,

diff --git a/styles-public/uploader.css b/styles-public/uploader.css
@@ -116,3 +116,7 @@ text-align:left;
     background-color: #FFBABA;
     background-image: url('img/upload-error.png');
 }
+
+body.uploader {
+    padding-top: 2em;
+}
diff --git a/templates/default/css/template.css b/templates/default/css/template.css
@@ -963,3 +963,35 @@ table {
         padding: 0;
     }
 }
+
+/* Center modal vertically, used by file-upload modal */
+.modal {
+    text-align: center;
+    padding: 0!important;
+}
+.modal:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -4px;
+}
+.modal-dialog {
+    display: inline-block;
+     text-align: left;
+     vertical-align: middle;
+}
+
+/* Make file upload modal fit to iframe */
+.file-upload-modal-body iframe {
+    height: inherit;
+    width: 100%;
+    border: none;
+}
+.file-upload-modal-body {
+    padding: 0;
+    height: 500px;
+}
+.file-upload-modal-footer {
+    margin-top: 0;
+}