Phonegap + Jquery + Onsenui Android - traceelliot - 14-11-2014 21:34
Boas pessoal....
Gostava de uma ajuda aqui num projeto que estou a desenvolver.
Estou a fazer uma aplicação para Android com a ajuda de Jquery Phonegap e onsenui.
A aplicação consiste em carregar um feed de um site feito em wordpress e depois mostrar o artigo que seleccionamos no feed.
O conteúdo do artigo quando é mostrado é adaptado á aplicação, ou seja, o que pretendo é mostrar apenas o titulo e depois o seu conteúdo do artigo.
O problema está no conteudo a mostrar os videos do youtube.
Para ir buscar os dados do feed ao site estou a usar a seguinte API do Google.
https://developers.google.com/feed/v1/reference
Por exemplo os vídeos do youtube que estão no iframe se começarem com http://www.youtube..... são apresentados.
Os videos que começarem por //www.youtube........ são sumidos.
Gostava de saber que solução utilizar.
- Buscar o conteudo atravez desta API. (entries.content)
- Buscar o conteudo através do link do artigo obtido do feed. (Mas com o link como selecciono o conteúdo através de AJAX)
O código da aplicação encontra-se a seguir:
Construção do FEED
Código:
//CODE JQUERY
// Data object: RSS feed URL, number of entries to return, result format, API version
var data = {
q: 'http://www.dominio.pt/feed'
, num: 20
, output: 'json'
, v: '1.0'
};
// AJAX call to Google Feed API which converts ATOM/RSS feed to JSON
$.ajax({
url:'http://ajax.googleapis.com/ajax/services/feed/load'
,type : "GET"
,dataType : "jsonp"
,data: data
,success: function (json) {
var feed = json.responseData.feed;
if(!feed) return;
var entries = feed.entries;
if(!entries) return;
//Variaveis
//Conteudo html para o div feed
var html = '';
//Content o conteudo do artigo
var content = '';
//Imagem para colocar em cada artigo no feed
var image = '';
for( var i=0; i<entries.length; i++){
//Data que não está a ser utilizada ainda
var date = new Date(entries[i].publishedDate);
var dia = date.getDay();
var mes = date.getDate();
var ano = date.getYear();
var data = dia + '/' + mes + '/' + ano;
//--------------------------------------------------
//Forma que arranjei para colocar na variavel html o link do artigo no evento onclick na função artigo
var texto = "'" + entries[i].title + "'";
//Não está a ser utilizador (foi para DEBUG)
var page = "'noticia.html'";
//---------------------------------------------
//Coloca o conteudo do artigo para a variavel
content = entries[i].content;
//Seleciono a primeira imagem que aparecer no content para colocar no feed
image = $(content).find('img:first').attr('src');
//DEBUG
//html += '<li class="list__item list--inset__item list__item--chevron" onclick="teste('+texto+')"><b>' + entries[i].title + '</b>' + '<br />' + entries[i].author + '  ' + data + '<br/>' +'<img src="' + image + '" width="95%" height="200" /></li>';
html += '<li class="list__item list--inset__item list__item--chevron" onclick="artigo('+texto+')"><div class="centrado">' + entries[i].title + '</div>' + '<br/>' +'<img src="' + image + '" width="95%" height="95%" class="imagem" /></li>';
};
//Constroi o FEED com os artigos
$('#feed').html(html);
//A construção do FEED está como quero :-D
}
});
Construção do artigo quando clicamos no link do feed
Código:
//Função chamada quando no feed escolhe o artigo a ver
function artigo (artigo) {
//Copiei da documentação a animação do onsen ui e adaptei
var options = {
animation: 'slide', // What animation to use
onTransitionEnd: function() {
//CODE JQUERY
// Data object: RSS feed URL, number of entries to return, result format, API version
var data = {
q: 'http://www.dominio.pt/feed'
, num: 20
, output: 'json'
, v: '1.0'
};
// AJAX call to Google Feed API which converts ATOM/RSS feed to JSON
$.ajax({
url:'http://ajax.googleapis.com/ajax/services/feed/load'
,type : "GET"
,dataType : "jsonp"
,data: data
,success: function (json) {
var feed = json.responseData.feed;
if(!feed) return;
var entries = feed.entries;
if(!entries) return;
var html = '';
for( var i=0; i<entries.length; i++){
//Comparo se no resultado obtido pelo AJAX existe algum artigo com o link igual ao clicado
if (entries[i].title == artigo) {
//Começo a construição da visualização do artigo na APP
//Titulo está OK :-D
html += '<center><h1>'+ entries[i].title +'</h1></center><hr>';
//Problema aqui no content.
//Problema
//Videos do youtube que no src não tenham http://
//são sumidos pela api do feed do Google
//Os videos que são sumidos em vez de terem http:// tem só //www.youtube......
html += entries[i].content;
/*console.log(html);
var comeco = html.search('<iframe src="');
var fim = html.indexOf('"', comeco);
var link = html.slice(comeco, fim);
alert(comeco);*/
};
};
$('#artigo').html(html);
//Formatação imagens
$('#artigo img').each(function() {
$(this).css('width', '80%');
$(this).css('height', '80%');
$(this).css('display', 'block');
$(this).css('padding-top', '20px');
$(this).css('padding-bottom', '20px');
});
//Imagens Retirar-las dentro de dos links (jquery .text)
$('#artigo a').attr("href", "#");
//Videos do youtube (obter o link do iframe e colocar um link)
//Padding div artigo
$('#artigo').css('padding-left', '10px');
$('#artigo').css('padding-right', '10px');
$('#artigo').css('text-align', 'justify');
}
});
} // Called when finishing transition animation
};
myNavigator.pushPage('noticia.html', options);
}
Agradecia ajuda até podem mandar PM para eu explicar melhor o codigo e o que pretendo
Obrigado pessoal. :-D
RE: Phonegap + Jquery + Onsenui Android - traceelliot - 27-11-2014 21:09
Pessoal depois de alguma pesquisa estou a ver que não consigo ir buscar o código HTML dos artigos do Wordpress em condições através do Google API Feed.
Não sabem se existe alguma API ou forma de ir buscar o código HTML dos artigos feitos em Wordpress? Precisava de uma luz pessoal.
Queria saber apenas uma forma através de Javascript seleccionar o content dos artigos em Wordpress.
:-)
RE: Phonegap + Jquery + Onsenui Android - traceelliot - 14-12-2014 21:14
Alguma maneira de limitar uma div com css e o conteúdo não passar fora da div?
Imagens videos e afins não passarem o limite da div?
EDIT: Tenho seleccionado o conteúdo através de CSS por partes e trabalhar com percentagens. Tenho feito as coisas assim apesar de dar trabalho
|