wnw_show 1.1.1 → 1.1.2

data/lib/wnw_show/rails/version.rb

@@ -1,5 +1,5 @@
 module WnwShow
   module Rails
-    VERSION = "1.1.1"
+    VERSION = "1.1.2"
   end
 end

data/sample/list.html

@@ -6,7 +6,7 @@
     <TITLE>WeddinNow List Sample</TITLE>
     <script type=text/javascript src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
     <script type=text/javascript src="js/jquery-ui-1.8.18.custom.min.js"></script>
-    <script type=text/javascript src="../javascripts/wnw_show/list.js.erb"></script>
+    <script type=text/javascript src="../vendor/assets/javascripts/wnw_show/list.js.erb"></script>
     <script type=text/javascript>
     function init(){
       //画像のリスト
@@ -23,6 +23,10 @@
       // 例) "/js/vendor/wnw_list"
       var contextPath = "/wnw_list"
 
+      wnw.list.assetPath = function(name) {
+        return "/wnw_show/vendor/assets/images/wnw_show/list/" + name;
+      };
+
       //呼び出し
       wnw.list.display(imageUrlList,message,logoUrl,contextPath);
     };

data/vendor/assets/javascripts/wnw_show/list.js.erb

@@ -31,52 +31,56 @@ if (!wnw.list) wnw.list = {};
     // -------------------------------------
     // 定数
     // -------------------------------------
-    var IMAGE_RATIO = 0.6; //画像の拡大サイズ
     var LEFT_MARGIN = 50; //左のマージン
     var TOP_MARGIN = 200; //上のマージン
-    var Y_SPAN = 250; //写真の縦の間隔
-    var ROW_NO = 4; //写真の列数
-    var SQEW_SPAN = 30; //写真の配置のゆがみ
-    var ROTATE_DEGREE = 2; //画像の傾き角度の最大値
-    var PHOTO_DEL_Y = 500;//画像が消えるときに移動するY方向
-    var PHOTO_DEL_X_SPAN = 100;//画像が消えるときに移動するX方向の幅
-
+    var BACKGROUND_IMAGE = 'bord.jpg';//背景画像
+    //画像
+    var MSG_RATIO = 0.6; //画像の拡大サイズ
+    var MSG_Y_SPAN = 250; //写真の縦の間隔
+    var MSG_ROW_NO = 4; //写真の列数
+    var MSG_SPAN_SQEW = 30; //写真の配置のゆがみ
+    var MSG_ROTATE_MAX = 2; //画像の傾き角度の最大値
+    var MSG_DEL_Y = 500; //画像が消えるときに移動するY方向
+    var MSG_DEL_X_SPAN = 100; //画像が消えるときに移動するX方向の幅
+    var MSG_DRAG_DISTANCE = 10 ;//これ以上座標を動かすとドラックとみなす
+    //ピン
     var PIN_TOP = -10; //ピンが写真のトップからx方向にどれだけずれているか
     var PIN_DEL_Y = -200;//ピンが消えるときに移動するY方向
     var PIN_DEL_X_SPAN = -100;//ピンが消えるときに移動するX方向の幅
     var PIN_WIDTH = 20; //ピンの横幅
     var PIN_IMAGE_PREFIX = "/images/pin-";//ピン画像の接頭辞
     var PIN_IMAGE_SURFIX = ".png"; //ピン画像の接尾辞
-
+    //画像追加
     var ADD_IMAGE_RANGE_X = 1000;//画像が追加されるときのX座標の範囲
     var ADD_IMAGE_RANGE_Y = 0;//画像が追加されるときのY座標の範囲
-    var ZOOM_TIME = 300;//画像が拡大する時の時間[ms]
-    var SOUND_FILE = "/sounds/SoundUnit.swf";//ピンが抜ける音
-    var SOUND_CODEBASE = "/sounds/swflash.cab";//音の再生
-    var SEITON_BTN_IMAGE = assetPath('seiton.png');//整頓ボタン画像
+    //整頓
+    var SEITON_BTN_IMAGE = 'seiton.png';//整頓ボタン画像
     var SEITON_LEFT = 1000;//整頓ボタン画像
     var SEITON_TOP = 20;//整頓ボタン画像
