LGTM画像を検索してコピペできるツールを作ったのソースコード2

暇だったので前回から「もっと検索するボタン」を追加した。
これでさらにたくさんLGTMできる。

なお実際に使用出来るのはここだ

ソースコード

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<!--この辺で操作するタグ-->
<textarea id="word">cat</textarea>
<textarea id="limit">10</textarea>
<button id="btn">検索</button>
<!--このdivに表示される-->
<div id="lgtm_images"></div>
<button id="more_btn">もっと表示する</button>
<script type="text/javascript">
var lgiftm = {};
( function(){
"use strict";
var giphyRoot = "https://api.giphy.com/v1/gifs/",
apiKey = "dc6zaTOxFJmzC",
apiUrl = "&api_key=",
searchUrl = "search?q=",
limitUrl = "&limit=",
offsetUrl = "&offset=",
imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',
imgTag2 = ')" id="lgtm',
imgTag3 = '" src="',
imgTag4 = '">',
clipboardClass = ".copy",
lgtmId = "#lgtm_images",
offsetValue = 0;
lgiftm.setMoreGiphySearchImage = function(){
this.setGiphySearchImage( $( "#word" ).val(),
$( "#limit" ).val() +
offsetUrl + offsetValue)
};
lgiftm.setGiphySearchImage = function( word, conditions ){
$.getJSON(
giphyRoot + searchUrl + word + apiUrl +
apiKey + limitUrl + conditions,
function(data) {
var i = 0;
$.each(data.data, function( key, val ) {
$( lgtmId ).append(
imgTag1 + val.images.original.url +
imgTag2 + i + imgTag3 +
val.images.fixed_width_small.url + imgTag4
);
i++;
});
// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ
new Clipboard( clipboardClass );
}
);
offsetValue += parseInt( $( "#limit" ).val() );
};
lgiftm.clear = function(){
$( "div" + lgtmId ).empty();
offsetValue = 0;
}
})();
( function(){
"use strict";
// 初期表示用
lgiftm.setGiphySearchImage( "cat", 10 );
$( "#btn" ).click( function( e ) {
// 表示初期化してから検索画像を表示しまっせ
lgiftm.clear();
lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );
});
$( "#more_btn" ).click( function( e ) {
// 検索画像をもっと表示しまっせ
lgiftm.setMoreGiphySearchImage();
});
})();
</script>

100

101

102

103

104

105

106

107

108

109

110

<button id="more_btn">もっと表示する</button>

var lgiftm = {};

( function(){

"use strict";

var giphyRoot = "https://api.giphy.com/v1/gifs/",

apiKey = "dc6zaTOxFJmzC",

apiUrl = "&api_key=",

searchUrl = "search?q=",

limitUrl = "&limit=",

offsetUrl = "&offset=",

imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',

imgTag2 = ')" id="lgtm',

imgTag3 = '" src="',

imgTag4 = '">',

clipboardClass = ".copy",

lgtmId = "#lgtm_images",

offsetValue = 0;

lgiftm.setMoreGiphySearchImage = function(){

this.setGiphySearchImage( $( "#word" ).val(),

$( "#limit" ).val() +

offsetUrl + offsetValue)

};

lgiftm.setGiphySearchImage = function( word, conditions ){

$.getJSON(

giphyRoot + searchUrl + word + apiUrl +

apiKey + limitUrl + conditions,

function(data) {

var i = 0;

$.each(data.data, function( key, val ) {

$( lgtmId ).append(

imgTag1 + val.images.original.url +

imgTag2 + i + imgTag3 +

val.images.fixed_width_small.url + imgTag4

);

i++;

});

// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ

new Clipboard( clipboardClass );

}

);

offsetValue += parseInt( $( "#limit" ).val() );

};

lgiftm.clear = function(){

$( "div" + lgtmId ).empty();

offsetValue = 0;

}

})();

( function(){

"use strict";

// 初期表示用

lgiftm.setGiphySearchImage( "cat", 10 );

$( "#btn" ).click( function( e ) {

// 表示初期化してから検索画像を表示しまっせ

lgiftm.clear();

lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );

});

$( "#more_btn" ).click( function( e ) {

// 検索画像をもっと表示しまっせ

lgiftm.setMoreGiphySearchImage();

});

})();

</script>

まぁもっと表示するメソッドとクリックイベント追加した感じです。

あとがき

あとはランダム機能だな。

あとがき

関連