Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
33 changes: 33 additions & 0 deletions collapse-test.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
Instead of connecting to a real backend API or web service, we’ll use [can-fixture fixtures]
to “mock” an API. Whenever an [AJAX](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
request is made, the fixture will “capture” the request and instead respond with mock data.

> **Note:** if you open your browser’s Network panel, you will *not* see any network requests.
> You can see the fixture requests and responses in your browser’s Console panel.

How fixtures work is outside the scope of this tutorial and not necessary to understand to continue,
but you can learn more in the [can-fixture] documentation.

## Defining a custom element with CanJS

We mentioned above that CanJS helps you define custom elements. We call these [can-component components].

Add the following to the **JS** tab in your CodePen:

```js
// Creates a mock backend with 3 todos
import { todoFixture } from "//unpkg.com/can-demo-models@5";
todoFixture(3);

import { Component } from "//unpkg.com/can@5/core.mjs";

Component.extend({
tag: "todos-app",
view: `
<h1>Today’s to-dos</h1>
`,
ViewModel: {
}
});
```
<span line-highlight='2-7,9-14,only'/>
9 changes: 6 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,14 @@ var getConfig = function(lineString, lineCount) {
return typeof val === 'number' && !isNaN(val);
})
;

if (range[0] > current + padding) {
collapse.push(current + '-' + (range[0] - 1 - padding));
var collapseEnd = (range[0] - 1 - padding);
if (collapseEnd !== current) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cherifGsoul can you explain this logic change? Would this show the lines between a set of highlights like:

@highlight 1-3,33-55

range[0] > current + padding would be true when range[0] is 33

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@justinbmeyer The logic is to compare the first line and the last line of collapsible:

  • Using current which is initialized to 1 or calculated in this expression at the end of the loop current = (range[1] || range[0]) + padding + 1
  • In each iteration of the loop collapseEnd is calculated based on the first item range[0] of the new range of line highlight collapseEnd = (range[0] - 1 - padding)

In short:
current = currentRange[1] + 1 + padding
next = nextRange[0] - 1 - padding

next - current should be greater than 1 to make a collapsible

So for @highlight 1-3,33-55 we have a collapsible between [7, 29] and it shows only the 3 lines for padding between highlights:
current = 3 + 1 + 3 // => start collapsible from line 7
next = 33 - 1 - 3 // => close collapsing at the line 29

collapse.push(current + '-' + collapseEnd);
}
}

current = (range[1] || range[0]) + padding + 1;
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"prismjs": "^1.11.0"
},
"devDependencies": {
"bit-docs-generate-html": "^0.1.0",
"bit-docs-generate-html": "^0.15.0",
"connect": "^2.14.4",
"mocha": "^2.5.3",
"zombie": "^4.3.0"
Expand Down
34 changes: 34 additions & 0 deletions test.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,38 @@ describe("bit-docs-html-highlight-line", function() {
}, done);
}, done);
});

it("dosen't show expand button for one line code", function(done) {
this.timeout(60000);

var docMap = Promise.resolve({
index: {
name: "index",
demo: "path/to/demo.html",
body: fs.readFileSync(__dirname+"/collapse-test.md", "utf8")
}
});

generate(docMap, {
html: {
dependencies: {
"bit-docs-html-highlight-line": __dirname
}
},
dest: path.join(__dirname, "temp"),
parent: "index",
forceBuild: true,
debug: true,
minifyBuild: false
}).then(function() {
open("index.html",function(browser, close) {
var doc = browser.window.document;
var collapseCodes = doc.querySelectorAll('pre[data-collapse] code');
assert.equal(collapseCodes.length, 0);
close();
done();
}, done);
}, done)

});
});