Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

fix API on user interface #34

Merged
merged 1 commit into from

1 participant

@otiai10
Owner

animate on Vanilla!!

@otiai10 otiai10 merged commit 14e25a1 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 3, 2013
  1. fix API on user interface

    authored
This page is out of date. Refresh to see the latest.
View
2  fuel/app/bootstrap.php
@@ -7,6 +7,8 @@ class_alias('Fuel\\Core\\Autoloader', 'Autoloader');
// Bootstrap the framework DO NOT edit this
require COREPATH.'bootstrap.php';
+//define('API_HOST_URL', 'api.anicatch.net');
+define('API_HOST_URL', 'anicatch.net');
Autoloader::add_classes(array(
// Add classes you want to override here
View
3  fuel/app/classes/controller/api/anime.php
@@ -5,6 +5,7 @@ class Controller_Api_Anime extends Controller_Rest
public function action_like()
{
$params = $this->params();
+ $params['action'] = 'like';
$res = array(
'result' => "false",
'params' => $params,
@@ -18,6 +19,7 @@ public function action_like()
public function action_unlike()
{
$params = $this->params();
+ $params['action'] = 'unlike';
$res = array(
'result' => "false",
'params' => $params,
@@ -31,7 +33,6 @@ public function action_unlike()
private function _isValidParams($params)
{
if(! is_numeric($params['id'])){
- echo 'hogehoge';
return false;
}
return true;
View
8 fuel/app/views/stream/index.php
@@ -10,9 +10,9 @@
<h1 id="video-title">fuga</h1>
<small><a id="video-url">hgoe</a></small>
</blockquote>
- <div>
- <a tabindex='1' class="btn btn-large btn-primary">好き</a>
- <a tabindex='1' class="btn btn-large btn-inverse">これ今期アニメじゃない</a>
+ <div id="anime-evaluation">
+ <a tabindex='1' id="like-anime" anime-id="" class="btn btn-large btn-primary">好き</a>
+ <a tabindex='1' id="unlike-anime" anime-id="" class="btn btn-large btn-inverse">これ今期アニメじゃない</a>
</div>
</div>
</div>
@@ -30,7 +30,7 @@
<table class="table">
<?php for($i=0; $i<count($animes); $i++){
echo '<tr id="index_'.$i.'" class="animetr"><td>' . $animes[$i]['title'] .'</td>';
- echo '<td><a tabindex="1" class="anime play-direct" seq="'.$i.'" hash="'.$animes[$i]['hash'].'" atitle="'.$animes[$i]['title'].'" aurl="' .$animes[$i]['url'].'">'.$animes[$i]['vtitle'] . '</a></td></tr>';
+ echo '<td><a tabindex="1" class="anime play-direct" seq="'.$i.'" anime-id="'.$animes[$i]['id'].'" hash="'.$animes[$i]['hash'].'" atitle="'.$animes[$i]['title'].'" aurl="' .$animes[$i]['url'].'">'.$animes[$i]['vtitle'] . '</a></td></tr>';
} ?>
<tr><td colspan="2" style="text-align:center">&lt&lt page<?echo $page; ?> &gt&gt</td></tr>
</table>
View
3  fuel/app/views/template.php
@@ -8,6 +8,7 @@
<?php echo Asset::css('common.css'); ?>
<?php echo Asset::js('swfobject.js'); ?>
<?php echo Asset::js('effect.js'); ?>
+ <?php echo Asset::js('ajax.js'); ?>
<?php echo Asset::js('player.js'); ?>
</head>
<body onload="init();">
@@ -49,5 +50,7 @@
</p>
</footer>
</div>
+ <div id="age-face-hidden">(☝ ՞ω ՞)☝</div>
+ <div id="sage-face-hidden">(´・ω・`)</div>
</body>
</html>
View
26 public/assets/css/common.css
@@ -80,7 +80,7 @@ div.loader.middle {
float: right;
width: 25px;
height: 25px;
- border: thin solid #aaa;
+ border: medium solid #aaa;
border-radius: 25px;
-webkit-animation-name: loader;
-webkit-animation-timing-function: linear;
@@ -138,3 +138,27 @@ div.loader.middle {
div.row.streaming-contents {
margin-top: 20px;
}
+
+div#age-face-hidden {
+ position: fixed;
+ /* */
+ top: 3000px;
+ /***/
+ width: 100%;
+ text-align: center;
+ font-size: 15em;
+ font-weight: bold;
+ text-shadow: 0 0 10px #f0f;
+}
+
+div#sage-face-hidden {
+ position: fixed;
+ /* */
+ bottom: -300px;
+ /***/
+ width: 100%;
+ text-align: center;
+ font-size: 15em;
+ font-weight: bold;
+ text-shadow: 0 0 10px #000;
+}
View
87 public/assets/js/ajax.js
@@ -0,0 +1,87 @@
+/**
+ * ajax method
+**/
+var xhr = {};
+
+var ajax = {
+ call : function(func, param, callback){
+ var method = 'POST';
+ var url = 'http://anicatch.net';
+ var async = true;
+ var data = {};
+ switch(func){
+ case 'likeAnime':
+ url += ('/anime/' + param + '/like');
+ break;
+ case 'unlikeAnime':
+ url += ('/anime/' + param + '/unlike');
+ break;
+ default:
+ console.log('Undefined ajax func call');
+ callback(false);
+ }
+ xhr = new XMLHttpRequest();
+ xhr.open(method, url, async, data);
+ xhr.setRequestHeader('Pragma', 'no-cache');
+ xhr.setRequestHeader('Cache-Control', 'no-cache');
+ //xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
+ //xhr.responseType = 'json';
+ xhr.onreadystatechange = function(){
+ onRequestStateChange(callback);
+ };
+ xhr.send(data);
+ },
+};
+
+function onRequestStateChange(cb){
+ if(
+ xhr.readyState === 4 &&
+ xhr.status === 200 &&
+ xhr.responseText != void 0
+ ){
+ var domparser = new DOMParser();
+ domparser.async = false;
+ var xml = domparser.parseFromString(xhr.responseText, "application/xml");
+ var jsonstring = xml.getElementsByTagName('item')[0].textContent;
+ cb(JSON.parse(jsonstring));
+ }
+}
+
+function registAjaxBtns(){
+ var likeAnimeBtn = document.getElementById('like-anime');
+ likeAnimeBtn.addEventListener('click',function(){
+ var self = this;
+ ajax.call('likeAnime', this.getAttribute('anime-id'), function(res){
+ console.log('Ajax is back -> ', res);
+ if(Boolean(res.result)){
+ ageAction(function(){
+ //replaceInnerHTML(self, '<h1>(☝ ՞ω ՞)☝</h1>');
+ replaceInnerHTML(self, '<div></div>');
+ });
+ }
+ });
+ });
+ var unlikeAnimeBtn = document.getElementById('unlike-anime');
+ unlikeAnimeBtn.addEventListener('click',function(){
+ var self = this;
+ ajax.call('unlikeAnime', this.getAttribute('anime-id'), function(res){
+ console.log('Ajax is back -> ', res);
+ if(Boolean(res.result)){
+ sageAction(function(){
+ //replaceInnerHTML(self, '<h1>(´・ω・`)</h1>', { color : '#aaa'});
+ replaceInnerHTML(self, '<div></div>');
+ });
+ }
+ });
+ });
+}
+
+function replaceInnerHTML(trgt, html, styles){
+ trgt.removeEventListener('click');
+ trgt.setAttribute('class','');
+ trgt.innerHTML = html;
+ trgt.style.textDecoration = 'none';
+ if(styles && styles.color != void 0){
+ trgt.style.color = styles.color;
+ }
+}
View
55 public/assets/js/effect.js
@@ -14,3 +14,58 @@ function replaceLoader(dom){
.replace(' btn-large ','');
dom.innerHTML = '<div class="loader middle"></div>Now Loading...';
}
+
+function ageAction(callback){
+ var dom = document.getElementById('age-face-hidden');
+ _SlideAnimation(dom, { top : '1000px' }, { top : '-1000px' }, 300, callback);
+}
+
+function sageAction(callback){
+ var dom = document.getElementById('sage-face-hidden');
+ _SlideAnimation(dom, { bottom : '1500px' }, { bottom : '-500px' }, 300, callback);
+}
+
+function _SlideAnimation(dom, start, dest, duration, cb){
+ cb(); // do not wait this action
+ var distPerIteration = 0;
+ var cnt = 0;
+ if(dest.bottom != void 0){
+ distPerIteration = Math.floor(Math.abs(_extrPX(dest.bottom) - _extrPX(start.bottom)) / duration);
+ dom.style.bottom = start.bottom;
+ }else{
+ distPerIteration = Math.floor(Math.abs(_extrPX(dest.top) - _extrPX(start.top)) / duration);
+ dom.style.top = start.top;
+ }
+ var animation = setInterval(function(){
+ // TODO: do not use counter
+ cnt++;
+ if(cnt > 300){
+ clearInterval(animation);
+ }
+ if(dest.bottom != void 0){
+ if(dom.style.bottom == dest.bottom){
+ // finish condition
+ clearInterval(animation);
+ dom.style.bottom = start.bottom + 'px';
+ cb();
+ }else{
+ // is not finish
+ dom.style.bottom = (_extrPX(dom.style.bottom) - distPerIteration) + 'px';
+ }
+ }else{
+ if(dom.style.top == dest.top){
+ // finish condition
+ clearInterval(animation);
+ dom.style.top = start.top + 'px';
+ cb();
+ }else{
+ // is not finish
+ dom.style.top = (_extrPX(dom.style.top) - distPerIteration) + 'px';
+ }
+ }
+ },1);
+}
+
+function _extrPX(pixelString){
+ return parseInt(pixelString.replace('px',''));
+}
View
22 public/assets/js/player.js
@@ -5,6 +5,8 @@ var __playlist = [];
var __index = 0;
var __player = {};
+var btnHTML = '<a tabindex="1" id="like-anime" anime-id="" class="btn btn-large btn-primary">好き</a><a tabindex="1" id="unlike-anime" anime-id="" class="btn btn-large btn-inverse">これ今期アニメじゃない</a>';
+
// see : https://developers.google.com/youtube/js_api_reference?hl=ja#Events
var STATE = {
READY : -1,
@@ -52,11 +54,12 @@ function initPlaylist(__playlist, is_sub){
var animes = document.getElementsByClassName(class_name);
for(var i=0; i<animes.length; i++){
var video = {
- "seq" : animes[i].getAttribute('seq'),
- "hash" : animes[i].getAttribute('hash'),
- "atitle" : animes[i].getAttribute('atitle'),
- "aurl" : animes[i].getAttribute('aurl'),
- "vtitle" : animes[i].innerHTML,
+ "seq" : animes[i].getAttribute('seq'),
+ "animeid" : animes[i].getAttribute('anime-id'),
+ "hash" : animes[i].getAttribute('hash'),
+ "atitle" : animes[i].getAttribute('atitle'),
+ "aurl" : animes[i].getAttribute('aurl'),
+ "vtitle" : animes[i].innerHTML,
};
__playlist.push(video);
}
@@ -140,6 +143,15 @@ function displayInfo(){
// change title
var title = document.getElementsByTagName('title');
title[0].innerHTML = __playlist[__index]['atitle'] + ' - あにきゃっち.net';
+
+ // set like and unlike btn
+ var anime_evaluation = document.getElementById('anime-evaluation');
+ anime_evaluation.innerHTML = btnHTML;
+ var likeAnimeBtn = document.getElementById('like-anime');
+ var unlikeAnimeBtn = document.getElementById('unlike-anime');
+ likeAnimeBtn.setAttribute('anime-id', __playlist[__index]['animeid']);
+ unlikeAnimeBtn.setAttribute('anime-id', __playlist[__index]['animeid']);
+ registAjaxBtns();
}
function enableEvaluateBtns(){
Something went wrong with that request. Please try again.