lrsjng / pagemap Goto Github PK

Hello, lrsjng.

I am Using your pagemap library for my company project, Thanks.

Can I ask to get not minified source code for 0.4.0 ver ?
There exists a raw source code file but I guess that is different version with current one.

if it possible, Please commit with full source of 0.4.0 version
Thanks.

I have the map in my app, but it doesn't show the contents. I can click around in the map and the page will scroll, and when I scroll the box in the map moves with me. That works great, but it's empty.

I suspect it has to do with my content. All of my elements are either position: fixed or position: absolute with custom top and left params. Does this know how to handle all that?

Here's an example of what I got: https://timeline.starwars.guide/?minimap=true#year=0

You'll see the map in the lower right. If you open dev toolbar and go to Minimap.js in the source, you can see the code I'm using. It's also here: https://github.com/DavidLozzi/starwars-timeline/blob/master/src/organisms/Minimap/Minimap.js

Thanks

Mi dirección pública para recibir AAVE 0xb0ed172Ff84ADC9d522DE559Be59915054F37788

Págame a través de Trust Wallet: https://link.trustwallet.com/send?coin=60&address=0xb0ed172Ff84ADC9d522DE559Be59915054F37788&token_id=0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9

https://www.paypal.me/12345je297

What is the cause of this error ? am i missing anything in the procedure.

When I try to use the demo (text.html) with the init code from the example:

pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});

my console throws a ReferenceError: rgba is not defined

If I use the simpler init code from the text demo this doesn't happen:

pagemap(document.querySelector('#map'));

Maybe I just overlooked something – any pointers? Are there possible dependencies?

On a different topic: I had a hard time finding out that pagemap needs to be imported at bottom, maybe you could add a hint in the readme to avoid other people the hassle.

Delta-Financial/Smart-Contracts#12 (comment)

Hey, this little thing is cool!

To help more people use it, I think it would be helpful to include (at least) a recommended way to add the library as a dependency to your project (e.g. es6 import or html <script>).

You could also consider a React-specific component example, like this:

import React, { useState, useEffect } from 'react'
import pagemap from 'pagemap'

const PageMapWrapper = ({ children }) => {
    const [mapShowing, setMapShowing] = useState(false)
    useEffect(() => {
        if (!mapShowing) {
            pagemap(document.querySelector('#pagemap'), {
                viewport: null,
                styles: {
                    'header,footer,section,article': 'rgba(0, 0, 0, 0.08)',
                    'h1,a': 'rgba(0, 0, 0, 0.10)',
                    'h2,h3,h4': 'rgba(0, 0, 0, 0.08)'
                },
                back: 'rgba(0, 0, 0, 0.02)',
                view: 'rgba(0, 0, 0, 0.05)',
                drag: 'rgba(0, 0, 0, 0.10)',
                interval: null
            })
            setMapShowing(true)
        }
    })

    return (
        <div>
            <canvas id="pagemap" />
            {children}
        </div>
    )
}

export default PageMapWrapper

Hi,
is there a way to exclude elements, or better to create the map from just the content element?
I tried the viewport option, but then the map is not draggable. Did I miss something?

I want to change the style of viewport as it becomes too small when my screen height reaches upto 10000px

pagemap(document.querySelector('#map'), { viewport: null, styles: { '.node': 'rgba(0, 0, 0, 0.08)', '.link': 'rgba(63, 81, 181, 0.08)', }, back: null, view: 'rgba(0,0,0,0.05)', drag: 'rgba(0,0,0,0,0.10)', //back: 'rgba(0, 0, 0, 0.08)', interval: 50, });

cro1zz25t4fuqx546nsq89agapthrzfkc0djcpp5e6

Hi,

I'm not very familiar with JS. When I copy the raw code to my site the map doesn't show the bottom bound. When I drag the box it expands and contracts but the bottom is stuck to the maximum boundary set by the map of the page.

Here is a snippet of my code: https://codepen.io/magix430/pen/dEQxqJ

Thanks in advance,
Kelvin

https://metamask.io/

I've initiated pagemap as your instructions. and it's showing and all. but whenever I try to click on it and drag (like you do with scrollbar), it doesn't work as demo page and throws an error into console.

pagemap0.4.0.min.js:2 Uncaught TypeError: Cannot read property 'style' of null
    at HTMLCanvasElement.j (pagemap0.4.0.min.js:2)
j @ pagemap0.4.0.min.js:2

What would be the issue here and how can I fix it?
Im using wordpress and I've put map canvas like below

<canvas id='map'></canvas>
		<?php
		global $post;
		$pageId = $post->ID; 
		$post = get_post($pageId); 
		$content = apply_filters('the_content', $post->post_content); 
		echo $content;  
		?>

Is there any way to fix this?
also I included pagemap js before my custom js file and before jquery (if this helps)

Hi @lrsjng,

thanks for this javascript library.. looks very good.
I am having problems styling the elements in color (e.g. drawing slightly red boxes or something). looks like all colors are grayscaled.