wnw_show 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  module WnwShow
2
2
  module Rails
3
- VERSION = "0.0.1"
3
+ VERSION = "0.0.2"
4
4
  end
5
5
  end
@@ -21,7 +21,17 @@ var wnw;
21
21
  if (!wnw) wnw = {};
22
22
  if (!wnw.list) wnw.list = {};
23
23
  (function(){
24
- //定数
24
+ var assetPath = function(name) {
25
+ // for wnw rails environment
26
+ return "<%= asset_path('wnw_show/list/" + name + "') %>";
27
+ // for local test
28
+ //return "/wnw_show/vendor/assets/images/wnw_show/list/" + name;
29
+ };
30
+
31
+ // -------------------------------------
32
+ // 定数
33
+ // -------------------------------------
34
+
25
35
  var LEFT_MARGIN = 50; //左のマージン
26
36
  var TOP_MARGIN = 200; //上のマージン
27
37
  var Y_SPAN = 300; //写真の縦の間隔
@@ -35,17 +45,26 @@ if (!wnw.list) wnw.list = {};
35
45
  var PIN_DEL_X_SPAN = -100;//ピンが消えるときに移動するX方向の幅
36
46
  var ADD_IMAGE_RANGE_X = 1000;//画像が追加されるときのX座標の範囲
37
47
  var ADD_IMAGE_RANGE_Y = 0;//画像が追加されるときのY座標の範囲
38
- var ZOOM_TIME = 100;//画像が拡大する時の時間[ms]
48
+ var ZOOM_TIME = 300;//画像が拡大する時の時間[ms]
39
49
  var PIN_IMAGE_PREFIX = "/images/pin-";//ピン画像の接頭辞
40
50
  var PIN_IMAGE_SURFIX = ".png"; //ピン画像の接尾辞
41
51
  var SOUND_FILE = "/sounds/SoundUnit.swf";//ピンが抜ける音
42
52
  var SOUND_CODEBASE = "/sounds/swflash.cab";//音の再生
43
- var SEITON_BTN_IMAGE = "<%= asset_path('wnw_show/list/seiton.png') %>";//整頓ボタン画像
44
- var DELETE_BTN_IMAGE = "<%= asset_path('wnw_show/list/delete.png') %>";//削除ボタン画像
45
- var BACKGROUND_IMAGE = "<%= asset_path('wnw_show/list/bord.jpg') %>";//背景画像
46
- var LOADING_IMAGE = "<%= asset_path('wnw_show/list/loading.gif') %>";//ロード中画像
53
+ var SEITON_BTN_IMAGE = assetPath('seiton.png');//整頓ボタン画像
54
+ var DELETE_BTN_IMAGE = assetPath('delete.png');//削除ボタン画像
55
+ var BACKGROUND_IMAGE = assetPath('bord.jpg');//背景画像
56
+ var LOADING_IMAGE = assetPath('loading.gif');//ロード中画像
47
57
  var DRAG_DISTANCE = 10 ;//これ以上座標を動かすとドラックとみなす
48
- //変数
58
+ var Z_INDEX_LOGO = 0;
59
+ var Z_INDEX_MESSAGE = 0;
60
+ var Z_INDEX_BUTTON = 1000;
61
+ var Z_INDEX_ZOOM = 1001;
62
+ var Z_INDEX_NEXT_PREV = 1002;
63
+ var NEXT_BUTTON_ID = "nextButton";
64
+ var PREV_BUTTON_ID = "prevButton";
65
+ // -------------------------------------
66
+ // 変数
67
+ // -------------------------------------
49
68
  var gZIndexMax = 2;//現在画面で表示されている中で最大のz-Index
50
69
  var gPinList = [];//ピンのjqueryオブジェクトのリスト
51
70
  var gImgList = [];//画像のjqueryオブジェクトのリスト
@@ -54,21 +73,27 @@ if (!wnw.list) wnw.list = {};
54
73
  var gZoomImgId = -1;//現在zoom中の画像のID
55
74
  var gNowDragging = false;//現在ドラッグ中かどうか
56
75
  var gContextPath;//このスクリプトが呼ばれるURLコンテキストパス
76
+
77
+ // -------------------------------------
78
+ // 関数
79
+ // -------------------------------------
80
+
81
+ // ピンの画像のURLをランダムで返す
57
82
  var getPinImgPath = function() {
58
83
  var imgPaths = [
59
- "<%= asset_path('wnw_show/list/pin-0.png') %>",
60
- "<%= asset_path('wnw_show/list/pin-1.png') %>",
61
- "<%= asset_path('wnw_show/list/pin-2.png') %>",
62
- "<%= asset_path('wnw_show/list/pin-3.png') %>",
63
- "<%= asset_path('wnw_show/list/pin-4.png') %>",
64
- "<%= asset_path('wnw_show/list/pin-5.png') %>",
65
- "<%= asset_path('wnw_show/list/pin-6.png') %>",
66
- "<%= asset_path('wnw_show/list/pin-7.png') %>",
67
- "<%= asset_path('wnw_show/list/pin-8.png') %>",
68
- "<%= asset_path('wnw_show/list/pin-9.png') %>",
84
+ assetPath('pin-0.png'),
85
+ assetPath('pin-1.png'),
86
+ assetPath('pin-2.png'),
87
+ assetPath('pin-3.png'),
88
+ assetPath('pin-4.png'),
89
+ assetPath('pin-5.png'),
90
+ assetPath('pin-6.png'),
91
+ assetPath('pin-7.png'),
92
+ assetPath('pin-8.png'),
93
+ assetPath('pin-9.png')
69
94
  ];
70
- return imgPaths[Math.floor(Math.random() * 9)]
71
- }
95
+ return imgPaths[Math.floor(Math.random() * 9)];
96
+ };
72
97
 
73
98
  // [0,x] の間の乱数を整数で返す
74
99
  function rand1(x){
@@ -85,128 +110,6 @@ if (!wnw.list) wnw.list = {};
85
110
  div.innerHTML = innerHTML;
86
111
  }
87
112
 
88
- // 画面を表示する
89
- // @param
90
- // imgUrlList : 画像のURLのリスト
91
- // msg : 画面上部に表示されるメッセージ
92
- // logoUrl : ロゴのURL
93
- // contextPath : ロードするhtmlのコンテキストパス
94
- function display(imgUrlList,msg,logoUrl,contextPath){
95
- gContextPath = contextPath;
96
- gMessage = msg;
97
-
98
- //背景
99
- $("body").css("background","url(" + BACKGROUND_IMAGE+ ")")
100
- .append($("<div/>").attr("id","bord"))
101
- .append($("<div/>").attr("id","SoundUnit"));
102
- //loading
103
- var loading = $("<div/>")
104
- .attr("id","loading")
105
- .css({"border-radius":"10px",
106
- "border" : "solid",
107
- "width" : "300" ,
108
- "height" : "50",
109
- "background-color" : "#ffffff",
110
- "border-color" : "#ffffff",
111
- "z-index" : "100",
112
- "margin" : "0 auto",
113
- "padding" : "10",
114
- "opacity" : "0.8"})
115
- .html("<center><font size=5>Now Loading...<span id=loadno></span></font><img src=" + LOADING_IMAGE + "></center>");
116
-
117
- // ロゴ
118
- $("#bord").append(
119
- $("<img />")
120
- .attr("src",logoUrl)
121
- .css({
122
- "position" : "absolute",
123
- "top":0,
124
- "left":LEFT_MARGIN,
125
- "width":200,
126
- "height":200,
127
- "z-index":30
128
- }));
129
-
130
- //文字
131
- $("body").append(
132
- $("<div />")
133
- .html(gMessage)
134
- .css({
135
- "color":"#FFFFFF",
136
- "text-shadow": "0px 0px 10px gray",
137
- "top":35,
138
- "left":250,
139
- "font-size":40,
140
- // "font-weight": "bold",
141
- "width":1000,
142
- "opacity": 1,
143
- "position":"absolute",
144
- "z-index":255,
145
- "font-family": "wnw_list_font",
146
- "padding":10
147
- }));
148
-
149
-
150
- // 写真
151
- gImgUrlList = imgUrlList;
152
- viewNextImage();
153
-
154
- };
155
-
156
- // 次の画像の位置を計算して、viewImageを呼び出す。
157
- function viewNextImage(){
158
- if(gImgList.length == gImgUrlList.length){
159
- //次はない
160
-
161
- //削除ボタン箱
162
- $("#bord").append(
163
- $("<img/>")
164
- .attr("id","gomi")
165
- .attr("src", DELETE_BTN_IMAGE)
166
- .css({"position":"absolute" , "top":10 , "left":1000 , "z-index" :1000})
167
- .click(function(){alert("削除したい写真をここにドロップしてください");})
168
- .droppable({
169
- drop: function(e,ui) {
170
- if (confirm("メッセージを削除しますか?")){
171
- var img = $("#" + ui.draggable.attr("id"));
172
- // call delete api
173
- var url = img.attr('msg_id');
174
- $.ajax({type: "delete",url: url});
175
- img.css({"display":"none"});
176
-
177
- }
178
- },
179
- tolerance: "pointer"
180
- }));
181
-
182
- //整頓ボタン
183
- $("#bord").append(
184
- $("<img/>")
185
- .attr("src", SEITON_BTN_IMAGE)
186
- .css({
187
- "position":"absolute" ,
188
- "top":10 ,
189
- "left":800 ,
190
- "z-index" :1000 })
191
- .click(reset));
192
- }else{
193
- var no = gImgList.length;
194
- var url = gImgUrlList[no];
195
- //位置計算
196
- var top = TOP_MARGIN + Math.floor(no / ROW_NO ) * Y_SPAN;
197
- if(no % ROW_NO == 0){ //1列目
198
- var left = LEFT_MARGIN;
199
- }else{
200
- leftside = gImgList[no - 1];
201
- var left = leftside.offset().left + leftside.width();
202
- }
203
- top += rand1(SQEW_SPAN);
204
- left += rand1(SQEW_SPAN);
205
- var zIndex = rand1(gZIndexMax);
206
- viewImage(url,top,left,zIndex,top,left,viewNextImage);
207
- }
208
- };
209
-
210
113
  // 画像を表示する
211
114
  //
212
115
  // @param
@@ -222,6 +125,9 @@ if (!wnw.list) wnw.list = {};
222
125
  var img = $("<img />")
223
126
  .addClass("photo")
224
127
  .attr("id","img"+no)
128
+ .attr("no", no)
129
+ .attr("nextId", "img"+ (no+1))
130
+ .attr("prevId", "img"+ (no-1))
225
131
  .attr("src",url)
226
132
  .attr("orgTop",orgtop)
227
133
  .attr("orgLeft",orgleft)
@@ -244,45 +150,12 @@ if (!wnw.list) wnw.list = {};
244
150
  // Zoom
245
151
  if(gZoomImgId == -1 ){
246
152
  //Zoomしていない時はZoom
247
- if($(window).width() > $(window).height()){
248
- var ratio = 1.0 * $(window).height() / $(this).height();
249
- var zLeft = $("body").scrollLeft() + $(window).width()/2
250
- - $(this).width()
251
- * ( $(window).height() / $(this).height() )
252
- / 2 ;
253
- var zTop = $("body").scrollTop();
254
- }else{
255
- var ratio = 1.0 * $(window).width() / $(this).width();
256
- var zTop = $("body").scrollTop() + $(window).height()/2
257
- - $(this).height()
258
- * ( $(window).width() / $(this).width() )
259
- / 2 ;
260
- var zLeft = $("body").scrollLeft();
261
- }
262
- $(this)
263
- .attr("beforeLeft",$(this).offset().left)
264
- .attr("beforeTop",$(this).offset().top)
265
- .attr("beforeZIndex",$(this).css("z-index"))
266
- .animate({"display":"block",
267
- "position" : "absolute",
268
- "top": zTop,
269
- "left": zLeft,
270
- "height" : $(this).naturalHeight() * ratio,
271
- "width" : $(this).naturalWidth() * ratio,
272
- "z-index": gZIndexMax + 1
273
- },ZOOM_TIME);
274
- gZoomImgId=$(this).attr("id");
153
+ zoom($(this).attr("id"));
275
154
  }else{
276
155
  //Zoom中は元の位置に戻す
277
- zoomImg=$("#" + gZoomImgId);
278
- zoomImg.animate({
279
- "height" : zoomImg.naturalHeight(),
280
- "width" : zoomImg.naturalWidth(),
281
- "left" : zoomImg.attr("beforeLeft"),
282
- "top" : zoomImg.attr("beforeTop"),
283
- "z-index" : zoomImg.attr("beforeZIndex")
284
- },ZOOM_TIME);
285
- gZoomImgId = -1;
156
+ unzoom(gZoomImgId);
157
+ $("#" + NEXT_BUTTON_ID).hide();
158
+ $("#" + PREV_BUTTON_ID).hide();
286
159
  };
287
160
  };
