pablof7z / chardin.js Goto Github PK

View Code? Open in Web Editor NEW

5.0K 5.0K 511.0 789 KB

Simple overlay instructions for your apps.

Home Page: https://heelhook.github.io/chardin.js/

License: Other

Ruby 1.62% CSS 14.40% HTML 16.15% JavaScript 61.74% SCSS 6.09%

chardin.js's People

Contributors

Stargazers

Watchers

Forkers

skillhound pranaya-ghimire twocngdagz jweir meai1 fauxstor hms-teach manava trtg lujaw dinamic fiveminuteargument mattallty jinal88 felipeclopes donghuaxiao creativelyme shakakira y-kitani johntomcy diullei willypoteloin devluis geekybeaver u122382 magicpriest dydycloud msoftware jarc100 jorgejob gtrdblt godietion starsjz fatpixellin nvdnkpr rudderdon felipeleitedg netconstructor uxscripts opengui openux interfaces-xx netcon-source leadsplus anthurr emchristiansen deriascos mnishihan namongk tyidnet arnabc kuniezu kenduemura lindosekai kjyreg 247webdev psych0der zerodev vinaysolanki renaldy84 xenoki brush51 smillea roleat travist6983 onlychristopher alienx chowdhury unabridgedxcrpt cyrke flayzeraynx juscribe lymanlai myusernamejeep callawaywilson chu888chu888 monolithic woerwin lieeagle einsitang zwaardje orakle leison daverev sriniashu martinsv damkraw zumot kathirgen hijonathan badubizzle shad0w77 drdavidpier jklfa cron64 likaka22 zachch andreumaiamedia nickg33 githubber

chardin.js's Issues

wordpress plugin

Hi!
Are you planning to make a wordpress plugin of chardin?
It would be great in case newer websites go live.
Cheers!

Chardin.js demo (gh-pages) doesn't work due to some http refernces

Right now I'm booted into Win 8.1, trying latest FF and Chrome. Looks like google fonts are not loaded and maybe other issues.

