View copyToClipboard.js
const copyToClipboard = str => { | |
const el = document.createElement('textarea'); // Create a <textarea> element | |
el.value = str; // Set its value to the string that you want copied | |
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof | |
el.style.position = 'absolute'; | |
el.style.left = '-9999px'; // Move outside the screen to make it invisible | |
document.body.appendChild(el); // Append the <textarea> element to the HTML document | |
const selected = | |
document.getSelection().rangeCount > 0 // Check if there is any content selected previously | |
? document.getSelection().getRangeAt(0) // Store selection if found |
View copyToClipboard.js
const copyToClipboard = str => { | |
const el = document.createElement('textarea'); | |
el.value = str; | |
el.setAttribute('readonly', ''); | |
el.style.position = 'absolute'; | |
el.style.left = '-9999px'; | |
document.body.appendChild(el); | |
el.select(); | |
document.execCommand('copy'); | |
document.body.removeChild(el); |
View copyToClipboard.js
const copyToClipboard = str => { | |
const el = document.createElement('textarea'); | |
el.value = str; | |
document.body.appendChild(el); | |
el.select(); | |
document.execCommand('copy'); | |
document.body.removeChild(el); | |
}; |
View index.json
{ | |
"lang": "en", | |
"title": "Index", | |
"stylesheets": ["./css/style.css"], | |
"scripts": ["./js/main.js"], | |
"charset": "utf-8", | |
"description": "This is a page", | |
"keywords": "page, sample", | |
"author": "None", | |
"favicon": "./images/favicon.png", |
View card-basic-syntax.json
{'code': '<div class="row">\r\n' | |
' <div class="card">\r\n' | |
' <div class="section">\r\n' | |
' <h3>Card Title</h3>\r\n' | |
' <p>Card content...</p>\r\n' | |
' </div>\r\n' | |
' </div>\r\n' | |
' <div class="card">\r\n' | |
' <div class="section">\r\n' | |
' <h3>Card Title</h3>\r\n' |
View App.jsx
<input type="search" className="searchBox" onChange={event => { | |
if(event.currentTarget.value) this.searchPost(event.currentTarget.value); | |
else this.viewAll(); | |
}}/> |
View reducer.js
const posts = (state = {data: [], selected: []}, action) => { | |
let posts = {data: [], selected: []}; | |
switch(action.type){ | |
case VIEW_ALL: | |
Object.assign(posts.data, state.data); | |
posts.selected = []; | |
return posts; | |
case SEARCH_POST: | |
Object.assign(posts.data, state.data); | |
let search = new JsSearch.Search('date-added'); |
View App.jsx
// Import necessary packages... | |
class App extends Component { | |
// Constructor and methods... | |
// Mounting the component causes an action | |
componentDidMount(){ | |
fetch("https://jsonbin.io/b/59f721644ef213575c9f6531") | |
.then( response => response.json()) | |
.then( data => { | |
let posts = { |
View render.jsx
let posts = '', postLinks = ''; | |
if(this.state.posts && this.state.posts.data){ | |
posts = this.state.posts.data.map(post => {return <Post post={post} key={"post_"+post.id}/>;}); | |
postLinks = this.state.posts.data.map(post => {return <a href={"#"+post.id} key={"post_link_"+post.id} className="button">{post.title}</a>}) | |
} |
View App.js
componentDidMount(){ | |
fetch("https://jsonbin.io/b/59f721644ef213575c9f6531") | |
.then( response => response.json()) | |
.then( data => { this.setState({posts: data})}); | |
} |
NewerOlder