Document scopeQuery helper method

[harshkhandeparkar]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

To Do: There is an open pr #710 which adds a helper method called scopeQuery to image-sequencer demo code. You have to document it in the CONTRIBUTING.md file.

📋 Step by Step

• 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

• 📝 Update the file CONTRIBUTING.md in the image-sequencer repository (press the little pen Icon) and edit the line as shown below.

Add a new part to the table-of-contents here

image-sequencer/CONTRIBUTING.md

Lines 10 to 14 in c645732

	* [README.md](https://github.com/publiclab/image-sequencer)
	* [Contributing Modules](#contributing-modules)
	* [Info File](#info-file)
	* [Ideas](#Contribution-ideas)

Add a new section to the CONTRIBUTING.md file about UI helper methods after these lines

image-sequencer/CONTRIBUTING.md

Lines 344 to 348 in c645732

	"inputs": {
	}
	}
	});
	```

Describe the helper method scopeQuery based on the information provided in the pr #710. This PR explains everything including the returned value and a description of the helper method, the available methods and an example about how to use it. You can put this in your own words. Make sure to include example code snippets. If you need help on how to do something, do not hesitate to ask.

see this page for some help in taking your first steps!

Below is a "diff" showing in red (and a -) which lines to remove, and in green (and a +) which lines to add:

On line 14 and 15

+ * [UI Helper Methods](#ui-helper-methods)
+ 

At the end, after line 348, add

+ ## UI Helper Methods
+ ### scopeQuery
+ ###### Path: `/examples/lib/scopeQuery.js`
+ [Add some description text here]
+ 
+ #### Methods Of The Returned Object
+ * elemAll(): [description]
+ * elem(): [description]
+ * [Etc.]
+ #### Usage
+ [Give an example of usage here]
+
+ ```js
+ [Add code snippet here]
+ ```

Everything required to be documented is available in the pr #710. Please go through it to get the information and as in the comments below if you have any doubts.

• 💾 Commit your changes
• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• 🏁 Done Ask in comments for a review

Please keep us updated

💬⏰ - We encourage contributors to be respectful to the community and provide an update within a week of claiming a first-timers-only issue. We're happy to keep it assigned to you as long as you need if you update us with a request for more time or help, but if we don't see any activity a week after you claim it we may reassign it to give someone else a chance. Thank you in advance!

If this happens to you, don't sweat it! Grab another open issue.

Is someone else already working on this?

🔗- We encourage contributors to link to the original issue in their pull request so all users can easily see if someone's already started on it.

👥- If someone seems stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

🤔❓ Questions?

Leave a comment below!

[harshkhandeparkar]

This issue is reserved for @An0u. You can resolve this at any time. Just let us know that you want to work on this. Issue #884 is reserved for @Jaya738 but you two can exchange issues if both agree. If you have any doubts, we are ready to help. Thank you!

[harshkhandeparkar]

If a newcomer wants to solve an issue, they can get their name added to the list in #842

[harshkhandeparkar]

This issue has been reassigned to @hodbadger on request. @An0u can solve #894

[harshkhandeparkar]

@hodbadger welcome!! You can resolve this issue. This one is reserved for you. Just let us know in the comments if you want to solve this.

[vaarigupta]

@harshkhandeparkar . Hello, This is Vaari gupta. I would like to work on this issue.

[harshkhandeparkar]

Hello and welcome! Sorry but this is reserved for @hodbadger. I will add your name to the list in #842. Are you good with something not related to documentation? Or do you specifically want a documentation issue? I might open a new issue tonight. You will have to wait for it. It will be reserved for you.

[hodbadger]

@hodbadger welcome!! You can resolve this issue. This one is reserved for you. Just let us know in the comments if you want to solve this.

Great! I'll solve it.

[harshkhandeparkar]

Cool!

[hodbadger]

I went through the information in #710 but I didn't find any description of the two methods of the returned object - elem() and elemAll(). Can you help me with that - what do they do?

[harshkhandeparkar]

elem() is for selecting elements inside the scope, it is just a jquery selector but one which can be chained and elemAll selects all the instances instead of one it. It is like document.querySelector() and document.querySelectorAll().
E.g if your scope is a div element with id="container". And you have other divs in it with ids, "1", "2", "3" and all of them have a class of "child". This will happen.

var $step = require('./scopeQuery').scopeSelector(document.getElementById('container');

$step('#1'); // returns div with id 1
$step('#1').hide().elemAll('.child').fadeOut(); // abruptly hides div with id 1 and fades out all other divs

These two methods are chainable and will always returs elements from inside the scope.
I hope this helps 😊

[hodbadger]

Yes, thanks :)

[hodbadger]

I've just created a pull request. Is there anything else I have to do?

[harshkhandeparkar]

Nope. The PR will be reviewed soon.