288
161
  })
@@ -337,17 +210,92 @@ if (!wnw.list) wnw.list = {};
337
210
  //callback
338
211
  callback();
339
212
  });
340
-
341
213
  $("#bord").append(img);
342
214
  gImgList.push(img);
343
215
 
344
216
  };
345
217
 
218
+ // 画像をズームする
219
+ // @param
220
+ // id : 画像のID
221
+ function zoom(id){
222
+ if(gZoomImgId == -1){
223
+ console.log("zoom:" + id);
224
+ gZoomImgId = id;
225
+ var _img = $("#"+ id);
226
+ //ズームボタン
227
+ $("#" + NEXT_BUTTON_ID).css({
228
+ "top":$("body").scrollTop() + $(window).height()/2,
229
+ "left":$("body").scrollLeft() + $(window).width() - $("#" + NEXT_BUTTON_ID).width()
230
+ });
231
+ $("#" + PREV_BUTTON_ID).css({
232
+ "top":$("body").scrollTop() + $(window).height()/2,
233
+ "left":$("body").scrollLeft()
234
+ });
235
+ if(_img.attr("no") == 0 ){
236
+ $("#" + NEXT_BUTTON_ID).show();
237
+ $("#" + PREV_BUTTON_ID).hide();
238
+ }else if(_img.attr("no") == gImgUrlList.length - 1){
239
+ $("#" + NEXT_BUTTON_ID).hide();
240
+ $("#" + PREV_BUTTON_ID).show();
241
+ }else{
242
+ $("#" + NEXT_BUTTON_ID).show();
243
+ $("#" + PREV_BUTTON_ID).show();
244
+ }
245
+ //画像
246
+ if($(window).width() > $(window).height()){//横長
247
+ var ratio = 1.0 * $(window).height() / _img.height();
248
+ var zLeft = $("body").scrollLeft() + $(window).width()/2
249
+ - _img.width()
250
+ * ( $(window).height() / _img.height() )
251
+ / 2 ;
252
+ var zTop = $("body").scrollTop();
253
+ }else{//縦長
254
+ var ratio = 1.0 * $(window).width() / _img.width();
255
+ var zTop = $("body").scrollTop() + $(window).height()/2
256
+ - _img.height()
257
+ * ( $(window).width() / _img.width() )
258
+ / 2 ;
259
+ var zLeft = $("body").scrollLeft();
260
+ }
261
+ _img.attr("beforeLeft",_img.offset().left)
262
+ .attr("beforeTop",_img.offset().top)
263
+ .attr("beforeZIndex",_img.css("z-index"));
264
+ _img.css({"z-index": Z_INDEX_ZOOM});
265
+ _img.animate({"display":"block",
266
+ "position" : "absolute",
267
+ "top": zTop,
268
+ "left": zLeft,
269
+ "height" : _img.naturalHeight() * ratio,
270
+ "width" : _img.naturalWidth() * ratio
271
+ },ZOOM_TIME);
272
+ }
273
+ };
274
+
275
+ // 画像のズームを解除する
276
+ // @param
277
+ // id : 画像のID
278
+ function unzoom(id){
279
+ if(gZoomImgId != -1){
280
+ console.log("unzoom" + id);
281
+ gZoomImgId = -1;
282
+ var _img=$("#" + id);
283
+ _img.animate({
284
+ "height" : _img.naturalHeight(),
285
+ "width" : _img.naturalWidth(),
286
+ "left" : _img.attr("beforeLeft"),
287
+ "top" : _img.attr("beforeTop"),
288
+ "z-index" : _img.attr("beforeZIndex")
289
+ },ZOOM_TIME);
290
+ }
291
+ }
292
+
346
293
  //画像を追加する
