update doc and remove row-id

jbouzekri · Aug 10, 2015 · 446219f · 446219f
1 parent 6eb4b1f
commit 446219f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/Resources/doc/base/markup.md b/Resources/doc/base/markup.md
@@ -7,12 +7,12 @@ File without preview
 --------------------
 
 ``` html
-<div id="test_row" class="file-upload">
+<div id="test_row" class="jb_fileupload_row">
     <div class="alert alert-danger jb_result_error" style="display: none;"></div>
     <label for="test" class="required">Test</label>
     <span class="fileinput-button">
         <span><a href="#importFile">Import a file</a></span>
-        <input class="jb_fileupload" type="file" name="test" data-url="/app_dev.php/_uploader/gallery/upload" data-row-id="test_row" data-use-crop="false">
+        <input class="jb_fileupload" type="file" name="test" data-url="/app_dev.php/_uploader/gallery/upload" data-use-crop="false">
     </span>
     <span> | </span>
     <span>
@@ -26,7 +26,7 @@ File without preview
 </div>
 ```
 
-* `.jb_fileupload[data-row-id]` : the attribut data-row-id indicated the parent div rom which we can find using jQuery all children having jb_* class
+* `.jb_fileupload_row` : this class is the starting point of the markup. Find query are done to find others child classes starting with jb_*
 * `.jb_result_error` : used to display error
 * `.fileinput-button` : used in css to hide the input file behind the upload file link
 * `.jb_fileupload` : the base class used to activate the jquery plugin. It must be place on the input file.
@@ -42,15 +42,15 @@ Image upload with preview
 -------------------------
 
 ``` html
-<div id="test_row" class="file-upload">
+<div id="test_row" class="jb_fileupload_row">
     <div class="alert alert-danger jb_result_error" style="display: none;"></div>
     <label for="test" class="required">Test2</label>
     <img class="jb_result_preview" src="/bundles/jbfileuploader/img/default.png" data-default="/bundles/jbfileuploader/img/default.png" width="100" />
     <img class="jb_loading" src="/bundles/jbfileuploader/img/ajax-loader.gif" style="display: none;" />
 
     <span class="fileinput-button">
         <span><a href="#importFile">Import a file</a></span>
-        <input class="jb_fileupload" type="file" name="test_upload_file" data-url="/app_dev.php/_uploader/gallery/upload" data-row-id="test_row" data-use-crop="false">
+        <input class="jb_fileupload" type="file" name="test_upload_file" data-url="/app_dev.php/_uploader/gallery/upload" data-use-crop="false">
     </span>
     <span> | </span>
     <span>
@@ -72,15 +72,15 @@ Image upload with crop
 ----------------------
 
 ``` html
-<div id="test_upload_test_row" class="file-upload">
+<div id="test_upload_test_row" class="jb_fileupload_row">
     <div class="alert alert-danger jb_result_error" style="display: none;"></div>
     <label for="test_upload_test" class="required">Test</label>
     <div class="jb_crop_upload">
         <img class="jb_result_preview" src="/bundles/jbfileuploader/img/default.png" data-default="/bundles/jbfileuploader/img/default.png" width="100">
         <img class="jb_loading" src="/bundles/jbfileuploader/img/ajax-loader.gif" style="display: none;">
         <span class="fileinput-button">
             <span><a href="#importFile">Import a file</a></span>
-            <input class="jb_fileupload" type="file" name="test_upload_test_file" data-url="/app_dev.php/_uploader/gallery/upload" data-row-id="test_upload_test_row" data-use-crop="true">
+            <input class="jb_fileupload" type="file" name="test_upload_test_file" data-url="/app_dev.php/_uploader/gallery/upload" data-use-crop="true">
         </span>
         <span> | </span>
         <span>
@@ -116,4 +116,4 @@ Most of the jb_* classes have been explained above. What add this field is the `
 * `.jb_crop_height` : height of the crop zone
 * `.jb_crop_filename` : filename to crop
 
-_Note : I am open to pointer to make a plugin less dependant on html markup_
+_Note : I am open to pointer to make a plugin less dependant on html markup_
diff --git a/Resources/public/js/jbfileupload.js b/Resources/public/js/jbfileupload.js
@@ -6,7 +6,7 @@
         return this.each(function() {
 
             // Find parent div to allow select of all important children element
-            var $parentTag = $(this).closest('.file-upload'),
+            var $parentTag = $(this).closest('.jb_fileupload_row'),
                 $resultError = $parentTag.find('.jb_result_error'),
                 $cropTool = $parentTag.find('.jb_crop_tool'),
                 $cropUpload = $parentTag.find('.jb_crop_upload'),

diff --git a/Resources/views/Form/fields.html.twig b/Resources/views/Form/fields.html.twig
@@ -1,10 +1,9 @@
 {#
-The id on the row and the attribute data-row-id are important. They are used in the js code.
-Same thing for all classes starting with jb_
+All classes starting with jb_ are part of the markup. They are used in the js code.
 #}
 
 {% block jb_file_ajax_row %}
-    <div id="{{ id }}_row" class="file-upload">
+    <div id="{{ id }}_row" class="jb_fileupload_row">
         <div class="alert alert-danger jb_result_error" style="display: none;"></div>
         {{- form_label(form) -}}
         {{- form_errors(form) -}}
@@ -20,7 +19,6 @@ Same thing for all classes starting with jb_
             type="file"
             name="{{ id }}_file"
             data-url="{{ oneup_uploader_endpoint(endpoint) }}"
-            data-row-id="{{ id }}_row"
             data-use-crop="{{ use_crop ? "true" : "false" }}" />
     </span>
     {% if remove_link %}