Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add code type in code blocks for syntax highlighting #45

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add code type in code blocks for syntax highlighting #45

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions Tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Other resources:

Let’s start with a contrived use case that illustrates the basics of using Mutation Summary: An imaginary micro-format, called “hTweet”. The purpose of hTweet is so that page authors can annotate any section of their pages with a hash-tag that is most-likely relevant, like so:

```
```html
<span data-h-tweet=”#beiber”>Isn’t Justin dreamy?</span>
```

Expand All @@ -23,7 +23,7 @@ Our extension probably wants to know when:

In order to do this, we’d create a `MutationSummary` object like this:

```
```javascript
var observer = new MutationSummary({
callback: handleHTweetChanges,
queries: [{ attribute: 'data-h-tweet' }]
Expand All @@ -34,7 +34,7 @@ This creates a new `MutationSummary` that begins observing the entire document i

Now, whenever any of the above three things have happened, `MutationSummary` will invoke our `handleHTweetChanges` and pass as the only argument an array containing a summary of changes for each query that was requested. We might implement `handleHTweetChanges` like this:

```
```javascript
function handleHTweetChanges(summaries) {
var hTweetSummary = summaries[0];

Expand Down Expand Up @@ -64,7 +64,7 @@ A couple things to note at this point:

Let's look at another hypothetical example inspired by the requirements of real-world widget libraries like Dojo Widgets. Let’s say we’re creating a UI widget library that allows its widgets to be declared and configured in HTML:

```
```html
<div data-widget=”fancyButton”
data-widget-theme=”midnight”>Click Me!</div>
```
Expand All @@ -73,7 +73,7 @@ Our library will probably want to look for all such elements in the page when it

But our library also wants to respond to new widgets that appear in the page, possibly created by script or a templating library. In order to accomplish this, we’d create an [element query](APIReference.md#the-element-query) like this:

```
```javascript
var observer = new MutationSummary({
callback: updateWidgets,
queries: [{
Expand All @@ -84,7 +84,7 @@ var observer = new MutationSummary({

Here's what the `updateWidgets` function might look like:

```
```javascript
function updateWidgets(summaries) {
var widgetSummary = summaries[0];
widgetSummary.added.forEach(buildNewWidget);
Expand All @@ -96,7 +96,7 @@ The [element query](APIReference.md#the-element-query) instructs the `MutationSu

But doesn’t our widget library also want to respond correctly when an existing widget changes its type or theme? It does, and it can:

```
```javascript
var observer = new MutationSummary({
callback: updateWidgets,
queries: [{
Expand All @@ -108,7 +108,7 @@ var observer = new MutationSummary({

The optional `elementAttributes` property is just a space-separated list of attribute names and it asks the `MutationSummary` to report changes to the value of those attributes on elements matching the element string that have stayed in the document. Now our `updateWidgets` might look like this:

```
```javascript
function updateWidgets(summaries) {
var widgetSummary = summaries[0];
widgetSummary.added.forEach(buildNewWidget);
Expand All @@ -122,7 +122,7 @@ function updateWidgets(summaries) {

Let’s add one more complication: Say our widget library also allows in-line handling of events that its widgets can emit via a script element with a special type attribute:

```
```html
<div data-widget=”autocomplete”>
<script type=”widget/event-handler” data-event=”selectionMade”>
// Handle the user navigating over a autocomplete suggestion
Expand All @@ -133,7 +133,7 @@ Let’s add one more complication: Say our widget library also allows in-line ha

Now our widget library wants to listen to two distinct kinds of things. Mutation Summary allows this by supporting multiple queries:

```
```javascript
var observer = new MutationSummary({
callback: updateWidgets,
queries: [{
Expand All @@ -148,7 +148,7 @@ var observer = new MutationSummary({

and our handler would now look like this:

```
```javascript
function updateWidget(summaries) {
var widgetSummary = summaries[0];
var scriptHandlerSummary = summaries[1];
Expand All @@ -166,4 +166,4 @@ If your page uses multiple libraries that do different things (say a UI widget l
# Learning More #

* Refer to the [API Reference](APIReference.md) document -- in particular to learn about the two other types of queries: [characterData](APIReference.md#the-characterdata-query) and [all](APIReference.md#the-all-query).
* Examine the [PageMirror](examples/pagemirror_extension) extension which shows how to use the all query and the included TreeMirror utility class to fully mirror the contents of a document.
* Examine the [PageMirror](examples/pagemirror_extension) extension which shows how to use the all query and the included TreeMirror utility class to fully mirror the contents of a document.