This repository was archived by the owner on Dec 22, 2020. It is now read-only.
Bump fix mnor issues and new features 3.6.0 #130
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixed based on original RG 3.5.0 code.
There seems to be an issue where the current day number gets highlighted on every month.
There is still a minor issue on the default action of dismissed, a single instance of rg-alert, correctly, by default, has dissmissable set to TRUE. However, you must explicitly set it true manually for the rg-alerts list version. Syntax and features are the same as 3.5.0. Timeout works in both cases. Animations will be added later.
Adds functionality for footers etc.
Example usage:
... HTML:
<rg-drawer subheading="Something or other" position="bottom">
The <b>contents</b> of my own special drawer.
</rg-drawer>
<br / />
Some random text.
</div>
--- SCRIPT:
var tags = riot.mount('rg-drawer', {
header: "My Drawer Title",
items : [
{text: "items 1"},
{text: "Items 2"}
],
footer:{
items : [
{text: "Press 1"},
{text: "Press 2"}
]
}
});
Example usage:
--- HTML:
<rg-alert text="Something you need to know" dismissable=false timeout=5000 type="info"></rg-alert>
<br / />
<rg-alerts></rg-alerts>
-- SCRIPT:
var tags = riot.mount('rg-alert');
var tags = riot.mount('rg-alerts', {
alerts: [{
type: 'brand',
text: 'Look! Something you should know about.'
}, {
type: 'warning',
text: 'Warning! You can\'t remove this alert.',
dismissable: false
}, {
type: 'success',
text: 'Success! Well done. This alert will disappear in 10 seconds',
timeout: 10000
}, {
type: 'error',
text: 'Error! Something bad happened. ',
dismissable: true
}]
});
Planning on removing image dependency and us a CDN icon font source for the images. As yet, still doesn't work.
Changes from 3.50 - removed the include. prefix the to options. Options are: url: text path to file. unsafe: boolean. If set to true, it will parse the file as HTML regardless of errors.
Example:
---HTML:
<rg-include url="demo.html"></rg-include>
--- SCRIPT:
var tags = riot.mount('rg-include', {unsafe: true});
Usage: <rg-map apikey="AIzaSyBKr4u-Jc62XttAAZT-wewCltAtPtEB3jA" lat="53.806" lng="-1.535" zoom="18"></rg-map> The only parameter you MUST enter is the API key. The rest are normal Google Map JSON data. In the tag object you can enter: * lat/long * tilt * heading * zoom For any more parameters, you need to pass the Google Maps JSON object when you mount the tag. Please note: at the moment, it's only possible to have one map per page.
Usage: <rg-map apikey="[YOUR GOOGLE MAPS API KEY]" lat="53.806" lng="-1.535" zoom="18"></rg-map> The only parameter you MUST enter is the API key. The rest are normal Google Map JSON data. In the tag object you can enter: * lat/long * tilt * heading * zoom For any more parameters, you need to pass the Google Maps JSON object when you mount the tag. Please note: at the moment, it's only possible to have one map per page.
Usage:
1) <rg-markdown>**testing** content _creation_ again</rg-markdown>
2) <rg-markdown content="**testing** content _creation_ again x 2"></rg-markdown>
3) riot.mount('rg-markdown', {markdown: {content: '**Some** _more_ content', url: 'helptext.md'} });
Dependency Note: requires inclusion of commonmark.min.js
Usage:
<rg-modal heading="Hello Modal World">Body of modal dialog</rg-modal>
<script>
riot.mount('rg-modal', {
modal: {
isvisible: true,
dismissable: true,
heading: 'Modal heading',
buttons: [{
text: 'Ok',
type: 'brand',
action: function() {}
}, {
text: 'Cancel',
type: 'warning',
action: function() {}
}]
}
});
</script>
Adds functionality for footers etc.
Example usage:
... HTML:
<rg-drawer subheading="Something or other" position="bottom">
The <b>contents</b> of my own special drawer.
</rg-drawer>
<br / />
Some random text.
</div>
--- SCRIPT:
var tags = riot.mount('rg-drawer', {
header: "My Drawer Title",
items : [
{text: "items 1"},
{text: "Items 2"}
],
footer:{
items : [
{text: "Press 1"},
{text: "Press 2"}
]
}
});
Includes features to autoload dependencies from CDN sources. Especially for rg_date (momentjs), rg_markdown (markdownit). You can still import the dependencies, if it finds the required objects are there, it carries on, if not, it will load them from CloudFlare CDN, which means the web page needs online access for those components at least.
Usage: HTML: <rg-phone-sim url="http://riotjs.com"><rg-phone-sim> Script: var tags = riot.mount('rg-phone-sim', { phonesim: { url: 'http://riotjs.com/' } })
HTML:
<rg-toggle></rg-toggle>
<rg-toggle text="Average White Band"></rg-toggle>
<rg-toggle type="info" checked=true></rg-toggle>
<rg-toggle text="Average White Band" type="success" checked=false></rg-toggle>
Script:
var tags = riot.mount('rg-toggle', {
toggle: {
text: 'My Thang',
type: 'success',
checked: false
}
})
tags[0].on('toggle', function (checked) { console.log("state", checked) })
Note! Depends on rg-utils.js.
HTML:
<rg-select></rg-select>
<rg-select filter="true"></rg-select>
<rg-select filter=true></rg-select>
Script:
var tags = riot.mount('rg-select', {
select: {
placeholder: 'Please select a card',
filter: 'text', // <-- this enables filtering on the 'text' property
options: [{
id: 0,
text: 'Visa'
}, {
id: 1,
text: 'MasterCard'
//selected: true
}, {
id: 2,
text: 'American Express'
}, {
id: 3,
text: 'Discover'
}]
}
})
tags[0].on('open', function () {console.log("open") })
.on('close', function () { console.log("close") })
.on('select', function (item) { console.log("item=", item) })
Note! Depends on rg-utils.js
HTML:
<rg-tags></rg-tags>
<rg-tags type="error"></rg-tags>
<rg-tags type="error" filter=true></rg-tags>
<rg-tags type="error" placeholder="Nyah! Nyah! Na Na Na!"></rg-tags>
Script:
var tags = riot.mount('rg-tags', {
tags: {
type: "brand",
placeholder: 'Choose a country',
filter: 'text', // <-- this enables filtering on the 'text' property
options: [{
text: 'England',
type: 'info'
}, {
text: 'Scotland',
}, {
text: 'Ireland',
type: 'warning'
}, {
text: 'Wales',
type: 'success'
}],
tags: [{
text: 'United States',
}]
}
})
tags[0].on('open', function () { console.log("open") })
.on('close', function () { console.log("close") })
.on('select', function (item) { console.log("select", item) })
Note! Depends on rg-utils.js
HTML:
<rg-select></rg-select>
<rg-select filter="true"></rg-select>
<rg-select filter=true></rg-select>
Script:
var tags = riot.mount('rg-select', {
select: {
placeholder: 'Please select a card',
filter: 'text', // <-- this enables filtering on the 'text' property
options: [{
id: 0,
text: 'Visa'
}, {
id: 1,
text: 'MasterCard'
//selected: true
}, {
id: 2,
text: 'American Express'
}, {
id: 3,
text: 'Discover'
}]
}
})
tags[0].on('open', function () {console.log("open") })
.on('close', function () { console.log("close") })
.on('select', function (item) { console.log("item=", item) })
Note! Depends on rg-utils.js
HTML:
<rg-select></rg-select>
<rg-select filter="true"></rg-select>
<rg-select filter=true></rg-select>
Script:
var tags = riot.mount('rg-select', {
select: {
placeholder: 'Please select a card',
filter: 'text', // <-- this enables filtering on the 'text' property
options: [{
id: 0,
text: 'Visa'
}, {
id: 1,
text: 'MasterCard'
//selected: true
}, {
id: 2,
text: 'American Express'
}, {
id: 3,
text: 'Discover'
}]
}
})
tags[0].on('open', function () {console.log("open") })
.on('close', function () { console.log("close") })
.on('select', function (item) { console.log("item=", item) })
Note! Depends on rg-utils.js
HTML:
<rg-toggle></rg-toggle>
<rg-toggle text="Average White Band"></rg-toggle>
<rg-toggle type="info" checked=true></rg-toggle>
<rg-toggle text="Average White Band" type="success" checked=false></rg-toggle>
Script:
var tags = riot.mount('rg-toggle', {
toggle: {
text: 'My Thang',
type: 'success',
checked: false
}
})
tags[0].on('toggle', function (checked) { console.log("state", checked) })
All tags with 3.6.0 are tested and ready. Anything with 3.5.9 release is still buggy. 3.5.0 code - e.g. charts works as advertised and has not been updated yet.
This code has useful functions and constants, used by tags that auto-load dependencies (rg-date, rg-credit-card, rg-markdown). The toBoolean function is used by tags: rg-select, rg-tags, rg-toggle), it eases the handling of parameters to the tag that need to be treated as boolean in the code.
adavie1
changed the title
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updated many bugs and dependencies.