From: Christian Weiske <cweiske@cweiske.de>
Date: Wed, 6 Jun 2012 09:32:10 +0000 (+0200)
Subject: hide additional fields and add button to show them
X-Git-Tag: v0.3.0~60
X-Git-Url: https://git.cweiske.de/phorkie.git/commitdiff_plain/cceda6a059b90c8e7e1319529f3fe686b16dfcf3

hide additional fields and add button to show them
---

diff --git a/data/templates/edit-add.htm b/data/templates/edit-add.htm
index e504deb..d86b2c5 100644
--- a/data/templates/edit-add.htm
+++ b/data/templates/edit-add.htm
@@ -17,6 +17,12 @@ $(document).ready(function() {
             {% endfilter %}"
             .replace(/###/g, $('.filegroup').length)
         );
+        toggleAdditional($('.filegroup:visible .additional-btn:last')[0], 0);
+
+        $('html, body').animate({
+            scrollTop: $('.filegroup:visible:last').offset().top
+        });
+        $('.filegroup:visible:last textarea').focus();
         return false;
     });
 });
diff --git a/data/templates/edit-file.htm b/data/templates/edit-file.htm
index aca61f9..5f875cc 100644
--- a/data/templates/edit-file.htm
+++ b/data/templates/edit-file.htm
@@ -7,31 +7,40 @@
   </p>
   {% endif %}
   <div class="row-fluid">
-   <div class="span6">
-    <input type="hidden" name="files[{{fileid}}][original_name]" value="{{file.getFilename}}"/>
-    <input type="text" name="files[{{fileid}}][name]" id="filename_{{fileid}}" value="{{file.getFilename}}" placeholder="Filename (optional)" class="filename" onchange="filenameChange(this, {{fileid}})" onkeyup="filenameChange(this, {{fileid}})"/>
+   <div class="span1">
+    <a class="btn additional-btn" href="#" onclick="toggleAdditional(this); return false;" style="display:none">
+     <i class="icon-chevron-up"></i>
+    </a>
    </div>
-   <div class="span6 typeselect" style="text-align: right" id="typeselect_{{fileid}}">
-    <label for="type_{{fileid}}" class="inline">Type</label>
-    <select name="files[{{fileid}}][type]" id="type_{{fileid}}">
-     {{htmlhelper.getLanguageOptions(file)|raw}}
-    </select>
-   </div>
-   <div class="span6" style="display:none; text-align: right" id="typetext_{{fileid}}">
-    <p class="muted">Type determined from filename</p>
-   </div>
-  </div>
-  <div class="row-fluid">
-   <div class="span9">
-    <label for="upload_{{fileid}}" class="inline">Replace with upload:</label>
-    <input type="file" name="files[{{fileid}}][upload]" id="upload_{{fileid}}" class="btn"/>
-   </div>
-   {% if not newfile %}
-   <div class="span3" style="text-align: right">
-    <input type="checkbox" name="files[{{fileid}}][delete]" value="1" id="delete_{{fileid}}"/>
-    <label for="delete_{{fileid}}" class="inline">delete file</label>
-   </div>
-   {% endif %}
-  </div>
+   <div class="span11 additional">
+    <div class="row-fluid">
+     <div class="span6">
+      <input type="hidden" name="files[{{fileid}}][original_name]" value="{{file.getFilename}}"/>
+      <input type="text" name="files[{{fileid}}][name]" id="filename_{{fileid}}" value="{{file.getFilename}}" placeholder="Filename (optional)" class="filename" onchange="filenameChange(this, {{fileid}})" onkeyup="filenameChange(this, {{fileid}})"/>
+     </div>
+     <div class="span6 typeselect" style="text-align: right" id="typeselect_{{fileid}}">
+      <label for="type_{{fileid}}" class="inline">Type</label>
+      <select name="files[{{fileid}}][type]" id="type_{{fileid}}">
+       {{htmlhelper.getLanguageOptions(file)|raw}}
+      </select>
+     </div>
+     <div class="span6" style="display:none; text-align: right" id="typetext_{{fileid}}">
+      <p class="muted">Type determined from filename</p>
+     </div>
+    </div>
+    <div class="row-fluid">
+     <div class="span9">
+      <label for="upload_{{fileid}}" class="inline">Replace with upload:</label>
+      <input type="file" name="files[{{fileid}}][upload]" id="upload_{{fileid}}" class="btn"/>
+     </div>
+     {% if not newfile %}
+     <div class="span3" style="text-align: right">
+      <input type="checkbox" name="files[{{fileid}}][delete]" value="1" id="delete_{{fileid}}"/>
+      <label for="delete_{{fileid}}" class="inline">delete file</label>
+     </div>
+     {% endif %}
+    </div>
+   </div><!-- /span12 -->
+  </div><!-- /row-fluid -->
  </div>
 
diff --git a/data/templates/edit.htm b/data/templates/edit.htm
index f1f4a51..a365841 100644
--- a/data/templates/edit.htm
+++ b/data/templates/edit.htm
@@ -31,7 +31,7 @@
 </form>
 <script type="application/javascript">
 $(document).ready(function() {
-    initFilenames();
+    initEdit();
 });
 </script>
 {% endblock %}
diff --git a/data/templates/index.htm b/data/templates/index.htm
index df1977a..5752c1e 100644
--- a/data/templates/index.htm
+++ b/data/templates/index.htm
@@ -22,7 +22,7 @@
 </form>
 <script type="application/javascript">
 $(document).ready(function() {
-    initFilenames();
+    initEdit();
 });
 </script>
 {% endblock %}
diff --git a/www/phorkie.js b/www/phorkie.js
index 20066c4..1171b1a 100644
--- a/www/phorkie.js
+++ b/www/phorkie.js
@@ -9,6 +9,13 @@ function filenameChange(elem, id) {
         $('#typetext_' + id).hide();
     }
 }
+
+function initEdit()
+{
+    initFilenames();
+    initAdditionals();
+    $('.filegroup:visible:last textarea').focus();
+}
 function initFilenames()
 {
     $('input.filename').each(
@@ -24,3 +31,23 @@ function initFilenames()
         }
     );
 }
+function initAdditionals()
+{
+    $('a.additional-btn').each(
+        function(num, elem) {
+            toggleAdditional(elem, 0);
+            $(elem).show();
+        }
+    );
+}
+
+function toggleAdditional(elem, time)
+{
+    if (undefined == time) {
+        time = 'fast';
+    }
+    var jt = jQuery(elem);
+    jt.children('i').toggleClass('icon-chevron-down')
+        .toggleClass('icon-chevron-up');
+    jt.parents('.row-fluid').children('.additional').toggle(time);
+}
\ No newline at end of file