-    //    var DELETE_BTN_IMAGE =  assetPath('delete.png');//削除ボタン画像
-    var BACKGROUND_IMAGE = assetPath('bord.jpg');//背景画像
-    var LOADING_IMAGE = assetPath('loading.gif');//ロード中画像
-    var DRAG_DISTANCE = 10 ;//これ以上座標を動かすとドラックとみなす
-    var MOJI_Z_INDEX = 0;
-    var Z_INDEX_BUTTON = 1000;
-    var Z_INDEX_ZOOM = 1001;
+    var BUTTON_Z_INDEX = 1000;
+    //ズーム
+    var ZOOM_Z_INDEX = 1001;
+    var ZOOM_TIME = 300;//画像が拡大する時の時間[ms]
+    //画像前後ボタン
     var Z_INDEX_NEXT_PREV = 1002;
     var NEXT_BUTTON_ID = "nextButton";
     var PREV_BUTTON_ID = "prevButton";
     // ロゴ
-    var LOGO_WIDTH = 140;
     //var LOGO_HEIGHT = 150;
+    var LOGO_WIDTH = 140;
     var LOGO_LEFT = 50;
     var LOGO_TOP = 30;
     var LOGO_Z_INDEX = 0;
     // 文字
+    var MOJI_Z_INDEX = 0;
     var MOJI_TOP  = 35;
     var MOJI_LEFT = 200;
     var MOJI_SIZE = 40;
     var MOJI_WIDTH= 1000;
+    //var SOUND_FILE = "/sounds/SoundUnit.swf";//ピンが抜ける音
+    //var SOUND_CODEBASE = "/sounds/swflash.cab";//音の再生
+    //var DELETE_BTN_IMAGE =  assetPath('delete.png');//削除ボタン画像
+    //var LOADING_IMAGE = 'loading.gif';//ロード中画像
 
     // -------------------------------------
     // 変数
@@ -96,18 +100,18 @@ if (!wnw.list) wnw.list = {};
 
     // ピンの画像のURLをランダムで返す
     var getPinImgPath = function() {
-      var imgPaths = [
-        assetPath('pin-0.png'),
-        assetPath('pin-1.png'),
-        assetPath('pin-2.png'),
-        assetPath('pin-3.png'),
-        assetPath('pin-4.png'),
-        assetPath('pin-5.png'),
-        assetPath('pin-6.png'),
-        assetPath('pin-7.png'),
-        assetPath('pin-8.png'),
-        assetPath('pin-9.png')
-      ];
+        var imgPaths = [
+            wnw.list.assetPath('pin-0.png'),
+            wnw.list.assetPath('pin-1.png'),
+            wnw.list.assetPath('pin-2.png'),
+            wnw.list.assetPath('pin-3.png'),
+            wnw.list.assetPath('pin-4.png'),
+            wnw.list.assetPath('pin-5.png'),
+            wnw.list.assetPath('pin-6.png'),
+            wnw.list.assetPath('pin-7.png'),
+            wnw.list.assetPath('pin-8.png'),
+            wnw.list.assetPath('pin-9.png')
+        ];
         return imgPaths[Math.floor(Math.random() * 9)];
     };
 
@@ -120,11 +124,11 @@ if (!wnw.list) wnw.list = {};
         return Math.floor(Math.random() * x * 2 - x);
     }
     //音を出す