FF FireBug console:
Blocked loading mixed active content "http://fonts.googleapis.com/css?family=Montserrat:400,700"
Blocked loading mixed active content "http://code.jquery.com/jquery-1.9.1.min.js"
Blocked loading mixed active content "http://fonts.googleapis.com/css?family=Montserrat:400,700"
Blocked loading mixed active content "http://code.jquery.com/jquery-1.9.1.min.js"
TypeError: t is undefined
...tParent;return t.top=r,t.left=n,t},e}(),t.fn.extend({chardinJs:function(){var n,...
chardinjs.min.js (line 2, col 3983)
ReferenceError: $ is not defined
$(function() {
demo.js (line 4, col 2)
GET https://apis.google.com/_/scs/apps-static/_/js/k=...RSTNoBcAYOn7vC-V1AIz10SRkEhEcPg/cb=gapi.loaded_0

200 OK
248ms
fastbut...9063390 (line 28)
GET https://apis.google.com/_/scs/apps-static/_/js/k=...RSTMjG9wWLrT-KZYIA_lqG6d1J68HKw/cb=gapi.loaded_1

200 OK
251ms
fastbut...9063390 (line 28)
20:1:41.407 CSI/tbsd_
20:1:41.408 CSI/_tbnd

Chrome:
[blocked] The page at 'https://heelhook.github.io/chardin.js/#' was loaded over HTTPS, but ran insecure content from 'http://fonts.googleapis.com/css?family=Montserrat:400,700': this content should also be loaded over HTTPS.
(index):11
[blocked] The page at 'https://heelhook.github.io/chardin.js/#' was loaded over HTTPS, but ran insecure content from 'http://code.jquery.com/jquery-1.9.1.min.js': this content should also be loaded over HTTPS.
(index):1
Uncaught TypeError: Cannot read property 'fn' of undefined chardinjs.min.js:2
Uncaught ReferenceError: $ is not defined demo.js:4
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) tweet_button.1406859257.html:1
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) follow_button.1406859257.html:1

Any plans to merge @kurtkotzur's fork?

@heelhook @kurtkotzur any plans to merge back into master? https://github.com/kurtkotzur/chardin.js

I'd like to contribute but it looks like development has stalled here. Not sure where I should start.

Sequential tour

HN comment "I think it would be worth displaying each message one at a time with a delay in between (that way they could function as a sequential tour in addition to coach marks)."

source

Horizontal line is not positioned correctly

I have a simple footer. Some text with some links. If I have help pointing at these links, however the horizontal white line is failing.

It is also failing if placed on an div that wraps an image.

See the issue:

Here is my simple html.

Note: I tried to apply https://github.com/heelhook/chardin.js/pull/65 (which I guess is the same as https://github.com/heelhook/chardin.js/pull/68 too). It helped the vertical position but not the horizontal position.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="chardinjs.css" />
    <script>
    $(function() {
      $("body").chardinJs("toggle");
    });
  </script>
    <script src="./chardin.js"></script>
  </head>

  <body>
  <div>
    <div style="width: 99%; text-align: center;">
      <div style="display: inline-block" data-intro="The div around a 32x32 image" data-position="left"><img src="http://www.rhyous.com/wp-content/plugins/social-media-widget/images/default/32/facebook.png" /></div>
    </div>
  </div>
  <div id="footer" style="text-align: center">
    <div>
        <div><hr /></div>
        <div style="width: 800px; margin: 0 auto;">
            <p style="font-size: .8em;">For license issues, contact <a href="mailto:[email protected]" data-intro="The tells you who to contact for license issues." data-position="left">Licensing</a>.
            For support issues contact <a href="http://www.landesk.com/support/contact" data-intro="The tells you who to contact for support issues." data-position="bottom">Support</a>.
            Send website feedback to <a href="mailto:[email protected]" data-intro="This tells you where to email website " data-position="right">feedback</a>.
        </div>
        <div>
            <hr />
        </div>
    </div>
  </div>
  </body>
</html>

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/30122987-horizontal-line-is-not-positioned-correctly?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

refresh() does not re-position tooltip

The refresh() method does not realign the tooltip when the dimensions of the element being tooltipp-ed change.

To demonstrate, go to http://heelhook.github.io/chardin.js/, change the height of the image to 100 pixels, then resize the browser to trigger chardinJs.refresh() . The bounding box will be redrawn, but the tooltip will not be relocated.

To correct, I added "this._place_tooltip(el);" to line 50, within the resize() method after the call to _position_helper_layer(),of the latest rendered JavaScript file. I apologize that I am not good enough at GitHub or CoffeeScript to submit a pull request.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Overlay on page load

Hi
Is it configurable to show the overlay when the page loads. Also, set cookie so that it wont show the next time or after 3 days, for eg, when user has understood instructions.

Thanks.

Xhtml compatibility

I went to use this with a xhtml project and the overlay didn't properly display. changing

if (this.$el.prop('tagName') === "BODY") {

if (this.$el.prop('tagName').toUpperCase() === "BODY") {

seems to be the appropriate fix for it.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of heelhook/chardin.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library heelhook/chardin.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "heelhook/chardin.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Issue with bootsrap table

Hi,

I just try to used chardin but I have a graphical bug with bootstrap table :

On the orignal table there is text (an colunm title) but not with chardin are they any solution to resolve this ?
Here the code :

....

Boostrap 3?

Is this compatible with Bootstrap 3? It doesn't seem to work for me.

Highlight element & have white line

Hi,

When i use chardin on an element, the data-intro is well displayed but i do not have the white line to show exactly which element is concerned and the element in question is not highlighted.

Here's a screen capture : http://imgur.com/cFXRSdz

Here's my code :

HTML

JS
$('body').chardinJs('start');

Do i missed something ?

By the way, thanks for your great work 👍

EDIT :
I'm using bootstrap, maybe some code does not work because of that ?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/8011424-highlight-element-have-white-line?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

Attribute 'data-intro' and 'data-position' doesn't work in Rails ERb link_to method

Hello,

I found that my sweet charding.js causes an error in Rails when the attribute data-intro and data-position are added to Rails ERB method like link_to as:

<%= link_to "Home", root_path, class: 'brand' data-intro: 'Goes back to Home page.'%>

The root cause is clear that Ruby is unable to handle hyphen in a symbol name.

I just fixed chardin.js to change data-intro and data-position to data_intro and data_position to workaround the issue.

I hope the creator would apply the fix to the source some day.

Best regards,

Some UX considerations

I just recently tried this on a project and simply loved the idea. I have a couple of UX considerations, which I think might be useful. I'd be happy to help in anyway I can.

Numbers - If I have 3 or more items, the user's eyeballs are going to be everywhere. It would help to add numbers to each of these either through markup or via CSS and have them styled differently, so it helps the users
A call to action button would be nice - that says I got it. I know the demo has one but in general, maybe have a button to turn it off in the bottom right? So users can go through everything and click "I got it" at the end
Staggered animation based on importance. This one's a stretch but maybe using it with velocity js would help. It would be awesome if 3 of my tooltips (or chardins or whatever you call them) would pop one after the other so I can again guide my users through all the text. I'll add a codepen for what I am saying over the weekend.

Thanks for the great tool!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Highlight a commented element

Hi,

I think that the css class .chardinjs-show-element is added to a selected element.
I the example page, the element is on top of the overlay (due to z-index).
In my case, this is not working, the overlay recover the element.

I did not change the css. I use Bootstrap 3, but I don't think that it can be the reason.

Moreover, in the example page, the h1 title "Chardin.js"'s color changes when the overlay is showed.
Also the "Baked with <3 by @heelhook." in the footer.
How can I apply a new class when the overlay is showed ? ?

Regards,
Ben

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Demo doesn't work anymore

Yiedls an error, i guess it's just a matter of removing replacing "http://" by "//" on the file path

Mixed Content: The page at 'https://heelhook.github.io/chardin.js/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Montserrat:400,700'. This request has been blocked; the content must be served over HTTPS.

add markdown

ability to add markdown as the text would be awesome.

Elements set with translate

Greetings.

I have elements set with translate.

Chrome: -webkit-transform: translate3d(772px, 279px, 0px)
Firefox: transform: translate(392px, 1634px);

How can chardin be modified to find elements this way?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Cookie integration

Related to my previous issue. I think a good feature to add would be a "don't show this again" cookie option. On start, generate a link or checkbox that says "Don't show this again". If clicked, it creates a cookie that prevents the Chardin overlay from triggering on that page in the future.

Chardin in a loop

With a loop every input field will have a data-intro and data-position. Resulting in an overkill of the same values. Is there a way to counter this by picking only the data-intro and data-position of the first element?

$value){?>

chardinJs('start') only working for some containers

I am able to start Chardin on body or on the first bootstrap col-xx-y container of my document, but whenever I try to do something like

$('.some-div').chardinJs('start');

it seems Chardin actually appends the instructions to the page but with no style and no position at all. Basically the instruction block is put all the way to the right of the page and a horizontal scrolling bar appears. The same instruction block is displayed correctly only if I call chardinJs('start') on a higher level container such as body.

Are there any restrictions regarding the containers that can be used in the Chardin selector?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Naming Conventions?

Why are you putting JS as part of the name of your code? chardinjs.css and chardinjs.js is rather impractical. As is $.fn.chardinJs, no?

Enhancement proposal: customizable offset

Before actually modifying code & creating PR, would like to hear your opinion, whether this feature is needed.
You can see the result here:
http://plnkr.co/edit/LRKZBZvZhihKsf6BNmyj?p=preview

Semi-transparent overlay doesn't fade out in Chrome.

It would be nice if this was a smooth transition.

Screencast: http://screencast.com/t/A776WvRAt (apologies for the framerate)

Console shows no errors.

Overlap and overhang

Depending on positioning and screen size, sometimes the intro texts will overlap each other or hang over the edge of the page. Could you add logic to check for that before placing the intros? Thanks.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Overlay offset not affected by Reddit Companion toolbar, but page content is.

See to the following image:

As you can see, the toolbar pushes the page content down, but not the overlay. I don't know if this is an issue with the toolbar or the overlay, but I've submitted this issue to both to ensure that neither breaks similar scripts or extensions.

Helper layer top padding should be margin?

When using data-position="top" the little line is not padded above the element it gives tip for:

I fix this by changing &.chardinjs-top { border-top: solid white 1px; padding-top: 10px; } to &.chardinjs-top { border-top: solid white 1px; margin-top: -10px; } and voilà:

I haven't seen any side-effects yet, but I haven't tested it too much either.

Firefox and IE problem with fading when adobe flash plugin loads on page

Hi, I am using this plugin: http://www.fusioncharts.com/ on my page.

When using chardin.js and my flash plugins loads I have problem with fading out:

This is how flash plugins appear on Firefox and IE:
http://i.imgur.com/v0m6oAQ.png

In Chrome it works well.

Any suggestions?

Problem with initiating for specific element

see http://jsfiddle.net/vPnr6/

Using events is unclear

I don't understand how to use the start and stop events with this plugin. I am trying to create a button that only shows while the Chardin overlay is active. On the "stop" event, I want to hide it. How do I do this?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Bower Support

👍

Is there a way to make it mobile responsive?

Hello everyone. I have been looking for quite some time an overlay instructions script to use for an upcoming project.

I am wondering if it can be made responsive down to mobile screen size; what I mean is turn the left or right side tooltips to top and bottom when it reaches mobile screen size.

Moreover, is there any way to replace the borders with an image (like arrows?)

Thanks in advance for any help I get on this :)

Open again does not work in firefox

The "Open again" link does not re-open the overlay in Firefox 19 (Tested on Kubuntu Linux, various other people on HN discussion have reported same issue with Firefox 19 and 20)

Item Overlap

Awesome plugin!

Is there a possibility for either an option or built-in functionality that would detect collision with fellow instruction blocks and shift the tip accordingly? http://screencast.com/t/nMV0y9Lcas

Or maybe a simple user-defined left/right offset, instead of centering the stem and message each time? Being able to shift to something more like this could prove useful as well: http://screencast.com/t/74AGuR4uZkxu

Thanks!

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/1129998-item-overlap?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

*[data-intro] is a 'heavy' css query. Can I give you a list?

First of all, I like the tool. It looks great!

But I'm concerned with one thing. *[data-intro] is a 'heavy' css query. It's not optimised for speed. When you have a big page with a lot of elements. Things will be slowed down.

Instead of that, can I give you list? Like:

var list = [
    {
        target: '.jumbotron img',
        intro: 'An awesome 18th-century painter, who found beauty in everyday, common things.',
        position: 'right'
    },
    {
        target: '.jumbotron .btn',
        intro: 'This button toggles the overlay, you can click it, even when the overlay is visible',
        position: 'left'
    },
    {
        target: '.jumbotron .credits p',
        intro: 'Author of this plugin, aka Pablo Fernandez',
        position: 'right'
    },
]

$('body').chardinJs(list);
$('body').chardinJs('start');

That would be awesome. Now I even can pre-i18n it.

Big thanks

Selector instead of "body" doesn't work

Hi, thanks for this awesome plugin.

I've tried to use it on a specific container (let's say a spanX on bootstrap) and it doesn't work. I've an error line 74 :
t={
width:e.offsetWidth,
height:e.offsetHeight
}

A quick console.log on 'e' show me that 'e' is undefined.

Best.

Element with z-index and position doesn't appear above overlay

When the element to highlight has both a z-index and either position relative or absolute, it doesn't rise above the overlay.

Reproduced here: http://jsfiddle.net/wAUKV/

Chardin.js and Intro.js conflict in data-intro attribute use

Both Chardin.js and Intro.js use the data-intro attribute.

I would like to have a walk-thru for first use with Intro.js and a separate help overlay using chardin.js. It is hokey to have the help file be a walk-thru and it is hokey to have the help overlay popup on first use without a walk thru. It seems to me that both have their place.

Unfortunately they both use the same attribute: data-intro

So I can't use them both wiithout changing one or the other. I would change chardin.js to use data-help instead of data-intro. Chardin.js is more of a help file overlay while intro.js is more of an intro and walk-thru on first use tool. So data-intro makes more sense for Intro.js.

I see how I can change this easy enough myself if I branch chardin.js. I just thought someone might have some feedback on this.

Changing this would break everyone who currently uses chardin.js. If I were to provide a pull request, it wouldn't be pulled.

So perhaps the solution would be to default to data-intro but allow for the attribute to be changed at load time.

Thoughts?

Plain Js version

Is there a jQuery free version? Thanks

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/24247856-plain-js-version?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

Extending plugin methods somehow?

Hey,

I'm not sure that you'll respond to this, but I figured it was worth a shot.
Essentially, I'm looking to add classnames to the tooltips that mirror the classnames (or ids) of the elements to which they pertain. This is the line I'd be looking to change.

I'm not primarily a JS developer -- spent more time with PHP and Java -- so I'm a bit uncertain how to go about this (or, indeed, if I can). It looks like a new chardinJs is being created and subsequently stored as a data attribute on the body class.

Is there a way I can add a new (or modify an existing) method without forking your plugin, or should I just fork it and hope for the best? Would be quite interested in a short technical explanation, athough -- realistically -- any answer would be appreciated.

White line overlaps a button that doesn't have any text

If you use a button without any text (e.g. use the dev tools in chrome to remove the text from the "See it in action" button on http://heelhook.github.io/chardin.js/) and then show the overlay - the white line isn't positioned correctly - see attachment

How can I get around this?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/26354902-white-line-overlaps-a-button-that-doesn-t-have-any-text?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

Overlay only appears when window is resized in Chrome

In Chrome Version 33.0.1750.117 and OSX 10.9.1 (both latest) the overlay only appears when the window is resized. This also happens in the main chardin demo.

Namespace the data attributes?

I have noticed this a lot with JavaScript libraries that use the HTML data attributes.

None of them do anything resembling "namespacing" and chardin appears to be the same.

Could we have something like data-ch-intro and data-ch-position instead of the current ones which could clash in future?

Only a few extra keystrokes and could prevent problems in the future.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Why there is gemfile in your chardin.js repo?

not working on bootstrap modal window

When I try it on a bootstrap modal window it does not work. The positioning is wrong and the elements are not going to be highlighted.

I do it like that

$('#modal-id').chardinJs('toggle');

where modal-id is defined as

<div class="modal fade" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="modal-id-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                ...
            </div>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

Targeting a lightbox

I need to target a lightbox that has a fixed position and z-index to the center of a page with other chardin elements, but I only want them displayed for the lightbox.

Currently I can fire a chardinjs start from the body to show all overlay elements, but when I target the lightbox I get an unhelpful console error:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

I'd like to only start chardin for the child elements of the selector, is this possible?
ex: $('.the-lightbox').chardinJS('start')

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/1129916-targeting-a-lightbox?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

remove white line and distance distance line

i want to remove white line and distance distance line , how can i do it

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/26353008-remove-white-line-and-distance-distance-line?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

Elements with overflow: hidden that contain very tall elements

When you apply Chardin to something like this.

< div id="wrapper" style="overflow:hidden; height: 350px;" data-intro="Stuff" data-position="right">
< div id="content" style="height: 100000px">< /div>
< /div>

It creates a line as tall as the hidden element. It also causes some other issues when scrolling the page such as causing the text to disappear.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

text over text

any ideas for fix this?

Option to disable interaction with focused element

via a transparent overlay for instance.

pablof7z / chardin.js Goto Github PK

chardin.js's People

Contributors

Stargazers

Watchers

Forkers

chardin.js's Issues

Hey, maintainer(s) of heelhook/chardin.js!

Recommend Projects

Recommend Topics

Recommend Org