일억별영상11~14화 편집(너없는시간) #1570845116｜無料GIF画像検索 GIFMAGAZINE [3957491]
일억별영상11~14화 편집(너없는시간) #1570845116
'; }, pinterestShareURL: function() { return "https://www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fgifmagazine.net%2Fpost_images%2F'" + this.item.id + "&media=https:%2F%2Fimg.gifmagazine.net%2Fgifmagazine%2Fimages%2F" + this.item.id + "%2Foriginal.gif&description=" + encodeURIComponent(this.item.title) + "%20created%20by%20" + encodeURIComponent(this.item.user_name); }, hashtags: function() { if (this.item.tags) { return "#" + this.item.tags.join(" #"); } return ""; }, }, methods: { onFocusUrlInput: function(e) { e.target.select(); }, switchReportMenu: function() { this.isReportCompleted = false; this.isReportOpening = !this.isReportOpening; }, reportClose: function(e) { if (e.target.getAttribute("class") != "detial20160502-wrap-main-bottom-right-container-reports") return; this.isReportOpening = false; }, reportSubmit: function(id) { var vm = this; if (vm.isReportLoading) return; vm.isReportLoading = true; vm.isReportCompleted = true; $.ajax({ url: "/post_images/" + id + "/report", method: "post", data: { type: vm.reportChecked, }, }) .done(function(resp) { }) .always(function() { vm.isReportLoading = false; }); }, engageToGa: function(identifier) { return "ga('send','event','engagement','sns_button','" + identifier + ":" + this.item.id + "_'+location.href.replace(location.origin, ''));"; }, openInstaBox: function() { this.instaOpening = true; // 初期化 this.instaLoading = false; this.instaSuccess = false; this.instaError = false; ga('send', 'event', 'engagement', 'sns_button', 'instagram_id:' + this.item.id + '_' + location.href.replace(location.origin, '')); }, submitInsta: function() { var vm = this; if (this.instaBox.match(/.+@.+/) !== null && vm.item !== null) { vm.instaLoading = true; $.ajax({ url: '/converters/gif_to_movie', data: { email: this.instaBox, gtype: 'post_images', gid: vm.item.id, }, }) .done(function(data) { if (data["status"] == 1) { vm.instaLoading = false; vm.instaSuccess = true; } else { vm.instaLoading = false; vm.instaLoading = false; } }) .fail(function(e) { vm.instaLoading = false; errorTrackingToGa(e.responseText, '', gifmagazineLineNumber()); }); } else { vm.instaError = true; } }, closeInstaBox: function() { this.instaOpening = false; }, addLike: function(gif_id) { var vm = this; if (vm.isStarLoading === true) return; vm.isStarLoading = true; vm.item.is_star = true; ga('send','event','engagement','star','post_images_' + gif_id + '_feed_ad', 1); $.ajax({ url: "/post_images/" + gif_id + "/stars", type: 'POST', data: { "post_image_star[user_id]": vm.currentUser.id, "post_image_star[post_image_id]": gif_id, "post_image_star[rating]": 1, }, }) .done(function(data) { if (data['status'] !== 'ok') { vm.item.is_star = false; } }) .always(function(){ vm.isStarLoading = false; }); }, removeLike: function(gif_id) { var vm = this; if (vm.isStarLoading === true) return; vm.isStarLoading = true; vm.item.is_star = false; $.ajax({ url: '/post_images/' + gif_id + '/stars/delete', type: 'POST', data: { "post_image_star[user_id]": vm.currentUser.id, "post_image_star[post_image_id]": gif_id, }, }) .done(function(data) { if (data['status'] !== 'ok') { vm.item.is_star = true; } }) .always(function(){ vm.isStarLoading = false; }); }, addStamp: function(text) { this.commentText = this.commentText + ":" + text + ":"; }, openComment: function(){ var vm = this; vm.opening = true; document.querySelector('body').style = 'overflow: hidden'; // 初回コメントopen時に初期化処理があるのでやる if (vm.isCommentLoaded === true) return; // 非同期でコメント取得する。以後はクライアント側で状態管理 $.ajax({ url: "/post_images/" + vm.item.id + "/comments/lists", }).done(function(resp) { resp.forEach(function(res){ vm.commentLists.push(res); }) }). always(function(){ vm.isCommentLoaded = true; // メッセージの一覧の高さはposition:fixed;してるので動的に計算する必要あり var commentsBoxHeight = window.innerHeight - document.querySelector(".detial20160502-wrap-main-bottom-right-container-comments-form").offsetHeight - document.querySelector(".detial20160825-wrap-main-bottom-right-container-comments-bottom-navi").offsetHeight; document.querySelector('.detial20160502-wrap-main-bottom-right-container-comments-bottom-lists').style["height"] = commentsBoxHeight + 'px'; }); }, closeComment: function(){ this.opening = false; document.querySelector('body').style = 'overflow: scroll'; }, addComment: function(gif_id) { var vm = this; if (vm.commentText.trim() == "") return false; ga('send','event', 'engagement', 'comment', 'post_images_' + gif_id + '_feed_ad'); $.ajax({ url: '/post_images/' + gif_id + '/comments.json', type: 'POST', data: { "post_image_comment[user_id]": vm.currentUser.id, "post_image_comment[post_image_id]": gif_id, "post_image_comment[message]": vm.commentText, }, }) .done(function(data) { vm.commentText = ''; vm.commentLists.unshift(data); }); }, removeComment: function(gif_id, comment_id) { var vm = this; $.ajax({ url: "/post_images/" + gif_id + "/comments/" + comment_id, type: 'DELETE', data: { "post_image_comment[user_id]": vm.currentUser.id, }, }) .done(function(data) { if (data['status'] == 'ok') { vm.commentLists.map(function(comment, i){ if (comment.id !== '' && comment.id === comment_id) { vm.commentLists.splice(i, 1); } }); } }); }, }, }); new Vue({ el: '#home20160502-wrap', data: { queryString: '', mainItem: {}, isPickuped: false, isHiddenFromHome: false, isOpenedRecommendTag: false, processing: false, playing: true, copied: false, copyTimer: null, items: [], offset: 0, limit: 100, isFetching: false, fetchedAll: false, prevKey: "", currentUser: { id: "", }, grid: null, }, mounted: function() { var vm = this; vm.queryString = location.search; vm._fetchItems(0, vm.limit).then(function(resp){ if (resp === true) vm.offset = vm.offset + vm.limit; $('.home20180528-wrap-list.unloaded').each(function(i, elm){ $(elm).removeClass('unloaded') }) }); window.addEventListener('scroll', this._infiniteScroll); }, methods: { postPickup: function() { var vm = this if (!vm.processing) { vm.processing = true vm.isPickuped = !vm.isPickuped var gifId = location.pathname.match(/\/post_images\/(\d+)/)[1] $.ajax({ url: '/hotgifs/create', type: 'POST', data: {gif_id: gifId} }).done(function(res){ vm.isPickuped = true vm.processing = false }) } }, deletePickup: function() { var vm = this if (!vm.processing) { vm.processing = true vm.isPickuped = !vm.isPickuped var gifId = location.pathname.match(/\/post_images\/(\d+)/)[1] $.ajax({ url: '/hotgifs/delete', type: 'POST', data: {gif_id: gifId} }).done(function(res){ vm.isPickuped = false vm.processing = false }) } }, showToHome: function() { var vm = this if (!vm.processing) { vm.processing = true vm.isHiddenFromHome = !vm.isHiddenFromHome var gifId = location.pathname.match(/\/post_images\/(\d+)/)[1] $.ajax({ url: '/post_image_options/create', type: 'POST', data: {gif_id: gifId} }).done(function(res){ vm.isHiddenFromHome = true vm.processing = false }) } }, hiddenFromHome: function() { var vm = this if (!vm.processing) { vm.processing = true vm.isHiddenFromHome = !vm.isHiddenFromHome var gifId = location.pathname.match(/\/post_images\/(\d+)/)[1] $.ajax({ url: '/post_image_options/delete', type: 'POST', data: {gif_id: gifId} }).done(function(res){ vm.isHiddenFromHome = false vm.processing = false }) } }, controlMainGifWithClick: function(e) { if (e.target.nodeName.match(/img/i)) return false; // imgはパス if (this.playing === true) { e.target.pause(); this.playing = false; } else if (this.playing === false) { e.target.play(); this.playing = true; } }, // ここから借りました https://qiita.com/simiraaaa/items/2e7478d72f365aa48356 copyLink: function(string){ ga('send','event','engagement','sns_button','copylink_id:3957491_'+location.href.replace(location.origin, '')); var vm = this; var temp = document.createElement('div'); clearTimeout(vm.copyTimer); temp.appendChild(document.createElement('pre')).textContent = string; temp.style.position = 'fixed'; temp.style.left = '-100%'; document.body.appendChild(temp); document.getSelection().selectAllChildren(temp); var result = document.execCommand('copy'); document.body.removeChild(temp); vm.copied = true; vm.copyTimer = setTimeout(function(){ vm.copied = false; }, 1000); return result; }, _infiniteScroll: function(e) { var vm = this; var currentPos = window.scrollY + window.innerHeight; vm.isOpenedRecommendTag = currentPos > 1000; // おすすめタグのオン/オフ if (currentPos > $(document).height() - 200) { vm._fetchItems(vm.offset, vm.limit).then(function(resp){ if (resp === true) { vm.offset = vm.offset + vm.limit; // すごいひどい書き方だけどSEOで初回はerbでレンダリングしてmasonryする // そのあとのmore loadingではvueで取得してレンダリングしその結果のdomをmasonryに突っ込む var $data = $(".home20180528-wrap-list.unloaded"); vm.grid.append( $data ).masonry('appended', $data ); $(".home20180528-wrap-list.unloaded").each(function(i, elm){ $(elm).removeClass("unloaded"); }); } }); } }, _fetchItems: function(offset = 0, limit = 20) { var vm = this; if (vm.fetchedAll === true) return new Promise(function(resolve, reject){resolve(false)}); if (vm.isFetching === true) return new Promise(function(resolve, reject){resolve(false)}); vm.isFetching = true; return new Promise(function(resolve, reject){ var pathKey = location.pathname.match(/\/post_images\/(\d+)/)[1]; // preview key check var prevKey = location.search.match(/preview=(.+)/); if (prevKey) { vm.prevKey = prevKey[1]; } $.ajax({ url: '/post_images/' + pathKey + '/items', dataType: 'json', data: { offset: offset, limit: limit, windowWidth: 150, windowHeight: 150, // これ使ってなくない...? preview: vm.prevKey, referrer: document.referrer, }, }) .done(function(data) { vm.mainItem = data.main_item; vm.currentUser = data.currentUser; var i = 0; for(var j = 0; j < data.items.length; j++) { vm.items.push(data.items[j]); } vm.isFetching = false; if (data.items.length === 0) { vm.fetchedAll = true; } Vue.nextTick(function(){ vm.grid = $('#home20160502-wrap-lists').masonry({ // options itemSelector: '.home20180528-wrap-list', columnWidth: '.grid-sizer', percentPosition: true, gutter: 10 }); vm.grid.imagesLoaded().progress(function(){ vm.grid.masonry('layout'); }); $('.home20180528-wrap-list').on("inview", function(event, isInView, visiblePartX, visiblePartY) { handleInview(this, event, isInView, visiblePartX, visiblePartY); vm._lazyload(event, visiblePartY) }); }); resolve(true); }).fail(function() { vm.isFetching = false; vm.fetchedAll = true; reject(false); }); }); }, _lazyload: function(event, visiblePartY) { if (visiblePartY === 'top' || visiblePartY === 'both') { var img = event.target.querySelector('.home20160502-wrap-list-top-link img'); if (img) { var src = img.src; var orgSrc = img.getAttribute('data-original'); if(src !== orgSrc){ img.src = orgSrc; } } } }, } })