-    function playSound(){
-	    var div = document.getElementById("SoundUnit");
-	    var innerHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=' + gContextPath + SOUND_CODEBASE + ' width="0" height="0" id="SoundUnit"><param name="movie" value="' + gContextPath + SOUND_FILE + '" /><embed loop=false src="' + gContextPath + SOUND_FILE + '" width="0" height="0" name="SoundUnit" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
-	    div.innerHTML = innerHTML;
-    }
+    // function playSound(){
+	//     var div = document.getElementById("SoundUnit");
+	//     var innerHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=' + gContextPath + SOUND_CODEBASE + ' width="0" height="0" id="SoundUnit"><param name="movie" value="' + gContextPath + SOUND_FILE + '" /><embed loop=false src="' + gContextPath + SOUND_FILE + '" width="0" height="0" name="SoundUnit" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
+	//     div.innerHTML = innerHTML;
+    // }
 
     // 画像を表示する
     //
@@ -142,8 +146,8 @@ if (!wnw.list) wnw.list = {};
             .addClass("photo")
             .attr("id","img"+no)
             .attr("no", no)
-            .attr("nextId", "img"+ (no+1))
-            .attr("prevId", "img"+ (no-1))
+            .attr("next", no+1)
+            .attr("prev", no-1)
             .attr("src",url)
             .attr("orgTop",orgtop)
             .attr("orgLeft",orgleft)
@@ -158,8 +162,8 @@ if (!wnw.list) wnw.list = {};
                   "left":left,
                   "z-index":zIndex,
                   "opacity":0,
-                  "-webkit-transform": "rotate(" +  rand2(ROTATE_DEGREE) + "deg)",
-                  "-moz-transform": "rotate(" + rand2(ROTATE_DEGREE) + "deg)"})
+                  "-webkit-transform": "rotate(" +  rand2(MSG_ROTATE_MAX) + "deg)",
+                  "-moz-transform": "rotate(" + rand2(MSG_ROTATE_MAX) + "deg)"})
             .click(function(){
                 if (gNowDragging){
                     //ドラッグの場合はzoomしない
@@ -178,7 +182,7 @@ if (!wnw.list) wnw.list = {};
                 };
             })
             .draggable({
-                distance : DRAG_DISTANCE,
+                distance : MSG_DRAG_DISTANCE,
                 start: function(e,ui){
                     gNowDragging = true;
                     // move photo
@@ -196,10 +200,10 @@ if (!wnw.list) wnw.list = {};
                 }
             })
             .load(function(){
-                $(this).width($(this).naturalWidth() * IMAGE_RATIO);
-                $(this).height($(this).naturalHeight() * IMAGE_RATIO);
-                $(this).attr("orgWidth",$(this).naturalWidth() * IMAGE_RATIO);
-                $(this).attr("orgHeight",$(this).naturalHeight() * IMAGE_RATIO);
+                $(this).width($(this).naturalWidth() * MSG_RATIO);
+                $(this).height($(this).naturalHeight() * MSG_RATIO);
+                $(this).attr("orgWidth",$(this).naturalWidth() * MSG_RATIO);
+                $(this).attr("orgHeight",$(this).naturalHeight() * MSG_RATIO);
                 $(this).css({"opacity":1});
                 //pin
                 var pin=$("<img />")
@@ -225,8 +229,8 @@ if (!wnw.list) wnw.list = {};
                                              "opacity":0});
                             // drop image animation
                             var photo = $("#" +$(this).attr('img_id'));
-                            photo.animate({"top":photo.offset().top + PHOTO_DEL_Y ,
-                                           "left":photo.offset().left + rand2(PHOTO_DEL_X_SPAN),
+                            photo.animate({"top":photo.offset().top + MSG_DEL_Y ,
+                                           "left":photo.offset().left + rand2(MSG_DEL_X_SPAN),
                                            "opacity":0});
                         });
                 $("#bord").append(pin);
@@ -256,16 +260,8 @@ if (!wnw.list) wnw.list = {};
                 "top":$("body").scrollTop() + $(window).height()/2,
                 "left":$("body").scrollLeft()
             });
