Phonegap + Jquery + Onsenui Android

[traceelliot]

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 + '&nbsp&nbsp' + 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

[traceelliot]

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.

:-)

[traceelliot]

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