OSDN -- Develop and Download Open Source Software
  • R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javac++androidlinuxc#windowsobjective-ccocoa誰得qtpythonphprubygameguibathyscaphec計画中(planning stage)翻訳omegatframeworktwitterdomtestvb.netdirectxゲームエンジンbtronarduinopreviewer

JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している


Commit MetaInfo

Revision31 (tree)
Time2016-11-28 12:15:33
Authortakoyaki_umaaaa

Log Message

(empty log message)

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 31)
@@ -79,6 +79,8 @@
7979 font-size: small;
8080 }
8181
82+
83+
8284 /* パレット要素の定義 */
8385 .palbg,
8486 .paltxtcol,
@@ -141,3 +143,20 @@
141143 0% { background-position:100% 100%}
142144 100% {background-position:0% 0%}
143145 }
146+
147+
148+ /* 制御用 ******************* */
149+ div.PauseAnimation,
150+ img.PauseAnimation {
151+ animation: none;
152+ }
153+
154+ #apparea:target img,
155+ #apparea:target div {
156+ animation: none;
157+ background-color:red;
158+ }
159+
160+
161+
162+
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 31)
@@ -20,6 +20,7 @@
2020 <button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
2121 <button type=button class="pal" data-objid="pal" data-palid="4" >button5</button>
2222 <a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
23+ <a href="#apparea">停止</a>
2324
2425 <!-- Palette -->
2526 <style id="stylepalbg">
@@ -180,7 +181,7 @@
180181 <br />
181182
182183 <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2" title="動きを設定するパレットです">
183- <legend class="pallegend"> Action Palette </legend>
184+ <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
184185 <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
185186 <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
186187 <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 31)
@@ -51,13 +51,14 @@
5151 num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
5252 cssstr1, // CSS書き換え前半文字
5353 cssstr2, // CSS書き換え後半文字
54- file // 画像ファイルを指している file object
54+ file, // 画像ファイルを指している file object
55+ cbresult // 処理完了結果callback 引数：true/false ... 処理結果
5556 ) {
5657 // drop fileの読み込み
5758 let reader = new FileReader();
5859 // Image fileを読み込み (画像の幅・高さは取れない。Binary dataを memory上に読むだけなので)
5960 reader.readAsDataURL(file);
60- reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
61+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2, cbresult);
6162 };
6263 // Text fileを読み込み、その内容を対象CSSに設定
6364 function setTextFileToCSS(
@@ -65,20 +66,25 @@
6566 num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
6667 cssstr1, // CSS書き換え前半文字
6768 cssstr2, // CSS書き換え後半文字
68- file // CSS定義が1つだけ入った Textファイルを指している file object
69+ file, // CSS定義が1つだけ入った Textファイルを指している file object
70+ cbresult // 処理完了結果callback 引数：true/false ... 処理結果
6971 ) {
7072 // drop fileの読み込み
7173 let reader = new FileReader();
7274 // Text fileを読み込み
7375 reader.readAsText(file);
74- reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
76+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2, cbresult);
7577 };
76-function setFileToCSS( ele, num, cssstr1, cssstr2, evt ){
78+function setFileToCSS(ele, num, cssstr1, cssstr2, cbresult, evt) {
7779 let blob = evt.target.result;
7880 // blobの適用
7981 let csstext = String(cssstr1) + blob + String(cssstr2);
8082 ele.sheet.deleteRule(num);
8183 ele.sheet.insertRule(csstext, num);
84+
85+ if (null != cbresult) {
86+ cbresult(true);
87+ }
8288 };
8389
8490 // CSSに定義をセット
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 31)
@@ -104,7 +104,14 @@
104104 }
105105 }
106106
107+ // 全ての要素に引数 CSS classを toggleでセット
108+ toggleClassToAllObj(classname) {
109+ for (let i = 0; i < this.ObjIDLen; i++) {
110+ this.ObjIDarray[i].DOMobject.classList.toggle(classname);
111+ }
112+ }
107113
114+
108115 // Command処理 ----------------------
109116 createDispObj(type, rect, opt) {
110117 this.debuglog("createDispObj");
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 31)
@@ -66,7 +66,7 @@
6666 ) {
6767 let cssstr1 = '.palbg' + id + ' { background-image: url(';
6868 let cssstr2 = '); background-size: cover; }';
69- setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file);
69+ setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpalbg[id], file));
7070 }
7171
7272 // text color ('#000000, rgba(0,0,0,0) など)
@@ -76,7 +76,7 @@
7676 ) {
7777 let cssstr1 = '.paltxtcol' + id + ' {\ncolor: ';
7878 let cssstr2 = ';\n}';
79- setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
79+ setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
8080 };
8181 // 指定された画像を font colorとして設定する
8282 definepaltxtcolImage(
@@ -85,8 +85,20 @@
8585 ) {
8686 let cssstr1 = '.paltxtcol' + id + ' { background: url(';
8787 let cssstr2 = '); background-size: contain; color: #fff; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }';
88- setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
88+ setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
8989 };
90+ loadresult(ele, file, result) {
91+ if (true == result) {
92+ // file名をtooltipにセット
93+ let title = file.name.match(/^[\s\S]*\./);
94+ ele.title = (null != title) ? title[0] : '';
95+ return;
96+ }
97+ else {
98+ console.error('パレットへの drop file読み込み失敗 \npalette=' + ele.dataset.objid + ', file=' + file.name);
99+ return;
100+ }
101+ }
90102 // 指定された Text fileを CSS animation定義として保持する
91103 // Text fileには下記２つの定義が含まれていること
92104 // 1. 「animation:」で始まり　「;」で終わる animation定義
@@ -102,7 +114,7 @@
102114 let reader = new FileReader();
103115 // Text fileを読み込み
104116 reader.readAsText(file);
105- reader.onload = function (ele, num, cssstr1, cssstr2, evt) {
117+ reader.onload = function (ele, num, cssstr1, cssstr2, filename, evt) {
106118 let cssdata = evt.target.result; // 読み込んだ文字列
107119
108120 // 読み込んだ文字列を 「animation定義」と「keyframe定義」に分割
@@ -120,9 +132,19 @@
120132 // keyframe定義置き換え
121133 ele.sheet.deleteRule(defAnimNum + 1);
122134 ele.sheet.insertRule(cssKeyframe, defAnimNum + 1);
123- }.bind(this, this.styleact, id, cssstr1, cssstr2);
135+
136+ // file名をtooltipにセット
137+ let title = filename.match(/^[\s\S]*\./);
138+ this.DOMpalact[num].title = (null != title) ? title[0] : '';
139+ }.bind(this, this.styleact, id, cssstr1, cssstr2, file.name);
124140 };
125141
142+ // Action paletteの全要素に引数 CSS classを toggleでセット
143+ toggleClassToActionPalettes(classname) {
144+ for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
145+ this.DOMpalact[cnt].classList.toggle(classname);
146+ }
147+ }
126148
127149
128150 // 描画関数 ---------------------
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 31)
@@ -30,6 +30,9 @@
3030 this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3131 this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3232 }
33+
34+ this.DOMpauseanim = document.getElementById('btnpauseanim');
35+ this.DOMpauseanim.addEventListener('click', this.onClickPauseAnimation.bind(this));
3336 }
3437
3538 // 操作関数 ----------------------------
@@ -40,6 +43,8 @@
4043 let data = this.DOMobject[groupType].innerHTML;
4144 }
4245
46+
47+
4348 // 描画関数 ---------------------
4449
4550 render() {
@@ -104,4 +109,13 @@
104109 window.appArea.setMouseEventObj(null, null);
105110 }
106111
112+
113+ // アニメーション停止ボタン押下
114+ onClickPauseAnimation(evt) {
115+ // DispObjとPalette要素にPauseAnimation css classを付与する
116+ window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
117+ window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
118+
119+ evt.target.innerText = ('Ⅱ' == evt.target.innerText) ? '>' : 'Ⅱ';
120+ }
107121 }
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 31)
@@ -79,6 +79,8 @@
7979 font-size: small;
8080 }
8181
82+
83+
8284 /* パレット要素の定義 */
8385 .palbg,
8486 .paltxtcol,
@@ -141,3 +143,20 @@
141143 0% { background-position:100% 100%}
142144 100% {background-position:0% 0%}
143145 }
146+
147+
148+ /* 制御用 ******************* */
149+ div.PauseAnimation,
150+ img.PauseAnimation {
151+ animation: none;
152+ }
153+
154+ #apparea:target img,
155+ #apparea:target div {
156+ animation: none;
157+ background-color:red;
158+ }
159+
160+
161+
162+
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 31)
@@ -20,6 +20,7 @@
2020 <button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
2121 <button type=button class="pal" data-objid="pal" data-palid="4" >button5</button>
2222 <a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
23+ <a href="#apparea">停止</a>
2324
2425 <!-- Palette -->
2526 <style id="stylepalbg">
@@ -180,7 +181,7 @@
180181 <br />
181182
182183 <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2" title="動きを設定するパレットです">
183- <legend class="pallegend"> Action Palette </legend>
184+ <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
184185 <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
185186 <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
186187 <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
--- HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 31)
@@ -51,13 +51,14 @@
5151 num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
5252 cssstr1, // CSS書き換え前半文字
5353 cssstr2, // CSS書き換え後半文字
54- file // 画像ファイルを指している file object
54+ file, // 画像ファイルを指している file object
55+ cbresult // 処理完了結果callback 引数：true/false ... 処理結果
5556 ) {
5657 // drop fileの読み込み
5758 let reader = new FileReader();
5859 // Image fileを読み込み (画像の幅・高さは取れない。Binary dataを memory上に読むだけなので)
5960 reader.readAsDataURL(file);
60- reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
61+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2, cbresult);
6162 };
6263 // Text fileを読み込み、その内容を対象CSSに設定
6364 function setTextFileToCSS(
@@ -65,20 +66,25 @@
6566 num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
6667 cssstr1, // CSS書き換え前半文字
6768 cssstr2, // CSS書き換え後半文字
68- file // CSS定義が1つだけ入った Textファイルを指している file object
69+ file, // CSS定義が1つだけ入った Textファイルを指している file object
70+ cbresult // 処理完了結果callback 引数：true/false ... 処理結果
6971 ) {
7072 // drop fileの読み込み
7173 let reader = new FileReader();
7274 // Text fileを読み込み
7375 reader.readAsText(file);
74- reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
76+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2, cbresult);
7577 };
76-function setFileToCSS( ele, num, cssstr1, cssstr2, evt ){
78+function setFileToCSS(ele, num, cssstr1, cssstr2, cbresult, evt) {
7779 let blob = evt.target.result;
7880 // blobの適用
7981 let csstext = String(cssstr1) + blob + String(cssstr2);
8082 ele.sheet.deleteRule(num);
8183 ele.sheet.insertRule(csstext, num);
84+
85+ if (null != cbresult) {
86+ cbresult(true);
87+ }
8288 };
8389
8490 // CSSに定義をセット
--- HtmlDrawApp/HTMLDrawApp/js/DisplayField.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/js/DisplayField.js (revision 31)
@@ -39,7 +39,7 @@
3939 let styleaction = document.getElementById('stylepalact');
4040 let cssbg = stylebg.sheet.cssText;
4141 let csstextcol = styletextcol.sheet.cssText;
42- let cssaction = getAnimationCssFromElement(styleaction);
42+ let cssaction = getAnimationCssFromElement(styleaction); // keyframe情報を取得するため、専用関数になっている
4343
4444 // 最終出力
4545 let savestr = '<style id="stylepalbg">' + cssbg + '</style><style id="stylepaltxtcol">' + csstextcol + '</style><style id="stylepalact">' + cssaction + '</style>' + displayInfo;
--- HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 31)
@@ -104,7 +104,14 @@
104104 }
105105 }
106106
107+ // 全ての要素に引数 CSS classを toggleでセット
108+ toggleClassToAllObj(classname) {
109+ for (let i = 0; i < this.ObjIDLen; i++) {
110+ this.ObjIDarray[i].DOMobject.classList.toggle(classname);
111+ }
112+ }
107113
114+
108115 // Command処理 ----------------------
109116 createDispObj(type, rect, opt) {
110117 this.debuglog("createDispObj");
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 31)
@@ -280,14 +280,18 @@
280280 function onClickPalButton(evt) {
281281 debuglog('【onClickPalButton' + evt.target.dataset.palid + '】');
282282 switch (parseInt(evt.target.dataset.palid)) {
283- case 0:
283+ case 0: // Delete (Elase) element
284284 removeFocusedObject();
285285 break;
286- case 1:
286+ case 1: // Save palette settings
287287 let data = window.CSSPalGroup.getPalGroupInfo(window.CSSPalGroup.typeBackground);
288288 break;
289289 case 2:
290- case 3:
290+ case 3: // Pouse animation
291+ // DispObjとPalette要素にPauseAnimation css classを付与する
292+ window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
293+ window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
294+ break;
291295 case 4:
292296 case 5:
293297 let color = parseInt(evt.target.dataset.value);
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 31)
@@ -66,7 +66,7 @@
6666 ) {
6767 let cssstr1 = '.palbg' + id + ' { background-image: url(';
6868 let cssstr2 = '); background-size: cover; }';
69- setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file);
69+ setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpalbg[id], file));
7070 }
7171
7272 // text color ('#000000, rgba(0,0,0,0) など)
@@ -76,7 +76,7 @@
7676 ) {
7777 let cssstr1 = '.paltxtcol' + id + ' {\ncolor: ';
7878 let cssstr2 = ';\n}';
79- setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
79+ setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
8080 };
8181 // 指定された画像を font colorとして設定する
8282 definepaltxtcolImage(
@@ -85,8 +85,20 @@
8585 ) {
8686 let cssstr1 = '.paltxtcol' + id + ' { background: url(';
8787 let cssstr2 = '); background-size: contain; color: #fff; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }';
88- setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
88+ setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
8989 };
90+ loadresult(ele, file, result) {
91+ if (true == result) {
92+ // file名をtooltipにセット
93+ let title = file.name.match(/^[\s\S]*\./);
94+ ele.title = (null != title) ? title[0] : '';
95+ return;
96+ }
97+ else {
98+ console.error('パレットへの drop file読み込み失敗 \npalette=' + ele.dataset.objid + ', file=' + file.name);
99+ return;
100+ }
101+ }
90102 // 指定された Text fileを CSS animation定義として保持する
91103 // Text fileには下記２つの定義が含まれていること
92104 // 1. 「animation:」で始まり　「;」で終わる animation定義
@@ -102,7 +114,7 @@
102114 let reader = new FileReader();
103115 // Text fileを読み込み
104116 reader.readAsText(file);
105- reader.onload = function (ele, num, cssstr1, cssstr2, evt) {
117+ reader.onload = function (ele, num, cssstr1, cssstr2, filename, evt) {
106118 let cssdata = evt.target.result; // 読み込んだ文字列
107119
108120 // 読み込んだ文字列を 「animation定義」と「keyframe定義」に分割
@@ -120,9 +132,19 @@
120132 // keyframe定義置き換え
121133 ele.sheet.deleteRule(defAnimNum + 1);
122134 ele.sheet.insertRule(cssKeyframe, defAnimNum + 1);
123- }.bind(this, this.styleact, id, cssstr1, cssstr2);
135+
136+ // file名をtooltipにセット
137+ let title = filename.match(/^[\s\S]*\./);
138+ this.DOMpalact[num].title = (null != title) ? title[0] : '';
139+ }.bind(this, this.styleact, id, cssstr1, cssstr2, file.name);
124140 };
125141
142+ // Action paletteの全要素に引数 CSS classを toggleでセット
143+ toggleClassToActionPalettes(classname) {
144+ for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
145+ this.DOMpalact[cnt].classList.toggle(classname);
146+ }
147+ }
126148
127149
128150 // 描画関数 ---------------------
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 30)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 31)
@@ -30,6 +30,9 @@
3030 this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3131 this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3232 }
33+
34+ this.DOMpauseanim = document.getElementById('btnpauseanim');
35+ this.DOMpauseanim.addEventListener('click', this.onClickPauseAnimation.bind(this));
3336 }
3437
3538 // 操作関数 ----------------------------
@@ -40,6 +43,8 @@
4043 let data = this.DOMobject[groupType].innerHTML;
4144 }
4245
46+
47+
4348 // 描画関数 ---------------------
4449
4550 render() {
@@ -104,4 +109,13 @@
104109 window.appArea.setMouseEventObj(null, null);
105110 }
106111
112+
113+ // アニメーション停止ボタン押下
114+ onClickPauseAnimation(evt) {
115+ // DispObjとPalette要素にPauseAnimation css classを付与する
116+ window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
117+ window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
118+
119+ evt.target.innerText = ('Ⅱ' == evt.target.innerText) ? '>' : 'Ⅱ';
120+ }
107121 }