-            if(_img.attr("no") == 0 ){
-                $("#" + NEXT_BUTTON_ID).show();
-                $("#" + PREV_BUTTON_ID).hide();
-            }else if(_img.attr("no") == gImgUrlList.length - 1){
-                $("#" + NEXT_BUTTON_ID).hide();
-                $("#" + PREV_BUTTON_ID).show();
-            }else{
-                $("#" + NEXT_BUTTON_ID).show();
-                $("#" + PREV_BUTTON_ID).show();
-            }
+            $("#" + NEXT_BUTTON_ID).show();
+            $("#" + PREV_BUTTON_ID).show();
             //画像
             if($(window).width() > $(window).height()){//横長
                 var ratio = 1.0 *  $(window).height() / _img.height();
@@ -285,7 +281,7 @@ if (!wnw.list) wnw.list = {};
             _img.attr("orgLeft",_img.offset().left)
                 .attr("orgTop",_img.offset().top)
                 .attr("orgZIndex",_img.css("z-index"));
-            _img.css({"z-index": Z_INDEX_ZOOM});
+            _img.css({"z-index": ZOOM_Z_INDEX});
             _img.animate({"display":"block",
                           "position" : "absolute",
                           "top": zTop,
@@ -321,15 +317,15 @@ if (!wnw.list) wnw.list = {};
         //整列後の位置を先に計算
         gImgUrlList.push(url);
         var no = gImgList.length;
-        var orgtop = TOP_MARGIN + Math.floor(no / ROW_NO ) * Y_SPAN;
-        if(no % ROW_NO == 0){ //１列目
+        var orgtop = TOP_MARGIN + Math.floor(no / MSG_ROW_NO ) * MSG_Y_SPAN;
+        if(no % MSG_ROW_NO == 0){ //１列目
             var orgleft = LEFT_MARGIN;
         }else{
             leftside = gImgList[no - 1];
             var orgleft = leftside.offset().left + leftside.width();
         }
-        orgtop += rand1(SQEW_SPAN) - SQEW_SPAN/2;
-        orgleft += rand1(SQEW_SPAN) - SQEW_SPAN/2;
+        orgtop += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/2;
+        orgleft += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/2;
         //実際に表示するのはランダムな位置
         gZIndexMax += 1;
         viewImage(url, rand1(ADD_IMAGE_RANGE_Y),rand1(ADD_IMAGE_RANGE_X),gZIndexMax,orgtop,orgleft,function(){});
@@ -366,7 +362,7 @@ if (!wnw.list) wnw.list = {};
         gMessage = msg;
 
         //背景
-        $("body").css("background","url(" + BACKGROUND_IMAGE+ ")")
+        $("body").css("background","url(" + wnw.list.assetPath(BACKGROUND_IMAGE) + ")")
             .append($("<div/>").attr("id","bord"))
             .append($("<div/>").attr("id","SoundUnit"));
         //loading
@@ -382,7 +378,7 @@ if (!wnw.list) wnw.list = {};
             //       "margin" : "0 auto",
             //       "padding" : "10",
             //       "opacity" : "0.8"})
-            // .html("<center><font size=5>Now Loading...<span id=loadno></span></font><img src=" + LOADING_IMAGE + "></center>");
+            // .html("<center><font size=5>Now Loading...<span id=loadno></span></font><img src=" + assetPath(LOADING_IMAGE) + "></center>");
 
         // ロゴ
         $("#bord").append(
@@ -432,15 +428,15 @@ if (!wnw.list) wnw.list = {};
             var no = gImgList.length;
             var url = gImgUrlList[no];
             //位置計算
-            var top = TOP_MARGIN + Math.floor(no / ROW_NO ) * Y_SPAN;
-            if(no % ROW_NO == 0){ //１列目
+            var top = TOP_MARGIN + Math.floor(no / MSG_ROW_NO ) * MSG_Y_SPAN;
+            if(no % MSG_ROW_NO == 0){ //１列目
                 var left = LEFT_MARGIN;
             }else{
                 leftside = gImgList[no - 1];
                 var left = leftside.offset().left + leftside.width();
             }
-            top += rand1(SQEW_SPAN) - SQEW_SPAN/1.5;
-            left += rand1(SQEW_SPAN) - SQEW_SPAN/1.5;
+            top += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/1.5;
+            left += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/1.5;
             var zIndex = rand1(gZIndexMax);
             viewImage(url,top,left,zIndex,top,left,viewNextImage);
         }else{
@@ -455,12 +451,15 @@ if (!wnw.list) wnw.list = {};
         $("body").append(
             $("<img/>")
                 .attr("id",NEXT_BUTTON_ID)
-                .attr("src",assetPath('next.png'))
+                .attr("src",wnw.list.assetPath('next.png'))
                 .click(function(){
-                    var _id = $("#" + gZoomImgId).attr("nextId");
-                    console.log("nextZoom:" + gZoomImgId + "->" + _id);
+                    var _id = $("#" + gZoomImgId).attr("next");
+                    if(_id == gImgList.length){
+                        _id = 0;
+                    }
+                    console.log("nextZoom:" + gZoomImgId + "->" + "img" + _id );
                     unzoom(gZoomImgId);
-                    zoom(_id);
+                    zoom("img" + _id ) ;
                 })
                 .css({
                     "position":"absolute" ,
@@ -474,12 +473,15 @@ if (!wnw.list) wnw.list = {};
         $("body").append(
             $("<img/>")
                 .attr("id",PREV_BUTTON_ID)
-                .attr("src",assetPath('prev.png'))
+                .attr("src",wnw.list.assetPath('prev.png'))
                 .click(function(){
-                    var _id = $("#" + gZoomImgId).attr("prevId");
-                    console.log("nextZoom:" + gZoomImgId + "->" + _id);
+                    var _id = $("#" + gZoomImgId).attr("prev");
+                    if(_id == -1){
+                        _id = gImgList.length - 1;
+                    }
+                    console.log("nextZoom:" + gZoomImgId + "->" + "img" +_id );
                     unzoom(gZoomImgId);
-                    zoom(_id);
+                    zoom("img" + _id );
                 })
                 .css({
                     "position":"absolute" ,
@@ -497,7 +499,7 @@ if (!wnw.list) wnw.list = {};
         //         .css({"position":"absolute" ,
         //               "top":10 ,
         //               "left":1000 ,
-        //               "z-index" :Z_INDEX_BUTTON})
+        //               "z-index" :BUTTON_Z_INDEX})
         //         .click(function(){alert("削除したい写真をここにドロップしてください");})
         //         .droppable({
         //             drop: function(e,ui) {
@@ -507,7 +509,6 @@ if (!wnw.list) wnw.list = {};
         //                     var url = img.attr('msg_id');
         //                     $.ajax({type: "delete",url: url});
         //                     img.css({"display":"none"});
-
         //                 }
         //             },
         //             tolerance: "pointer"
@@ -516,12 +517,12 @@ if (!wnw.list) wnw.list = {};
         //整頓ボタン
         $("#bord").append(
             $("<img/>")
-                .attr("src", SEITON_BTN_IMAGE)
+                .attr("src", wnw.list.assetPath(SEITON_BTN_IMAGE))
                 .css({
                     "position":"absolute" ,
                     "top":SEITON_TOP ,
                     "left":SEITON_LEFT ,
-                    "z-index" :Z_INDEX_BUTTON })
+                    "z-index" :BUTTON_Z_INDEX })
                 .click(reset));
 
     };
@@ -530,6 +531,7 @@ if (!wnw.list) wnw.list = {};
     wnw.list.display = display;
     wnw.list.addImage = addImage;
     wnw.list.reset = reset;
+    wnw.list.assetPath = assetPath;
 })();
 
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: wnw_show
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.1.2
   prerelease: 
 platform: ruby
 authors: