From 485b5150663d78a5c21c56319e5f2e027d1164b4 Mon Sep 17 00:00:00 2001 From: Mottie Date: Tue, 3 Feb 2015 12:58:41 -0600 Subject: [PATCH] Dragtable: make compatible with other widgets --- css/dragtable.mod.css | 78 ++++-- css/images/dragtable-handle.png | Bin 0 -> 103 bytes css/images/dragtable-handle.svg | 7 + docs/css/jq.css | 2 + docs/example-dragtable.html | 245 +++++++++++++++++ docs/index.html | 5 +- js/extras/jquery.dragtable.mod.js | 424 ++++++++++++++++++++++-------- js/widgets/widget-editable.js | 14 +- js/widgets/widget-math.js | 17 +- 9 files changed, 643 insertions(+), 149 deletions(-) create mode 100644 css/images/dragtable-handle.png create mode 100644 css/images/dragtable-handle.svg create mode 100644 docs/example-dragtable.html diff --git a/css/dragtable.mod.css b/css/dragtable.mod.css index eea04bbf..e8b59d39 100644 --- a/css/dragtable.mod.css +++ b/css/dragtable.mod.css @@ -1,40 +1,64 @@ -/* +/* * dragtable - * - * @Version 2.0.14 - * + * @Version 2.0.14 MOD * default css - * */ -/*##### the dragtable stuff #####*/ -.dragtable-sortable { - list-style-type: none; margin: 0; padding: 0; -moz-user-select: none; +.dragtable-sortable { + list-style-type: none; + margin: 0; + padding: 0; + -moz-user-select: none; + z-index: 10; } .dragtable-sortable li { - margin: 0; padding: 0; float: left; font-size: 1em; background: white; + margin: 0; + padding: 0; + float: left; + font-size: 1em; } - -.dragtable-sortable th, .dragtable-sortable td{ - border-left: 0px; +.dragtable-sortable table { + margin-top: 0; +} +.dragtable-sortable th, .dragtable-sortable td { + border-left: 0px; } - .dragtable-sortable li:first-child th, .dragtable-sortable li:first-child td { - border-left: 1px solid #CCC; + border-left: 1px solid #CCC; +} +.dragtable-handle-selected { + /* table-handle class while actively dragging a column */ } - .ui-sortable-helper { - opacity: 0.7;filter: alpha(opacity=70); + opacity: 0.7; + filter: alpha(opacity=70); } -.ui-sortable-placeholder { - -moz-box-shadow: 4px 5px 4px #C6C6C6 inset; - -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset; - box-shadow: 4px 5px 4px #C6C6C6 inset; - border-bottom: 1px solid #CCCCCC; - border-top: 1px solid #CCCCCC; - visibility: visible !important; - background: #EFEFEF !important; - visibility: visible !important; +.ui-sortable-placeholder { + -moz-box-shadow: 4px 5px 4px rgba(0,0,0,0.2) inset; + -webkit-box-shadow: 4px 5px 4px rgba(0,0,0,0.2) inset; + box-shadow: 4px 5px 4px rgba(0,0,0,0.2) inset; + border-bottom: 1px solid rgba(0,0,0,0.2); + border-top: 1px solid rgba(0,0,0,0.2); + visibility: visible !important; + /* change the background color here to match the tablesorter theme */ + background: #EFEFEF; } -.ui-sortable-placeholder * { - opacity: 0.0; visibility: hidden; +.ui-sortable-placeholder * { + opacity: 0.0; + visibility: hidden; +} +.table-handle, .table-handle-disabled { + /* background-image: url(images/dragtable-handle.png); */ + /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAANAQMAAAC5Li2yAAAABlBMVEUAAAAzMzPI8eYgAAAAAnRSTlMAzORBQ6MAAAAOSURBVAjXYwABByyYAQAQWgFBLN2RnwAAAABJRU5ErkJggg=='); */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjEzIj48cmVjdCBzdHlsZT0iZmlsbDojMzMzO2ZpbGwtb3BhY2l0eTouODsiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHg9IjEiIHk9IjIiLz4JPHJlY3Qgc3R5bGU9ImZpbGw6IzMzMztmaWxsLW9wYWNpdHk6Ljg7IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4PSIxIiB5PSI0Ii8+CTxyZWN0IHN0eWxlPSJmaWxsOiMzMzM7ZmlsbC1vcGFjaXR5Oi44OyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iNiIvPjxyZWN0IHN0eWxlPSJmaWxsOiMzMzM7ZmlsbC1vcGFjaXR5Oi44OyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iOCIvPjxyZWN0IHN0eWxlPSJmaWxsOiMzMzM7ZmlsbC1vcGFjaXR5Oi44OyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iMTAiLz48L3N2Zz4=); + background-repeat: repeat-x; + height: 13px; + margin: 0 1px; + cursor: move; +} +.table-handle-disabled { + opacity: 0; + cursor: not-allowed; +} +.dragtable-sortable table { + margin-bottom: 0; } diff --git a/css/images/dragtable-handle.png b/css/images/dragtable-handle.png new file mode 100644 index 0000000000000000000000000000000000000000..ff64a7d572cf53cf31ff98cd261c1d21ebe19e97 GIT binary patch literal 103 zcmeAS@N?(olHy`uVBq!ia0vp^OdvKRGmzY=r@IMAu?6^qxB_WoW8)JapD6%YOeH~n w!3<}fI65x|^7uSm978y+Co?dz>&#$e5Qt)Q)VVuxK2V0i)78&qol`;+0PtZJpa1{> literal 0 HcmV?d00001 diff --git a/css/images/dragtable-handle.svg b/css/images/dragtable-handle.svg new file mode 100644 index 00000000..041ec1de --- /dev/null +++ b/css/images/dragtable-handle.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/docs/css/jq.css b/docs/css/jq.css index ebd3d60c..c45df496 100644 --- a/docs/css/jq.css +++ b/docs/css/jq.css @@ -83,6 +83,8 @@ span.alert { padding: 1px 3px; } .fade { opacity: 0.5; } .results { color: red; } .clear { clear: both; } +.good { color: #080; } +.bad { color: #800; } .bootstrap_buttons button { margin: 5px 0 0 0; } #main .ui-accordion-header a, #main .ui-accordion-content { font-size: 14px; } #banner small { font-size: 16px; vertical-align: super; } diff --git a/docs/example-dragtable.html b/docs/example-dragtable.html new file mode 100644 index 00000000..09bf49d7 --- /dev/null +++ b/docs/example-dragtable.html @@ -0,0 +1,245 @@ + + + + + jQuery plugin: Tablesorter 2.0 - Dragtable Mod (beta) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+
+
+ +

Notes

+
+
    +
  • This demo uses a modified version of the jQuery UI Dragtable widget (beta) to work with tablesorter.
    • +
  • This mod has been tested with the following widgets: alignChar, columns, cssStickyHeaders, editable, filter, grouping, headerTitles, math, output, pager print, reflow, resizable, repeatHeaders, staticRow, uitheme & zebra.
    • +
  • This mod does not currently work with the following widgets: +
      +
    • chart - needs more work to be compatible.
      • +
    • columnSelector - needs more work - making this compatible will require significant changes to the dragtable core.
      • +
    • saveSort - this saves the newly moved sorted column properly, but on page reload the column order is restored so it sorts the incorrect column.
      • +
    • scroller - way too much work to make this compatible.
      • +
    • stickyHeaders - needs more work - can't get the drag handle in the cloned sticky header from passing the mousedown on to the original drag handle.
      • +
    +
    • +
  • Any widgets not listed above can be assumed to be incompatible, for now.
    • +
+
+ +

Tablesorter setup

+
+ A complete javascript example can be found in the demo section, below the table. +

+ To use this mod: +
    +
  • Initialize the dragtable mod script first, then initialize tablesorter.
    • +
  • Warning! When setting up the initialization code, make sure that the dragtable sortClass option exactly matches the tablesorter selectorSort option, or the table will be unsortable. + 
    $('table')
+  .dragtable({ sortClass: '.sorter' }) // this is already the default value
+  .tablesorter({ selectorSort: '.sorter' }); // this default value is 'th, td'
    • +
  • Warning! Do not reference a column using jQuery data (e.g. $('th:contains(Name)').data('sorter', 'text');) or by it's zero-based index(1) because these references do not get updated after a column move! +

    + Instead, use one of the following methods (these examples set the column parser): +

    Set parser by data-attribute or header class

    + 
    <tr>
+	<th class="col-id" data-sorter="digit">...</th> <!-- parser set by data-attribute -->
+	<th class="col-name drag-enable sorter-text">...</th> <!-- parser set by header class -->
+	<th class="col-date drag-enable">...</th> <!-- parser set by headers option (see below) -->
+</tr>
    +

    Or, set parser by headers option

    + 
    $('table').tablesorter({
+	headers : {
+		'.col-date' : { sorter : 'shortDate' }
+	}
+});
    • +
  • In order to get dragtable to work, the mod will add a div to act as a dragable handle and wrap the header text in a div(2) which needs to be targeted by the selectorSort option to make it clickable for sorting. +

    + The resulting HTML may look like this: + 
    <tr>
+	<th class="col-id" data-sorter="digit">
+		<div class="table-handle-disabled"></div>
+		<!-- clicking on the "sort" wrapper below will not trigger a sort, because the cell is not set to sort -->
+		<div class="sorter">9999</div>
+	</th>
+	<th class="col-name sorter-text drag-enable">
+		<div class="table-handle"></div>
+		<div class="sorter">Name</div>
+	</th>
+	<th class="col-date drag-enable">
+		<div class="table-handle"></div>
+		<div class="sorter">1/1/2015</div>
+	</th>
+</tr>
    +
    • +
+ (1) Options that use a column index (such as the sortList), or an array of settings (like the resizable_widths option) are updated internally by the mod. +

+ (2) The class name for the dragable handle is set by the dragtable dragHandle option & the class name for the clickable div wrapping the header text is set by the dragtable sortClass option. +
+ +
+ +

Demo

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Student Grades
Name (0) Major (1)Sex (2)English (3)Japanese (4)Calculus (5)Geometry (6)
NameMajorSexEnglishJapaneseCalculusGeometry
Student01 (0)Languages (1)male (2)80 (3)70 (4)75 (5)80 (6)
Student02Mathematicsmale908810090
Student03Languagesfemale85958085
Student04Languagesmale6055100100
Student05Languagesfemale68809580
Student06Mathematicsmale1009910090
Student07Mathematicsmale85689090
Student08Languagesmale100909085
Student09Mathematicsmale80506575
Student10Languagesmale8510010090
Student11Languagesmale8685100100
Student12Mathematicsfemale100757085
Student13Languagesfemale1008010090
Student14Languagesfemale50455590
Student15Languagesmale953510090
Student16Languagesfemale100503070
Student17Languagesfemale801005565
Student18Mathematicsmale30495575
Student19Languagesmale68908870
Student20Mathematicsmale40454080
+ +

HTML

+
+ 

+		

+
+		
Javascript

+		

+			

+		

+
+		
Optional CSS

+		

+			

+		

+
+	

+
+
+
diff --git a/docs/index.html b/docs/index.html
index 9e6f17e2..b3828179 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -473,6 +473,7 @@
 		
  • † Columns Highlight widget (v2.0.17)
    • 
 		
  • Beta Column Selector widget (v2.15; v2.18.5).
    • 
 		
  • Content Editable widget (v2.9; v2.18.0).
    • 
+		
  • Beta Dragtable mod  - (jQuery UI widget for column reordering [ref]; v2.18.5).
    • 
 		
  • † Filter Widget (v2.17.4):
 			
 		
    • 
-		
  • Formatter widget (v2.18.5).
    • 
+		
  • Beta Formatter widget (v2.18.5).
    • 
 		
  • Grouping rows widget: