javascript - recargar - paginar resultados json jquery

Paginación HTML similar a un libro

Question

¿Cómo puedo dividir el contenido de un archivo HTML en fragmentos de tamaño de pantalla para "paginarlo" en un navegador WebKit?

Cada "página" debe mostrar una cantidad completa de texto. Esto significa que una línea de texto no debe cortarse a la mitad en el borde superior o inferior de la pantalla.

Editar

Esta pregunta fue originalmente etiquetada como "Android", ya que mi intención es crear un lector de Android ePub. Sin embargo, parece que la solución se puede implementar solo con JavaScript y CSS, por lo que amplié el alcance de la pregunta para que sea independiente de la plataforma.

Answer 1

Hablando desde la experiencia, espera dedicarle mucho tiempo a esto, incluso a un espectador de barebones. Un lector de ePub fue en realidad el primer gran proyecto que asumí cuando comencé a aprender C #, pero el estándar ePub definitivamente es bastante complejo.

Puede encontrar la última versión de la especificación para ePub aquí: http://www.idpf.org/specs.htm que incluye OPS (Open Publication Structure), OPF (Open Packaging Format) y OCF (OEBPS Container Format) .

Además, si te sirve de algo, aquí hay un enlace al código fuente de C # del proyecto en el que comencé:

https://www.dropbox.com/sh/50kxcr29831t854/MDITIklW3I/ePub%20Test.zip

No está desarrollado en absoluto; No he jugado con esto durante meses, pero si no recuerdo mal, simplemente inserte un ePub en el directorio de depuración, y cuando ejecute el programa simplemente escriba una parte del nombre (por ejemplo, debajo del domo, simplemente escriba "domo") y mostrará los detalles del libro.

Lo tenía funcionando correctamente para algunos libros, pero todos los libros electrónicos de Google Books lo rompieron por completo. Tienen una implementación completamente extraña de ePub (para mí, al menos) en comparación con libros de otras fuentes.

De todos modos, ¡con un poco de suerte, parte del código estructural podría ayudarte!

Answer 2

Hace poco intenté algo similar a esto y agregué un poco de estilo de CSS para cambiar el diseño a horizontal en lugar de vertical. Esto me dio el efecto deseado sin tener que modificar el contenido del Epub de ninguna manera.

Este código debería funcionar.

mWebView.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {

        // Column Count is just the number of ''screens'' of text. Add one for partial ''screens''
        int columnCount = Math.floor(view.getHeight() / view.getWidth())+1;

        // Must be expressed as a percentage. If not set then the WebView will not stretch to give the desired effect.
        int columnWidth = columnCount * 100;

        String js = "var d = document.getElementsByTagName(''body'')[0];" + 
            "d.style.WebkitColumnCount=" + columnCount + ";" + 
            "d.style.WebkitColumnWidth=''" + columnWidth + "%'';";
        mWebView.loadUrl("javascript:(function(){" + js + "})()");
    }
});

mWebView.loadUrl("file:///android_asset/chapter.xml");

Entonces, básicamente estás inyectando JavaScript para cambiar el estilo del elemento del cuerpo después de que se haya cargado el capítulo (muy importante). El único inconveniente de este enfoque es cuando tienes imágenes en el contenido que el recuento de columnas calculado se torció. Sin embargo, no debería ser demasiado difícil de arreglar. Mi intento iba a estar inyectando JavaScript para agregar atributos de ancho y alto a todas las imágenes en el DOM que no tienen ninguno.

Espero eso ayude.

-Dan

Answer 3

Hay varias maneras en que esto se puede hacer. Si cada línea está en su propio elemento, todo lo que tiene que hacer es verificar si alguno de sus bordes está fuera de la vista (ya sea en los navegadores o en la "página del libro").

Si desea saber cuántas "páginas" van a haber por adelantado, muévalas temporalmente a la vista y obtenga la línea en la que termina la página. Esto podría ser lento debido a que el reflujo de la página es necesario para que el navegador sepa dónde está todo.

De lo contrario, creo que podría usar el elemento canvas de HTML5 para medir texto y / o dibujar texto.

Aquí hay información sobre esto: https://developer.mozilla.org/en/Drawing_text_using_a_canvas http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

Answer 4

Pude mejorar Nacho''s solución Nacho''s para obtener un efecto de paginación de barrido horizontal con WebView. here puede encontrar una solución y un code ejemplo.

Editar:

Código de solución.

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
    wv = (HorizontalWebView) findViewById(R.id.web_view);
    wv.getSettings().setJavaScriptEnabled(true);
    wv.setWebViewClient(new WebViewClient() {

        public void onPageFinished(WebView view, String url) {
            injectJavascript();
        }
    });

    wv.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            int pageCount = Integer.parseInt(message);
            wv.setPageCount(pageCount);
            result.confirm();
            return true;
        }
    });
    wv.loadUrl("file:///android_asset/ch03.html");   // now it will not fail here
}

private void injectJavascript() {
    String js = "function initialize(){/n" +
            "    var d = document.getElementsByTagName(''body'')[0];/n" +
            "    var ourH = window.innerHeight;/n" +
            "    var ourW = window.innerWidth;/n" +
            "    var fullH = d.offsetHeight;/n" +
            "    var pageCount = Math.floor(fullH/ourH)+1;/n" +
            "    var currentPage = 0;/n" +
            "    var newW = pageCount*ourW;/n" +
            "    d.style.height = ourH+''px'';/n" +
            "    d.style.width = newW+''px'';/n" +
            "    d.style.margin = 0;/n" +
            "    d.style.webkitColumnCount = pageCount;/n" +
            "    return pageCount;/n" +
            "}";
    wv.loadUrl("javascript:" + js);
    wv.loadUrl("javascript:alert(initialize())");
}

En mi webChromeClient onJsAlert, obtengo el número de páginas horizontales que paso al HorizontalWebView personalizado para implementar el efecto de paginación

HorizontalWebView.java

public class HorizontalWebView extends WebView {
    private float x1 = -1;
    private int pageCount = 0;

    public HorizontalWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                x1 = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                float x2 = event.getX();
                float deltaX = x2 - x1;
                if (Math.abs(deltaX) > 100) {
                    // Left to Right swipe action
                    if (x2 > x1) {
                        turnPageLeft();
                        return true;
                    }

                    // Right to left swipe action
                    else {
                        turnPageRight();
                        return true;
                    }

                }
                break;
        }
        return true;
    }

    private int current_x = 0;

    private void turnPageLeft() {
        if (getCurrentPage() > 0) {
            int scrollX = getPrevPagePosition();
            loadAnimation(scrollX);
            current_x = scrollX;
            scrollTo(scrollX, 0);
        }
    }

    private int getPrevPagePosition() {
        int prevPage = getCurrentPage() - 1;
        return (int) Math.ceil(prevPage * this.getMeasuredWidth());
    }

    private void turnPageRight() {
        if (getCurrentPage() < pageCount - 1) {
            int scrollX = getNextPagePosition();
            loadAnimation(scrollX);
            current_x = scrollX;
            scrollTo(scrollX, 0);
        }
    }

    private void loadAnimation(int scrollX) {
        ObjectAnimator anim = ObjectAnimator.ofInt(this, "scrollX",
                current_x, scrollX);
        anim.setDuration(500);
        anim.setInterpolator(new LinearInterpolator());
        anim.start();
    }

    private int getNextPagePosition() {
        int nextPage = getCurrentPage() + 1;
        return (int) Math.ceil(nextPage * this.getMeasuredWidth());
    }

    public int getCurrentPage() {
        return (int) (Math.ceil((double) getScrollX() / this.getMeasuredWidth()));
    }

    public void setPageCount(int pageCount) {
        this.pageCount = pageCount;
    }
}

Answer 5

Puede consultar http://www.litres.ru/static/OR/or.html?data=/static/trials/00/42/47/00424722.gur.html&art=424722&user=0&trial=1 pero el código puede estar muy ofuscado, así que solo usa Firebug para inspeccionar DOM.

Si el enlace no funciona, comente: le daría una respuesta fija.

Answer 6

Puede dividir las páginas en archivos XHTML separados y almacenarlos en una carpeta. Ejemplo: página01, página02. A continuación, puede representar esas páginas una por una debajo de la otra.

Answer 7

Quizás funcionaría usar XSL-FO . Esto parece pesado para un dispositivo móvil, y tal vez es excesivo, pero debería funcionar, y no tendría que implementar las complejidades de una buena paginación (por ejemplo, cómo asegurarse de que cada pantalla no corte el texto a la mitad) usted mismo .

La idea básica sería:

• Transforma el XHTML (y otras cosas EPUB) a XSL-FO usando XSLT.
• utilice un procesador XSL-FO para renderizar el XSL-FO en un formato paginado que pueda visualizar en el dispositivo móvil, como PDF (¿puede visualizar eso?)

No sé si hay un procesador XSL-FO disponible para Android. Podrías probar Apache FOP. RenderX (procesador XSL-FO) tiene la ventaja de tener una opción de salida de HTML paginado , pero nuevamente no sé si podría ejecutarse en Android.

Answer 8

Recientemente tuve este mismo problema e inspiré en las respuestas que encontré una solución simple de CSS que usa los atributos column3 de CSS3:

/* CSS */
.chapter {
    width: 600px;
    padding: 60px 10px;
    -webkit-column-gap: 40px;
    -webkit-column-width: 150px;
    -webkit-column-count: 2;
    height:400px;
}

/* HTML */
<div class="chapter">
    your long lorem ipsum arbitrary HTML
</div>

El ejemplo anterior ofrece excelentes resultados en un iPhone retina. Jugar con los diferentes atributos rinde en diferentes espacios entre las páginas y tal.

Si necesita admitir varios capítulos, por ejemplo, que deben comenzar en páginas nuevas, hay un ejemplo de XCode 5 en github: https://github.com/dmrschmidt/ios_uiwebview_pagination

Answer 9

Sobre la base de la respuesta de Dan aquí está mi solución para este problema, con el que me estaba esforzando hasta ahora. (Este JS funciona en iOS Webkit, no hay garantías para Android, pero por favor avíseme los resultados)

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName(''body'')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

Espero que esto ayude...

Answer 10

Tuve que codificar algo así también, y mi solución (de trabajo) es esta:

Debes aplicar estas líneas a la vista web ...

    webView_.getSettings().setUseWideViewPort(true);
    webView_.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

Además, debes inyectar algunos javascript. Tuve un montón de problemas con las diferentes escalas de mi actividad y el contenido presentado en la vista web, por lo que mi solución no toma ningún tipo de valor desde "afuera".

    webView_.setWebViewClient(new WebViewClient(){

            public void onPageFinished(WebView view, String url) {
                injectJavascript();
            }

        });

[...]

    public void injectJavascript() {
        String js = "javascript:function initialize() { " +
                "var d = document.getElementsByTagName(''body'')[0];" +
                "var ourH = window.innerHeight; " +
                "var ourW = window.innerWidth; " + 
                "var fullH = d.offsetHeight; " +
                "var pageCount = Math.floor(fullH/ourH)+1;" +
                "var currentPage = 0; " +
                "var newW = pageCount*ourW; " +
                "d.style.height = ourH+''px'';" +
                "d.style.width = newW+''px'';" +
                "d.style.webkitColumnGap = ''2px''; " +
                "d.style.margin = 0; " +
                "d.style.webkitColumnCount = pageCount;" +
                "}";
        webView_.loadUrl(js);
        webView_.loadUrl("javascript:initialize()");
    }

Disfruta :)