347
294
  // @param
348
295
  // url : 画像のurl
349
296
  function addImage(url){
350
297
  //整列後の位置を先に計算
298
+ gImgUrlList.push(url);
351
299
  var no = gImgList.length;
352
300
  var orgtop = TOP_MARGIN + Math.floor(no / ROW_NO ) * Y_SPAN;
353
301
  if(no % ROW_NO == 0){ //1列目
@@ -363,7 +311,7 @@ if (!wnw.list) wnw.list = {};
363
311
  viewImage(url, rand1(ADD_IMAGE_RANGE_Y),rand1(ADD_IMAGE_RANGE_X),gZIndexMax,orgtop,orgleft,function(){});
364
312
  };
365
313
 
366
- //画像を整頓する
314
+ // 画像を整頓する
367
315
  function reset(){
368
316
  for(i = 0 ; i < gImgList.length ; i = i + 1){
369
317
  gImgList[i].animate({
@@ -378,6 +326,183 @@ if (!wnw.list) wnw.list = {};
378
326
  },500);
379
327
  }
380
328
  };
329
+
330
+ // -------------------------------------
331
+ // メイン処理
332
+ // -------------------------------------
333
+
334
+ // step1. 背景、ロゴ、メッセージを描画する
335
+ // @param
336
+ // imgUrlList : 画像のURLのリスト
337
+ // msg : 画面上部に表示されるメッセージ
338
+ // logoUrl : ロゴのURL
339
+ // contextPath : ロードするhtmlのコンテキストパス
340
+ function display(imgUrlList,msg,logoUrl,contextPath){
341
+ gContextPath = contextPath;
342
+ gMessage = msg;
343
+
344
+ //背景
345
+ $("body").css("background","url(" + BACKGROUND_IMAGE+ ")")
346
+ .append($("<div/>").attr("id","bord"))
347
+ .append($("<div/>").attr("id","SoundUnit"));
348
+ //loading
349
+ // var loading = $("<div// />")
350
+ // .attr("id","loading")
351
+ // .css({"border-radius":"10px",
352
+ // "border" : "solid",
353
+ // "width" : "300" ,
354
+ // "height" : "50",
355
+ // "background-color" : "#ffffff",
356
+ // "border-color" : "#ffffff",
357
+ // "z-index" : "100",
358
+ // "margin" : "0 auto",
359
+ // "padding" : "10",
360
+ // "opacity" : "0.8"})
361
+ // .html("<center><font size=5>Now Loading...<span id=loadno></span></font><img src=" + LOADING_IMAGE + "></center>");
362
+
363
+ // ロゴ
364
+ $("#bord").append(
365
+ $("<img />")
366
+ .attr("src",logoUrl)
367
+ .css({
368
+ "position" : "absolute",
369
+ "top":0,
370
+ "left":LEFT_MARGIN,
371
+ "width":200,
372
+ "height":200,
373
+ "z-index":Z_INDEX_LOGO
374
+ }));
375
+
376
+ //文字
377
+ $("body").append(
378
+ $("<div />")
379
+ .html(gMessage)
380
+ .css({
381
+ "color":"#FFFFFF",
382
+ "text-shadow": "0px 0px 10px gray",
383
+ "top":35,
384
+ "left":250,
385
+ "font-size":40,
386
+ // "font-weight": "bold",
387
+ "width":1000,
388
+ "opacity": 1,
389
+ "position":"absolute",
390
+ "z-index":Z_INDEX_MESSAGE,
391
+ "font-family": "wnw_list_font",
392
+ "padding":10
393
+ }));
394
+
395
+ // 写真
396
+ gImgUrlList = imgUrlList;
397
+ viewNextImage();
398
+
399
+ };
400
+
401
+ // step2. 写真をダウンロードでき次第描画する
402
+ //
403
+ // 次の画像の位置を計算して、viewImageを呼び出す。
404
+ // viewImageで画像の描画が終わったら、コールバックでこの関数を呼び出すので、
405
+ // 画像がなくなるまでこの関数を繰り返すことになる。
406
+ // 画像がなくなったらfinishViewImage()を呼ぶ。
407
+ function viewNextImage(){
408
+ if(gImgList.length != gImgUrlList.length){
409
+ var no = gImgList.length;
410
+ var url = gImgUrlList[no];
411
+ //位置計算
412
+ var top = TOP_MARGIN + Math.floor(no / ROW_NO ) * Y_SPAN;
413
+ if(no % ROW_NO == 0){ //1列目
414
+ var left = LEFT_MARGIN;
415
+ }else{
416
+ leftside = gImgList[no - 1];
417
+ var left = leftside.offset().left + leftside.width();
418
+ }
419
+ top += rand1(SQEW_SPAN);
420
+ left += rand1(SQEW_SPAN);
421
+ var zIndex = rand1(gZIndexMax);
422
+ viewImage(url,top,left,zIndex,top,left,viewNextImage);
423
+ }else{
424
+ displayButtons();
425
+ }
426
+ };
427
+
428
+
429
+ // step3. 各種ボタンを表示
430
+ function displayButtons(){
431
+ //次の画像ボタン
432
+ $("body").append(
433
+ $("<img/>")
434
+ .attr("id",NEXT_BUTTON_ID)
435
+ .attr("src",assetPath('next.png'))
436
+ .click(function(){
437
+ var _id = $("#" + gZoomImgId).attr("nextId");
438
+ console.log("nextZoom:" + gZoomImgId + "->" + _id);
439
+ unzoom(gZoomImgId);
440
+ zoom(_id);
441
+ })
442
+ .css({
443
+ "position":"absolute" ,
444
+ "opacity":0.5,
445
+ "z-index" :Z_INDEX_NEXT_PREV,
446
+ "display":"none"})
447
+
448
+ );
449
+
450
+ //前の画像ボタン
451
+ $("body").append(
452
+ $("<img/>")
453
+ .attr("id",PREV_BUTTON_ID)
454
+ .attr("src",assetPath('prev.png'))
455
+ .click(function(){
456
+ var _id = $("#" + gZoomImgId).attr("prevId");
457
+ console.log("nextZoom:" + gZoomImgId + "->" + _id);
458
+ unzoom(gZoomImgId);
459
+ zoom(_id);
460
+ })
461
+ .css({
462
+ "position":"absolute" ,
463
+ "opacity":0.5,
464
+ "z-index" :Z_INDEX_NEXT_PREV,
465
+ "display":"none"})
466
+
467
+ );
468
+
469
+ //削除ボタン箱
470
+ $("#bord").append(
471
+ $("<img/>")
472
+ .attr("id","gomi")
473
+ .attr("src", DELETE_BTN_IMAGE)
474
+ .css({"position":"absolute" ,
475
+ "top":10 ,
476
+ "left":1000 ,
477
+ "z-index" :Z_INDEX_BUTTON})
478
+ .click(function(){alert("削除したい写真をここにドロップしてください");})
479
+ .droppable({
480
+ drop: function(e,ui) {
481
+ if (confirm("メッセージを削除しますか?")){
482
+ var img = $("#" + ui.draggable.attr("id"));
483
+ // call delete api
484
+ var url = img.attr('msg_id');
485
+ $.ajax({type: "delete",url: url});
486
+ img.css({"display":"none"});
487
+
488
+ }
489
+ },
490
+ tolerance: "pointer"
491
+ }));
492
+
493
+ //整頓ボタン
494
+ $("#bord").append(
495
+ $("<img/>")
496
+ .attr("src", SEITON_BTN_IMAGE)
497
+ .css({
498
+ "position":"absolute" ,
499
+ "top":10 ,
500
+ "left":800 ,
501
+ "z-index" :Z_INDEX_BUTTON })
502
+ .click(reset));
503
+
504
+ };
505
+
381
506
  //publicフィールド・関数定義
382
507
  wnw.list.display = display;
383
508
  wnw.list.addImage = addImage;