• R/O
  • SSH
  • HTTPS

phosphoresce: Commit


Commit MetaInfo

Revision388 (tree)
Time2013-08-13 22:47:58
Authorbbcry

Log Message

(empty log message)

Change Summary

Incremental Difference

--- develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/ScrollTableList.js (revision 387)
+++ develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/ScrollTableList.js (revision 388)
@@ -13,10 +13,16 @@
1313 */
1414 /**
1515 * コンストラクタ<br>
16- * @param {Object} options 動作オプション<br>
1716 * <ul>
1817 * <li>target : ターゲット要素又はセレクタ(ディフォルト:null)</li>
18+ * <li>width : 生成するテーブルリストコンテナ幅(ディフォルト:null)</li>
19+ * <li>height : 生成するテーブルリストコンテナ高さ(ディフォルト:null)</li>
20+ * <li>fixRow : 非スクロールとする固定行数(ディフォルト:null)</li>
21+ * <li>fixCol : 非スクロールとする固定列数(ディフォルト:null)</li>
22+ * <li>columnWidths : 列幅配列(ディフォルト:null)</li>
23+ * <li>columnHeight : 行高さ(ディフォルト:1em)</li>
1924 * </ul>
25+ * @param {Object} options 動作オプション<br>
2026 */
2127 var ScrollTableList = function(options) {
2228
@@ -23,9 +29,6 @@
2329 /** ユニークID */
2430 this.uid;
2531
26- /** 生成済みインスタンス */
27- this.$created;
28-
2932 /** ターゲット要素 */
3033 this.target;
3134
@@ -42,8 +45,11 @@
4245 this.fixCol;
4346
4447 /** カラムサイズ定義 */
45- this.columns;
48+ this.columnWidths;
4649
50+ /** カラムサイズ定義 */
51+ this.columnHeight;
52+
4753 /**
4854 * コンストラクタ処理
4955 */
@@ -53,12 +59,12 @@
5359 height : void 0,
5460 fixRow : 0,
5561 fixCol : 0,
56- columnWidths : []
62+ columnWidths : [],
63+ columnHeight : "1em"
5764 };
5865 var mergedOptions = $.extend({}, defaults, options);
5966 {
6067 this.uid = "ScrollTableList." + UniqueID.generate();
61- this.$created = void 0;
6268 this.target = mergedOptions.target;
6369 this.width = !mergedOptions.width ? void 0 : ElementUtil.getWidthPx(mergedOptions.width);
6470 this.height = !mergedOptions.height ? void 0 : ElementUtil.getHeightPx(mergedOptions.height);
@@ -65,6 +71,7 @@
6571 this.fixRow = mergedOptions.fixRow;
6672 this.fixCol = mergedOptions.fixCol;
6773 this.columnWidths = mergedOptions.columnWidths;
74+ this.columnHeight = mergedOptions.columnHeight;
6875 }
6976 };
7077
@@ -71,6 +78,9 @@
7178 /** イベントプレフィックス */
7279 ScrollTableList.EVENT_PREFIX = "ScrollTableList.event";
7380
81+/** 生成済みフラグ */
82+ScrollTableList.CREATED_FLAG = "ScrollTableList.created";
83+
7484 /**
7585 * 指定されたオプションからスクロール可能なテーブルを構築します。<br>
7686 * @returns 正常に構築処理が完了した場合にtrueを返却
@@ -77,61 +87,291 @@
7787 */
7888 ScrollTableList.prototype.create = function() {
7989 var undef = void 0;
80- var id = this.uid;
90+ var scrollbarSize = 16;
91+ var id = $(this.target).attr("id") && $(this.target).attr("id") !== "" ? $(this.target).attr("id") : this.uid;
8192 var $target = $(this.target);
82- var columnWidths = [];
83- var rowHeights = [];
93+ //$target.css("border-spacing", "0px");
94+ //$target.css("border-collapse","collapse");
8495
8596 /*
86- * 元テーブルセル幅とオプションからセル幅を決定
97+ * 既に生成されたテーブルである場合はスキップ
8798 */
88- $target.find("td").each(function(i, e) {
89- columnWidths[i] = $(this).width() + "px";
90- });
91- if (this.columnWidths) {
92- if (this.columnWidths.length > columnWidths.length) {
93- for ( var i = 0; i <= columnWidths.length - 1; i++) {
94- columnWidths[i] = this.columnWidths[i];
95- }
96- } else {
97- for ( var i = 0; i <= this.columnWidths.length - 1; i++) {
98- columnWidths[i] = this.columnWidths[i];
99- }
100- }
99+ if ($target.attr(ScrollTableList.CREATED_FLAG) === "true") {
100+ return false;
101101 }
102102
103103 /*
104- * セル幅設定後の行高さを取得
104+ * テーブルセル実幅とオプションからセル幅情報を生成
105105 */
106- var $process = this.__createEmptyTable($target, false);
107- var $colgroup = this.__createColgroup(columnWidths);
108- $process.find("colgroup").remove();
109- $colgroup.insertBefore($process.children()[0]);
110- $process.find("tr").each(function(i, e) {
111- $(this).find("td").each(function(i2, e2) {
112- console.log($(this).height());
113- });
106+ var columnWidths = this.__createColumnWidths($target, this.columnWidths);
107+
108+ /*
109+ * テーブルオブジェクトから加工用テーブルオブジェクトを生成
110+ */
111+ var $table = this.__createCloneTable($target, this.width, columnWidths, this.columnHeight);
112+ var $tableLT = this.__createDividedTable($table, 0, 0, this.fixRow - 1, this.fixCol - 1);
113+ var $tableRT = this.__createDividedTable($table, 0, this.fixCol, this.fixRow - 1, columnWidths.length - 1);
114+ var $tableLB = this.__createDividedTable($table, this.fixRow, 0, void 0, this.fixCol - 1);
115+ var $tableRB = this.__createDividedTable($table, this.fixRow, this.fixCol, void 0, void 0);
116+
117+ /*
118+ * 分割テーブルコンテナオブジェクトを生成
119+ */
120+ var leftWidth = $tableLT.width();
121+ if (Browser.getBrowserName() === "Chrome" || Browser.getBrowserName() === "Safari") {
122+ leftWidth += this.fixCol;
123+ leftWidth += 1;
124+ }
125+ var rightWidth = this.width - leftWidth;
126+ var $divLT = this.__createOverflowHiddenContainer(id + "-lt", leftWidth, void 0).append($tableLT);
127+ var $divRT = this.__createOverflowHiddenContainer(id + "-rt", rightWidth - scrollbarSize, void 0).append($tableRT);
128+ var $divLB = this.__createOverflowHiddenContainer(id + "-lb", leftWidth, this.height - scrollbarSize).append($tableLB);
129+ var $divRB = this.__createOverflowScrollContainer(id + "-rb", rightWidth, this.height).append($tableRB);
130+
131+ /*
132+ * スクロールオーバーフロー時の位置ずれ補正の為のコンテナ生成
133+ */
134+ var $divWLT = this.__createOverflowHiddenContainer(id + "-wlt", leftWidth, void 0).append($divLT);
135+ var $divWRT = this.__createOverflowHiddenContainer(id + "-wrt", rightWidth, void 0).append($divRT);
136+ var $divWLB = this.__createOverflowHiddenContainer(id + "-wlb", leftWidth, this.height).append($divLB);
137+ var $divWRB = this.__createOverflowHiddenContainer(id + "-wrb", rightWidth, this.height).append($divRB);
138+
139+ /*
140+ * 配置コンテナオブジェクト生成
141+ */
142+ //var $divL = this.__createFloatLeftContainer(id + "-l", $divWLT.width(), this.height).append($divWLT).append($divWLB);
143+ //var $divR = this.__createFloatRightContainer(id + "-r", $divWRT.width(), this.height).append($divWRT).append($divWRB);
144+ var $divL = this.__createInlineBlockContainer(id + "-l", $divWLT.width(), this.height).append($divWLT).append($divWLB);
145+ var $divR = this.__createInlineBlockContainer(id + "-r", $divWRT.width(), this.height).append($divWRT).append($divWRB);
146+
147+ /*
148+ * スクロールイベントバインド
149+ */
150+ $divRB.unbind("scroll." + ScrollTableList.EVENT_PREFIX);
151+ $divRB.bind("scroll." + ScrollTableList.EVENT_PREFIX, function() {
152+ $divRT.scrollLeft($(this).scrollLeft());
153+ if ($divRT.scrollLeft() < $(this).scrollLeft()) {
154+ $divRT.css("position", "relative");
155+ $divRT.css("left", ($divRT.scrollLeft() - $(this).scrollLeft()) + "px");
156+ } else {
157+ $divRT.css("position", "static");
158+ $divRT.css("left", "0px");
159+ }
160+
161+ $divLB.scrollTop($(this).scrollTop());
162+ if ($divLB.scrollTop() < $(this).scrollTop()) {
163+ $divLB.css("position", "relative");
164+ $divLB.css("top", ($divLB.scrollTop() - $(this).scrollTop()) + "px");
165+ } else {
166+ $divLB.css("position", "static");
167+ $divLB.css("top", "0px");
168+ }
114169 });
115- $process.insertAfter($target);
116170
171+ /*
172+ * 全体コンテナオブジェクト生成
173+ */
174+ var $container = this.__createBlockContainer(id, this.width, this.height).append($divL).append($divR);
175+ $container.attr(ScrollTableList.CREATED_FLAG, "true");
176+
177+ /*
178+ * 配置テーブルオブジェクト毎のセル編集
179+ */
180+ $container.insertAfter($target);
181+
182+ /*
183+ * 元テーブルオブジェクト破棄
184+ */
185+ $target.remove();
186+
117187 return true;
118188 };
119189
120190 /**
121- * ターゲットテーブル要素から空のテーブル要素を生成します。<br>
122- * @param baseTable コピー元テーブル
123- * @param clearChild 子要素をクリアする場合にtrueを指定
124- * @returns テーブルjQueryオブジェクト
191+ * 汎用的なブロックコンテナパネル要素を生成します。<br>
192+ * @param id エレメントID
193+ * @param width 幅
194+ * @param height 高さ
195+ * @returns スクロールテーブルを保持するコンテナjQueryオブジェクト
125196 */
126-ScrollTableList.prototype.__createEmptyTable = function(baseTable, clearChild) {
197+ScrollTableList.prototype.__createBlockContainer = function(id, width, height) {
198+ // コンテナ要素生成
199+ var $div = $("<div/>");
200+ $div.css("padding", "0px");
201+ $div.css("margin", "0px");
202+ $div.css("display", "block");
203+ $div.css("position", "static");
204+ if (id && id !== "") {
205+ $div.attr("id", id);
206+ }
207+ if (width && width != "") {
208+ $div.width(width);
209+ }
210+ if (height && height != "") {
211+ $div.height(height);
212+ }
213+ return $div;
214+};
215+
216+/**
217+ * 汎用的なインラインブロックコンテナパネル要素を生成します。<br>
218+ * @param id エレメントID
219+ * @param width 幅
220+ * @param height 高さ
221+ * @returns スクロールテーブルを保持するコンテナjQueryオブジェクト
222+ */
223+ScrollTableList.prototype.__createInlineBlockContainer = function(id, width, height) {
224+ // コンテナ要素生成
225+ var $div = $("<div/>");
226+ $div.css("padding", "0px");
227+ $div.css("margin", "0px");
228+ $div.css("display", "inline-block");
229+ $div.css("position", "static");
230+ if (id && id !== "") {
231+ $div.attr("id", id);
232+ }
233+ if (width && width != "") {
234+ $div.width(width);
235+ }
236+ if (height && height != "") {
237+ $div.height(height);
238+ }
239+ return $div;
240+};
241+
242+/**
243+ * カラム情報として設定するdivタグ要素を生成します。<br>
244+ * @param html 内部HTML文字列
245+ * @returns {Object} divタグ要素jQueryオブジェクト
246+ */
247+ScrollTableList.prototype.__createCellContainer = function(html) {
248+ var $div = this.__createBlockContainer(void 0, void 0, void 0);
249+ $div.css("overflow", "hidden");
250+ $div.html(html);
251+ return $div;
252+};
253+
254+/**
255+ * オーバーフロー時に非表示とするパネル要素を生成します。<br>
256+ * @param id エレメントID
257+ * @param width 幅
258+ * @param height 高さ
259+ * @returns {Object} パネル要素jQueryオブジェクト
260+ */
261+ScrollTableList.prototype.__createOverflowHiddenContainer = function(id, width, height) {
262+ var $div = this.__createBlockContainer(id, width, height);
263+ $div.css("overflow", "hidden");
264+ return $div;
265+};
266+
267+/**
268+ * オーバーフロー時にスクロールさせるとするパネル要素を生成します。<br>
269+ * @param id エレメントID
270+ * @param width 幅
271+ * @param height 高さ
272+ * @returns {Object} パネル要素jQueryオブジェクト
273+ */
274+ScrollTableList.prototype.__createOverflowScrollContainer = function(id, width, height) {
275+ var $div = this.__createBlockContainer(id, width, height);
276+ $div.css("overflow", "scroll");
277+ return $div;
278+};
279+
280+/**
281+ * 左フローとさせるパネル要素を生成します。<br>
282+ * @param id エレメントID
283+ * @param width 幅
284+ * @param height 高さ
285+ * @returns {Object} パネル要素jQueryオブジェクト
286+ */
287+ScrollTableList.prototype.__createFloatLeftContainer = function(id, width, height) {
288+ var $div = this.__createBlockContainer(id, width, height);
289+ $div.css("float", "left");
290+ return $div;
291+};
292+
293+/**
294+ * 右フローとさせるパネル要素を生成します。<br>
295+ * @param id エレメントID
296+ * @param width 幅
297+ * @param height 高さ
298+ * @returns {Object} パネル要素jQueryオブジェクト
299+ */
300+ScrollTableList.prototype.__createFloatRightContainer = function(id, width, height) {
301+ var $div = this.__createBlockContainer(id, width, height);
302+ $div.css("float", "right");
303+ return $div;
304+};
305+
306+/**
307+ * ターゲットテーブル要素から処理用のクローンテーブル要素を生成します。<br>
308+ * @param baseTable テーブル要素オブジェクト
309+ * @param tableWidth テーブル幅
310+ * @param columnWidths カラム幅配列
311+ * @param columnHeihgt カラム高さ
312+ * @returns {Object} テーブルjQueryオブジェクト
313+ */
314+ScrollTableList.prototype.__createCloneTable = function(baseTable, tableWidth, columnWidths, columnHeihgt) {
315+ var _this_ = this;
127316 var $table = $(baseTable).clone();
317+ var $colgroup = _this_.__createColgroup(columnWidths);
318+ $table.removeAttr("id");
319+ $table.removeAttr("name");
320+ $table.find("colgroup").remove();
321+ $colgroup.insertBefore($table.children()[0]);
128322 $table.css("table-layout", "fixed");
129- if (clearChild) {
130- $table.find("*").remove();
131- }
323+ $table.css("margin", "0px");
324+ $table.width(tableWidth);
325+ $table.find("tr").each(function(i, e) {
326+ $(this).height(columnHeihgt);
327+ $(this).find("th,td").each(function(i, e) {
328+ $(this).height(columnHeihgt);
329+ $(this).css("overflow", "hidden");
330+ $(this).attr("nowrap", "nowrap");
331+ var $div = _this_.__createCellContainer($(this).html());
332+ $(this).html("");
333+ $(this).append($div);
334+ });
335+ });
132336 return $table;
133337 };
134338
339+/**
340+ * 指定されたテーブルからカラム幅の実サイズ配列を生成します。<br>
341+ * また、個別のカラム幅配列が指定されている場合はそれらのサイズ情報をマージして提供します。<br>
342+ * @param baseTable テーブル要素オブジェクト
343+ * @param optionWidths オプション指定カラム幅配列
344+ * @returns {Array} カラム幅の実サイズ配列
345+ */
346+ScrollTableList.prototype.__createColumnWidths = function(baseTable, optionWidths) {
347+ var columnWidths = [];
348+ $(baseTable).find("tr").each(function(ri, re) {
349+ if (ri > 0) {
350+ return false;
351+ }
352+ $(this).find("th,td").each(function(ci, ce) {
353+ columnWidths[ci] = $(this).width() + "px";
354+ });
355+ });
356+ if (optionWidths) {
357+ if (optionWidths.length > columnWidths.length) {
358+ for ( var i = 0; i <= columnWidths.length - 1; i++) {
359+ columnWidths[i] = optionWidths[i];
360+ }
361+ } else {
362+ for ( var i = 0; i <= optionWidths.length - 1; i++) {
363+ columnWidths[i] = optionWidths[i];
364+ }
365+ }
366+ }
367+ return columnWidths;
368+};
369+
370+/**
371+ * 指定されたカラム幅配列からcolgroupタグ要素を生成します。<br>
372+ * @param columnWidths カラム幅配列
373+ * @returns {Object} colgroupタグ要素jQueryオブジェクト
374+ */
135375 ScrollTableList.prototype.__createColgroup = function(columnWidths) {
136376 var $colgroup = $("<colgroup/>");
137377 if (columnWidths) {
@@ -141,6 +381,8 @@
141381 $col.attr("width", e);
142382 } else {
143383 $col.css("width", e);
384+ $col.css("min-width", e);
385+ $col.css("max-width", e);
144386 }
145387 $colgroup.append($col);
146388 });
@@ -147,3 +389,62 @@
147389 }
148390 return $colgroup;
149391 };
392+
393+/**
394+ * 指定されたテーブルから指定範囲セルのみのテーブルオブジェクトを生成します。<br>
395+ * @param baseTable テーブル要素オブジェクト
396+ * @param rowStart 範囲開始行
397+ * @param colStart 範囲開始列
398+ * @param rowEnd 範囲終了行
399+ * @param colEnd 範囲終了列
400+ * @returns {Object} テーブル要素オブジェクト
401+ */
402+ScrollTableList.prototype.__createDividedTable = function(baseTable, rowStart, colStart, rowEnd, colEnd) {
403+ var $table = $(baseTable).clone();
404+ $table.find("*").remove();
405+
406+ rowStart = typeof (rowStart) === "undefined" ? 0 : rowStart;
407+ colStart = typeof (colStart) === "undefined" ? 0 : colStart;
408+ rowEnd = typeof (rowEnd) === "undefined" ? Number.MAX_VALUE : rowEnd;
409+ colEnd = typeof (colEnd) === "undefined" ? Number.MAX_VALUE : colEnd;
410+
411+ // table幅設定
412+ var width = 0;
413+ var setWidth = true;
414+ $(baseTable).find("colgroup").find("col").each(function(i, e) {
415+ if (i >= colStart && i <= colEnd) {
416+ if ($(this).attr("width")) {
417+ setWidth = false;
418+ } else {
419+ width += ElementUtil.getWidthPx($(this).css("width"));
420+ }
421+ }
422+ });
423+ if (setWidth) {
424+ $table.width(width);
425+ }
426+
427+ // colgroupタグ要素
428+ var $colgroup = $("<colgroup/>");
429+ $(baseTable).find("colgroup").find("col").each(function(i, e) {
430+ if (i >= colStart && i <= colEnd) {
431+ $colgroup.append($(this).clone());
432+ }
433+ });
434+ $table.append($colgroup);
435+
436+ // tr,th,tdタグ要素
437+ $(baseTable).find("tr").each(function(ri, re) {
438+ if (ri >= rowStart && ri <= rowEnd) {
439+ var $tr = $("<tr/>");
440+ $(this).find("th,td").each(function(ci, ce) {
441+ if (ci >= colStart && ci <= colEnd) {
442+ $tr.append($(this).clone());
443+ }
444+ });
445+ $table.append($tr);
446+ }
447+ });
448+
449+ return $table;
450+};
--- develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/Sizing.js (nonexistent)
+++ develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/Sizing.js (revision 388)
@@ -0,0 +1,53 @@
1+/**
2+ * エレメントサイズ矯正クラス<br>
3+ * <br>
4+ * エレメントのサイズを指定されたオプション内容に基づいてウィンドウリサイズイベント発生時に矯正します。<br>
5+ *
6+ * @author Kitagawa<br>
7+ *
8+ *<!--
9+ * 更新日 更新者 更新内容
10+ * 2012/07/02 Kitagawa 新規作成
11+ *-->
12+ */
13+
14+/**
15+ * コンストラクタ<br>
16+ */
17+var Sizing = function() {
18+};
19+
20+/**
21+ *
22+ * <ul>
23+ * <li>target : ターゲット要素又はセレクタ(ディフォルト:null)</li>
24+ * <li>offsetWidth : ドキュメント幅を基準としたオフセットサイズ(ディフォルト:null)</li>
25+ * <li>offsetHeight : ドキュメント高さを基準としたオフセットサイズ(ディフォルト:null)</li>
26+ * <li>fixWidth : 固定指定幅(ディフォルト:null)</li>
27+ * <li>fixHeight : 固定指定高さ(ディフォルト:null)</li>
28+ * </ul>
29+ * @param {Object} options 動作オプション<br>
30+ * @returns {Boolean} 正常に処理が終了した場合にtrueを返却
31+ */
32+Sizing.adjust = function(options) {
33+ var defaults = {
34+ target : void 0,
35+ offsetWidth : void 0,
36+ offsetHeight : void 0,
37+ fixWidth : void 0,
38+ fixHeight : void 0
39+ };
40+ var mergedOptions = $.extend({}, defaults, options);
41+
42+ $(window).bind("resize.autoResizeScrollLayout.width", function() {
43+ if (mergedOptions.offsetWidth) {
44+ $(mergedOptions.target).width(Content.getContentWidth() - ElementUtil.getWidthPx(mergedOptions.offsetWidth));
45+ }
46+ if (mergedOptions.offsetHeight) {
47+ $(mergedOptions.target).height($(window).innerHeight() - ElementUtil.getHeightPx(mergedOptions.offsetHeight));
48+ }
49+ });
50+ $(window).resize();
51+
52+ return true;
53+};
Added: svn:mime-type
## -0,0 +1 ##
+text/plain
\ No newline at end of property
--- develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/DependResolver.js (revision 387)
+++ develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/DependResolver.js (revision 388)
@@ -51,8 +51,12 @@
5151 },
5252 "ScrollTableList" : {
5353 src : "/org/phosphoresce/javascript/control/ScrollTableList.js",
54- depends : [ "ElementUtil", "StringUtil", "UniqueID" ]
54+ depends : [ "ElementUtil", "StringUtil", "UniqueID", "Browser" ]
5555 },
56+ "Sizing" : {
57+ src : "/org/phosphoresce/javascript/control/Sizing.js",
58+ depends : [ "ElementUtil", "Content" ]
59+ },
5660 "StringEx" : {
5761 src : "/org/phosphoresce/javascript/extends/StringEx.js",
5862 depends : []
--- develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/web/Submit.js (revision 387)
+++ develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/web/Submit.js (revision 388)
@@ -259,6 +259,7 @@
259259 return true;
260260 },
261261 error : function(XMLHttpRequest, textStatus, errorThrown) {
262+ var statusCode = XMLHttpRequest.status;
262263 alert(Message.get("FCRE00069", [ DateUtil.getLocalYYYYsMMsDDaHHcSS(), statusCode ]));
263264 return false;
264265 },
Show on old repository browser