diff --git a/examples/animation-stream/flowers.jpg b/examples/animation-stream/flowers.jpg deleted file mode 100644 index e604fbdd..00000000 Binary files a/examples/animation-stream/flowers.jpg and /dev/null differ diff --git a/examples/animation-stream/mosaic-stream.html b/examples/animation-stream/mosaic-stream.html deleted file mode 100644 index ad8d7d18..00000000 --- a/examples/animation-stream/mosaic-stream.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Mosaic - - - -
- - - - - diff --git a/examples/animation/flowers.jpg b/examples/animation/flowers.jpg deleted file mode 100644 index e604fbdd..00000000 Binary files a/examples/animation/flowers.jpg and /dev/null differ diff --git a/examples/animation/mosaic.html b/examples/animation/mosaic.html deleted file mode 100644 index 4e4abba0..00000000 --- a/examples/animation/mosaic.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Mosaic - - - -
- - - - diff --git a/examples/dbmonster/ENV.js b/examples/dbmonster/ENV.js deleted file mode 100644 index c5ee65b5..00000000 --- a/examples/dbmonster/ENV.js +++ /dev/null @@ -1,211 +0,0 @@ -var ENV = ENV || (function() { - - var first = true; - var counter = 0; - var data; - var _base; - (_base = String.prototype).lpad || (_base.lpad = function(padding, toLength) { - return padding.repeat((toLength - this.length) / padding.length).concat(this); - }); - - function formatElapsed(value) { - str = parseFloat(value).toFixed(2); - if (value > 60) { - minutes = Math.floor(value / 60); - comps = (value % 60).toFixed(2).split('.'); - seconds = comps[0].lpad('0', 2); - ms = comps[1]; - str = minutes + ":" + seconds + "." + ms; - } - return str; - } - - function getElapsedClassName(elapsed) { - var className = 'Query elapsed'; - if (elapsed >= 10.0) { - className += ' warn_long'; - } - else if (elapsed >= 1.0) { - className += ' warn'; - } - else { - className += ' short'; - } - return className; - } - - function countClassName(queries) { - var countClassName = "label"; - if (queries >= 20) { - countClassName += " label-important"; - } - else if (queries >= 10) { - countClassName += " label-warning"; - } - else { - countClassName += " label-success"; - } - return countClassName; - } - - function updateQuery(object) { - if (!object) { - object = {}; - } - var elapsed = Math.random() * 15; - object.elapsed = elapsed; - object.formatElapsed = formatElapsed(elapsed); - object.elapsedClassName = getElapsedClassName(elapsed); - object.query = "SELECT blah FROM something"; - object.waiting = Math.random() < 0.5; - if (Math.random() < 0.2) { - object.query = " in transaction"; - } - if (Math.random() < 0.1) { - object.query = "vacuum"; - } - return object; - } - - function cleanQuery(value) { - if (value) { - value.formatElapsed = ""; - value.elapsedClassName = ""; - value.query = ""; - value.elapsed = null; - value.waiting = null; - } else { - return { - query: "***", - formatElapsed: "", - elapsedClassName: "" - }; - } - } - - function generateRow(object, keepIdentity, counter) { - var nbQueries = Math.floor((Math.random() * 10) + 1); - if (!object) { - object = {}; - } - object.lastMutationId = counter; - object.nbQueries = nbQueries; - if (!object.lastSample) { - object.lastSample = {}; - } - if (!object.lastSample.topFiveQueries) { - object.lastSample.topFiveQueries = []; - } - if (keepIdentity) { - // for Angular optimization - if (!object.lastSample.queries) { - object.lastSample.queries = []; - for (var l = 0; l < 12; l++) { - object.lastSample.queries[l] = cleanQuery(); - } - } - for (var j in object.lastSample.queries) { - var value = object.lastSample.queries[j]; - if (j <= nbQueries) { - updateQuery(value); - } else { - cleanQuery(value); - } - } - } else { - object.lastSample.queries = []; - for (var j = 0; j < 12; j++) { - if (j < nbQueries) { - var value = updateQuery(cleanQuery()); - object.lastSample.queries.push(value); - } else { - object.lastSample.queries.push(cleanQuery()); - } - } - } - for (var i = 0; i < 5; i++) { - var source = object.lastSample.queries[i]; - object.lastSample.topFiveQueries[i] = source; - } - object.lastSample.nbQueries = nbQueries; - object.lastSample.countClassName = countClassName(nbQueries); - return object; - } - - function getData(keepIdentity) { - var oldData = data; - if (!keepIdentity) { // reset for each tick when !keepIdentity - data = []; - for (var i = 1; i <= ENV.rows; i++) { - data.push({ dbname: 'cluster' + i, query: "", formatElapsed: "", elapsedClassName: "" }); - data.push({ dbname: 'cluster' + i + ' replica', query: "", formatElapsed: "", elapsedClassName: "" }); - } - } - if (!data) { // first init when keepIdentity - data = []; - for (var i = 1; i <= ENV.rows; i++) { - data.push({ dbname: 'cluster' + i }); - data.push({ dbname: 'cluster' + i + ' replica' }); - } - oldData = data; - } - for (var i in data) { - var row = data[i]; - if (!keepIdentity && oldData && oldData[i]) { - row.lastSample = oldData[i].lastSample; - } - if (!row.lastSample || Math.random() < ENV.mutations()) { - counter = counter + 1; - if (!keepIdentity) { - row.lastSample = null; - } - generateRow(row, keepIdentity, counter); - } else { - data[i] = oldData[i]; - } - } - first = false; - return { - toArray: function() { - return data; - } - }; - } - - var mutationsValue = 0.5; - - function mutations(value) { - if (value) { - mutationsValue = value; - return mutationsValue; - } else { - return mutationsValue; - } - } - - var body = document.querySelector('body'); - var theFirstChild = body.firstChild; - - var sliderContainer = document.createElement( 'div' ); - sliderContainer.style.cssText = "display: flex"; - var slider = document.createElement('input'); - var text = document.createElement('label'); - text.innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%'; - text.id = "ratioval"; - slider.setAttribute("type", "range"); - slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px'; - slider.addEventListener('change', function(e) { - ENV.mutations(e.target.value / 100); - document.querySelector('#ratioval').innerHTML = 'mutations : ' + (ENV.mutations() * 100).toFixed(0) + '%'; - }); - sliderContainer.appendChild( text ); - sliderContainer.appendChild( slider ); - body.insertBefore( sliderContainer, theFirstChild ); - - return { - generateData: getData, - rows: 50, - timeout: 0, - mutations: mutations - }; -})(); diff --git a/examples/dbmonster/angular/app.js b/examples/dbmonster/angular/app.js deleted file mode 100644 index 7e317be5..00000000 --- a/examples/dbmonster/angular/app.js +++ /dev/null @@ -1,56 +0,0 @@ -var renderStage = 0 -perfMonitor.startFPSMonitor() -perfMonitor.startMemMonitor() -perfMonitor.initProfiler("render") - -var AppComponent = ng.core.Component({selector: "my-app"}) -.View({ - directives: [ng.common.CORE_DIRECTIVES], - template: "
" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "
{{db.dbname}}" + - "{{db.lastSample.nbQueries}}" + - "" + - "{{q.formatElapsed}}" + - "
" + - "
{{q.query}}
" + - "
" + - "
" + - "
" + - "
" -}) -.Class({ - constructor: function() { - this.databases = [] - this.update() - }, - update: function() { - requestAnimationFrame(function() {self.update()}) - - var self = this - self.databases = ENV.generateData().toArray() - - if (renderStage === 0) { - renderStage = 1 - perfMonitor.startProfile("render") - } - }, - ngAfterViewChecked: function() { - if (renderStage === 1) { - perfMonitor.endProfile("render") - renderStage = 0 - } - }, -}) - -document.addEventListener("DOMContentLoaded", function() { - ng.core.enableProdMode() - ng.platform.browser.bootstrap(AppComponent) -}) diff --git a/examples/dbmonster/angular/index.html b/examples/dbmonster/angular/index.html deleted file mode 100644 index 5c09047c..00000000 --- a/examples/dbmonster/angular/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - dbmon (Angular2) - - - - - - - - - - - diff --git a/examples/dbmonster/memory-stats.js b/examples/dbmonster/memory-stats.js deleted file mode 100644 index c6bfca51..00000000 --- a/examples/dbmonster/memory-stats.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * @author mrdoob / http://mrdoob.com/ - * @author jetienne / http://jetienne.com/ - * @author paulirish / http://paulirish.com/ - */ -var MemoryStats = function (){ - - var msMin = 100; - var msMax = 0; - - var container = document.createElement( 'div' ); - container.id = 'stats'; - container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer'; - - var msDiv = document.createElement( 'div' ); - msDiv.id = 'ms'; - msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;'; - container.appendChild( msDiv ); - - var msText = document.createElement( 'div' ); - msText.id = 'msText'; - msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; - msText.innerHTML= 'Memory'; - msDiv.appendChild( msText ); - - var msGraph = document.createElement( 'div' ); - msGraph.id = 'msGraph'; - msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0'; - msDiv.appendChild( msGraph ); - - while ( msGraph.children.length < 74 ) { - - var bar = document.createElement( 'span' ); - bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131'; - msGraph.appendChild( bar ); - - } - - var updateGraph = function ( dom, height, color ) { - - var child = dom.appendChild( dom.firstChild ); - child.style.height = height + 'px'; - if( color ) child.style.backgroundColor = color; - - } - - var perf = window.performance || {}; - // polyfill usedJSHeapSize - if (!perf && !perf.memory){ - perf.memory = { usedJSHeapSize : 0 }; - } - if (perf && !perf.memory){ - perf.memory = { usedJSHeapSize : 0 }; - } - - // support of the API? - if( perf.memory.totalJSHeapSize === 0 ){ - console.warn('totalJSHeapSize === 0... performance.memory is only available in Chrome .') - } - - // TODO, add a sanity check to see if values are bucketed. - // If so, reminde user to adopt the --enable-precise-memory-info flag. - // open -a "/Applications/Google Chrome.app" --args --enable-precise-memory-info - - var lastTime = Date.now(); - var lastUsedHeap= perf.memory.usedJSHeapSize; - return { - domElement: container, - - update: function () { - - // refresh only 30time per second - if( Date.now() - lastTime < 1000/30 ) return; - lastTime = Date.now() - - var delta = perf.memory.usedJSHeapSize - lastUsedHeap; - lastUsedHeap = perf.memory.usedJSHeapSize; - var color = delta < 0 ? '#830' : '#131'; - - var ms = perf.memory.usedJSHeapSize; - msMin = Math.min( msMin, ms ); - msMax = Math.max( msMax, ms ); - msText.textContent = "Mem: " + bytesToSize(ms, 2); - - var normValue = ms / (30*1024*1024); - var height = Math.min( 30, 30 - normValue * 30 ); - updateGraph( msGraph, height, color); - - function bytesToSize( bytes, nFractDigit ){ - var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; - if (bytes == 0) return 'n/a'; - nFractDigit = nFractDigit !== undefined ? nFractDigit : 0; - var precision = Math.pow(10, nFractDigit); - var i = Math.floor(Math.log(bytes) / Math.log(1024)); - return Math.round(bytes*precision / Math.pow(1024, i))/precision + ' ' + sizes[i]; - }; - } - - } - -}; diff --git a/examples/dbmonster/mithril/app.js b/examples/dbmonster/mithril/app.js deleted file mode 100644 index 03092aea..00000000 --- a/examples/dbmonster/mithril/app.js +++ /dev/null @@ -1,47 +0,0 @@ -"use strict" - -perfMonitor.startFPSMonitor() -perfMonitor.startMemMonitor() -perfMonitor.initProfiler("render") - -var data = [] - -m.mount(document.getElementById("app"), { - view: function() { - return m("div", [ - m("table", {className: "table table-striped latest-data"}, [ - m("tbody", - data.map(function(db) { - return m("tr", {key: db.dbname}, [ - m("td", {className: "dbname"}, db.dbname), - m("td", {className: "query-count"}, [ - m("span", {className: db.lastSample.countClassName}, db.lastSample.nbQueries) - ]), - db.lastSample.topFiveQueries.map(function(query) { - return m("td", {className: query.elapsedClassName}, [ - query.formatElapsed, - m("div", {className: "popover left"}, [ - m("div", {className: "popover-content"}, query.query), - m("div", {className: "arrow"}) - ]) - ]) - }) - ]) - }) - ) - ]) - ]) - } -}) - -function update() { - requestAnimationFrame(update) - - data = ENV.generateData().toArray() - - perfMonitor.startProfile("render") - m.redraw() - perfMonitor.endProfile("render") -} - -update() diff --git a/examples/dbmonster/mithril/index.html b/examples/dbmonster/mithril/index.html deleted file mode 100644 index 875dc566..00000000 --- a/examples/dbmonster/mithril/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - dbmon (Mithril) - - -
- - - - - - diff --git a/examples/dbmonster/monitor.js b/examples/dbmonster/monitor.js deleted file mode 100644 index 099f0804..00000000 --- a/examples/dbmonster/monitor.js +++ /dev/null @@ -1,60 +0,0 @@ -var Monitoring = Monitoring || (function() { - - var stats = new MemoryStats(); - stats.domElement.style.position = 'fixed'; - stats.domElement.style.right = '0px'; - stats.domElement.style.bottom = '0px'; - document.body.appendChild( stats.domElement ); - requestAnimationFrame(function rAFloop(){ - stats.update(); - requestAnimationFrame(rAFloop); - }); - - var RenderRate = function () { - var container = document.createElement( 'div' ); - container.id = 'stats'; - container.style.cssText = 'width:150px;opacity:0.9;cursor:pointer;position:fixed;right:80px;bottom:0px;'; - - var msDiv = document.createElement( 'div' ); - msDiv.id = 'ms'; - msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;'; - container.appendChild( msDiv ); - - var msText = document.createElement( 'div' ); - msText.id = 'msText'; - msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; - msText.innerHTML= 'Repaint rate: 0/sec'; - msDiv.appendChild( msText ); - - var bucketSize = 20; - var bucket = []; - var lastTime = Date.now(); - return { - domElement: container, - ping: function () { - var start = lastTime; - var stop = Date.now(); - var rate = 1000 / (stop - start); - bucket.push(rate); - if (bucket.length > bucketSize) { - bucket.shift(); - } - var sum = 0; - for (var i = 0; i < bucket.length; i++) { - sum = sum + bucket[i]; - } - msText.textContent = "Repaint rate: " + (sum / bucket.length).toFixed(2) + "/sec"; - lastTime = stop; - } - } - }; - - var renderRate = new RenderRate(); - document.body.appendChild( renderRate.domElement ); - - return { - memoryStats: stats, - renderRate: renderRate - }; - -})(); diff --git a/examples/dbmonster/react/app.js b/examples/dbmonster/react/app.js deleted file mode 100644 index 63e0d07d..00000000 --- a/examples/dbmonster/react/app.js +++ /dev/null @@ -1,50 +0,0 @@ -"use strict" - -var h = React.createElement - -perfMonitor.startFPSMonitor() -perfMonitor.startMemMonitor() -perfMonitor.initProfiler("render") - -var data = [] - -var DBMon = React.createClass({ - render: function() { - return h("div", null, - h("table", {className: "table table-striped latest-data"}, - h("tbody", null, - data.map(function(db) { - return h("tr", {key: db.dbname}, - h("td", {className: "dbname"}, db.dbname), - h("td", {className: "query-count"}, - h("span", {className: db.lastSample.countClassName}, db.lastSample.nbQueries) - ), - db.lastSample.topFiveQueries.map(function(query, i) { - return h("td", {key: i, className: query.elapsedClassName}, - query.formatElapsed, - h("div", {className: "popover left"}, - h("div", {className: "popover-content"}, query.query), - h("div", {className: "arrow"}) - ) - ) - }) - ) - }) - ) - ) - ) - } -}) - -var root = document.getElementById("app") -function update() { - requestAnimationFrame(update) - - data = ENV.generateData().toArray() - - perfMonitor.startProfile("render") - ReactDOM.render(h(DBMon, null), root) - perfMonitor.endProfile("render") -} - -update() diff --git a/examples/dbmonster/react/index.html b/examples/dbmonster/react/index.html deleted file mode 100644 index 567d1a2b..00000000 --- a/examples/dbmonster/react/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - dbmon (React) - - -
- - - - - - - diff --git a/examples/dbmonster/styles.css b/examples/dbmonster/styles.css deleted file mode 100644 index da43dd93..00000000 --- a/examples/dbmonster/styles.css +++ /dev/null @@ -1,26 +0,0 @@ -body {color:#333;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;margin:0;} -label {display:inline-block;font-weight:700;margin-bottom:5px;} -input[type=range] {display:block;width:100%;} -table {border-collapse:collapse;border-spacing:0;} -:before,:after {box-sizing: border-box;} - -.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td {border-top:1px solid #ddd;line-height:1.42857143;padding:8px;vertical-align:top;} -.table {width:100%;} -.table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {background:#f9f9f9;} - -.label {border-radius:.25em;color:#fff;display:inline;font-size:75%;font-weight:700;line-height:1;padding:.2em .6em .3em;text-align:center;vertical-align:baseline;white-space:nowrap;} -.label-success {background-color:#5cb85c;} -.label-warning {background-color:#f0ad4e;} - -.popover {background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;box-shadow:0 5px 10px rgba(0,0,0,.2);display:none;left:0;max-width:276px;padding:1px;position:absolute;text-align:left;top:0;white-space:normal;z-index:1010;} -.popover>.arrow:after {border-width:10px;content:"";} -.popover.left {margin-left:-10px;} -.popover.left > .arrow {border-right-width:0;border-left-color:rgba(0,0,0,.25);margin-top:-11px;right:-11px;top:50%;} -.popover.left > .arrow:after {border-left-color:#fff;border-right-width:0;bottom:-10px;content:" ";right:1px;} -.popover > .arrow {border-width:11px;} -.popover > .arrow,.popover>.arrow:after {border-color:transparent;border-style:solid;display:block;height:0;position:absolute;width:0;} - -.popover-content {padding:9px 14px;} - -.Query {position:relative;} -.Query:hover .popover {display:block;left:-100%;width:100%;} diff --git a/examples/dbmonster/vue/app.js b/examples/dbmonster/vue/app.js deleted file mode 100644 index da6a1ac8..00000000 --- a/examples/dbmonster/vue/app.js +++ /dev/null @@ -1,51 +0,0 @@ -var renderStage = 0 -perfMonitor.startFPSMonitor() -perfMonitor.startMemMonitor() -perfMonitor.initProfiler("render") - -var vm = new Vue({ - el: '#app', - data: { - databases: [], - }, - methods: { - update: function () { - requestAnimationFrame(this.update.bind(this)) - this.databases = ENV.generateData().toArray() - - if (renderStage === 0) { - renderStage = 1 - perfMonitor.startProfile('render') - } - }, - }, - updated: function () { - if (renderStage === 1) { - renderStage = 0 - perfMonitor.endProfile('render') - } - }, - template: '
' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
{{ db.dbname }}' + - '' + - '{{ db.lastSample.nbQueries}}' + - '' + - '' + - '{{ q.formatElapsed }}' + - '
' + - '
{{ q.query }}
' + - '
' + - '
' + - '
' + - '
', -}) - -vm.update() diff --git a/examples/dbmonster/vue/index.html b/examples/dbmonster/vue/index.html deleted file mode 100644 index 49963528..00000000 --- a/examples/dbmonster/vue/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - dbmon (Vue 2) - - -
- - - - - - diff --git a/examples/editor/index.html b/examples/editor/index.html deleted file mode 100644 index dea4874f..00000000 --- a/examples/editor/index.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - Markdown Editor - - - -
- - - - - diff --git a/examples/svg/clock.html b/examples/svg/clock.html deleted file mode 100644 index f3b46e92..00000000 --- a/examples/svg/clock.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - SVG Clock - - - -
- - - - diff --git a/examples/svg/ring.html b/examples/svg/ring.html deleted file mode 100644 index 2df9b6c3..00000000 --- a/examples/svg/ring.html +++ /dev/null @@ -1,830 +0,0 @@ - - - - - SVG Ring - - - -
- - - - diff --git a/examples/svg/tiger.html b/examples/svg/tiger.html deleted file mode 100644 index a75249ec..00000000 --- a/examples/svg/tiger.html +++ /dev/null @@ -1,740 +0,0 @@ - - - - - SVG Tiger - - - -
- - - - diff --git a/examples/threaditjs/app.js b/examples/threaditjs/app.js deleted file mode 100644 index 835613a7..00000000 --- a/examples/threaditjs/app.js +++ /dev/null @@ -1,174 +0,0 @@ -T.time("Setup"); - -//API calls -var api = { - home: function() { - T.timeEnd("Setup") - return m.request({method: "GET", url: T.apiUrl + "/threads/"}) - }, - thread: function(id) { - T.timeEnd("Setup") - return m.request({method: "GET", url: T.apiUrl + "/comments/" + id}).then(T.transformResponse) - }, - newThread: function(text) { - return m.request({method: "POST", url: T.apiUrl + "/threads/create",data: {text: text}}) - }, - newComment: function(text, id) { - return m.request({method: "POST", url: T.apiUrl + "/comments/create", data: {text: text, parent: id}}); - } -}; - -var threads = [], current = null, loaded = false, error = false, notFound = false -function loadThreads() { - loaded = false - api.home().then(function(response) { - document.title = "ThreaditJS: Mithril.js | Home" - threads = response.data - loaded = true - }, function() { - loaded = error = true - }) -} - -function loadThread(id) { - loaded = false - notFound = false - api.thread(id).then(function(response) { - document.title = "ThreaditJS: Mithril.js | " + T.trimTitle(response.root.text); - loaded = true - current = response - }, function(response) { - loaded = true - if (response.status === 404) notFound = true - else error = true - }) -} -function unloadThread() { - current = null -} - -function createThread() { - var threadText = document.getElementById("threadText") - api.newThread(threadText.value).then(function(response) { - threadText.value = ""; - threads.push(response.data); - }) - return false -} - -function showReplying(vnode) { - vnode.state.replying = true - vnode.state.newComment = "" - return false -} - -function submitComment(vnode) { - api.newComment(vnode.state.newComment, vnode.attrs.node.id).then(function(response) { - vnode.state.newComment = "" - vnode.state.replying = false - vnode.attrs.node.children.push(response.data) - }) - return false -} - -//shared -var Header = { - view: function() { - return [ - m("p.head_links", [ - m("a[href='https://github.com/koglerjs/threaditjs/tree/master/examples/mithril']", "Source"), - " | ", - m("a[href='https://threaditjs.com']", "ThreaditJS Home"), - ]), - m("h2", [ - m(m.route.Link, {href: "/"}, "ThreaditJS: Mithril"), - ]), - ] - } -} - -//home -var Home = { - oninit: loadThreads, - view: function() { - return [ - m(Header), - m(".main", [ - loaded === false ? m("h2", "Loading") : - error ? m("h2", "Error! Try refreshing.") : - notFound ? m("h2", "Not found! Don't try refreshing!") : [ - threads.map(function(thread) { - return [ - m("p", [ - m(m.route.Link, {href: "/thread/" + thread.id}, m.trust(T.trimTitle(thread.text))), - ]), - m("p.comment_count", thread.comment_count + " comment(s)"), - m("hr"), - ] - }), - m(NewThread), - ] - ]) - ] - } -} -var NewThread = { - view: function() { - return m("form", {onsubmit: createThread}, [ - m("textarea#threadText"), - m("input", {type:"submit", value: "Post!"}), - ]) - } -} - -//thread -var Thread = { - oninit: function(vnode) { - loadThread(vnode.attrs.id) - }, - onremove: unloadThread, - view: function() { - if (current) T.time("Thread render") - return [ - m(Header), - current ? m(".main", {oncreate: function() {T.timeEnd("Thread render")}}, [ - m(ThreadNode, {node: current.root}) - ]) : null - ] - } -} -var ThreadNode = { - view: function(vnode) { - return m(".comment", [ - m("p", m.trust(vnode.attrs.node.text)), - m(".reply", m(Reply, vnode.attrs)), - m(".children", [ - vnode.attrs.node.children.map(function(child) { - return m(ThreadNode, {node: child}) - }) - ]) - ]) - } -} -var Reply = { - view: function(vnode) { - return vnode.state.replying - ? m("form", {onsubmit: function() {return submitComment(vnode)}}, [ - m("textarea", { - value: vnode.state.newComment, - oninput: function(e) { - vnode.state.newComment = e.target.value - }, - }), - m("input", {type:"submit", value: "Reply!"}), - m(".preview", m.trust(T.previewComment(vnode.state.newComment))), - ]) - : m("a", {onclick: function() {return showReplying(vnode)}}, "Reply!") - } -} - -//router -m.route(document.getElementById("app"), "/", { - "/thread/:id" : Thread, - "/" : Home, -}) diff --git a/examples/threaditjs/colors.css b/examples/threaditjs/colors.css deleted file mode 100644 index c3dc0ffb..00000000 --- a/examples/threaditjs/colors.css +++ /dev/null @@ -1,6 +0,0 @@ -html {background-color:#f5f5f5;} - -a {color:#161;text-decoration:none;} -a:hover {text-decoration:underline;} - -input[type=submit] {background-color:#5A5;color:#fff;border:0;font-weight:bold;} diff --git a/examples/threaditjs/index.html b/examples/threaditjs/index.html deleted file mode 100644 index 41c46037..00000000 --- a/examples/threaditjs/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Mithril.js • ThreadIt.js - - - - - -
- - - - - diff --git a/examples/todomvc/app.css b/examples/todomvc/app.css deleted file mode 100644 index 54d89abd..00000000 --- a/examples/todomvc/app.css +++ /dev/null @@ -1,378 +0,0 @@ -html, -body { - margin: 0; - padding: 0; -} - -button { - margin: 0; - padding: 0; - border: 0; - background: none; - font-size: 100%; - vertical-align: baseline; - font-family: inherit; - font-weight: inherit; - color: inherit; - -webkit-appearance: none; - appearance: none; - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - font-smoothing: antialiased; -} - -body { - font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 1.4em; - background: #f5f5f5; - color: #4d4d4d; - min-width: 230px; - max-width: 550px; - margin: 0 auto; - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - font-smoothing: antialiased; - font-weight: 300; -} - -button, -input[type="checkbox"] { - outline: none; -} - -.hidden { - display: none; -} - -#todoapp { - background: #fff; - margin: 130px 0 40px 0; - position: relative; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), - 0 25px 50px 0 rgba(0, 0, 0, 0.1); -} - -#todoapp input::-webkit-input-placeholder { - font-style: italic; - font-weight: 300; - color: #e6e6e6; -} - -#todoapp input::-moz-placeholder { - font-style: italic; - font-weight: 300; - color: #e6e6e6; -} - -#todoapp input::input-placeholder { - font-style: italic; - font-weight: 300; - color: #e6e6e6; -} - -#todoapp h1 { - position: absolute; - top: -155px; - width: 100%; - font-size: 100px; - font-weight: 100; - text-align: center; - color: rgba(175, 47, 47, 0.15); - -webkit-text-rendering: optimizeLegibility; - -moz-text-rendering: optimizeLegibility; - text-rendering: optimizeLegibility; -} - -#new-todo, -.edit { - position: relative; - margin: 0; - width: 100%; - font-size: 24px; - font-family: inherit; - font-weight: inherit; - line-height: 1.4em; - border: 0; - outline: none; - color: inherit; - padding: 6px; - border: 1px solid #999; - box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - font-smoothing: antialiased; -} - -#new-todo { - padding: 16px 16px 16px 60px; - border: none; - background: rgba(0, 0, 0, 0.003); - box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); -} - -#main { - position: relative; - z-index: 2; - border-top: 1px solid #e6e6e6; -} - -label[for='toggle-all'] { - display: none; -} - -#toggle-all { - position: absolute; - top: -55px; - left: -12px; - width: 60px; - height: 34px; - text-align: center; - border: none; /* Mobile Safari */ -} - -#toggle-all:before { - content: '❯'; - font-size: 22px; - color: #e6e6e6; - padding: 10px 27px 10px 27px; -} - -#toggle-all:checked:before { - color: #737373; -} - -#todo-list { - margin: 0; - padding: 0; - list-style: none; -} - -#todo-list li { - position: relative; - font-size: 24px; - border-bottom: 1px solid #ededed; -} - -#todo-list li:last-child { - border-bottom: none; -} - -#todo-list li.editing { - border-bottom: none; - padding: 0; -} - -#todo-list li.editing .edit { - display: block; - width: 506px; - padding: 13px 17px 12px 17px; - margin: 0 0 0 43px; -} - -#todo-list li.editing .view { - display: none; -} - -#todo-list li .toggle { - text-align: center; - width: 40px; - /* auto, since non-WebKit browsers doesn't support input styling */ - height: auto; - position: absolute; - top: 0; - bottom: 0; - margin: auto 0; - border: none; /* Mobile Safari */ - -webkit-appearance: none; - appearance: none; -} - -#todo-list li .toggle:after { - content: url('data:image/svg+xml;utf8,'); -} - -#todo-list li .toggle:checked:after { - content: url('data:image/svg+xml;utf8,'); -} - -#todo-list li label { - white-space: pre; - word-break: break-word; - padding: 15px 60px 15px 15px; - margin-left: 45px; - display: block; - line-height: 1.2; - transition: color 0.4s; -} - -#todo-list li.completed label { - color: #d9d9d9; - text-decoration: line-through; -} - -#todo-list li .destroy { - display: none; - position: absolute; - top: 0; - right: 10px; - bottom: 0; - width: 40px; - height: 40px; - margin: auto 0; - font-size: 30px; - color: #cc9a9a; - margin-bottom: 11px; - transition: color 0.2s ease-out; -} - -#todo-list li .destroy:hover { - color: #af5b5e; -} - -#todo-list li .destroy:after { - content: '×'; -} - -#todo-list li:hover .destroy { - display: block; -} - -#todo-list li .edit { - display: none; -} - -#todo-list li.editing:last-child { - margin-bottom: -1px; -} - -#footer { - color: #777; - padding: 10px 15px; - height: 20px; - text-align: center; - border-top: 1px solid #e6e6e6; -} - -#footer:before { - content: ''; - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 50px; - overflow: hidden; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), - 0 8px 0 -3px #f6f6f6, - 0 9px 1px -3px rgba(0, 0, 0, 0.2), - 0 16px 0 -6px #f6f6f6, - 0 17px 2px -6px rgba(0, 0, 0, 0.2); -} - -#todo-count { - float: left; - text-align: left; -} - -#todo-count strong { - font-weight: 300; -} - -#filters { - margin: 0; - padding: 0; - list-style: none; - position: absolute; - right: 0; - left: 0; -} - -#filters li { - display: inline; -} - -#filters li a { - color: inherit; - margin: 3px; - padding: 3px 7px; - text-decoration: none; - border: 1px solid transparent; - border-radius: 3px; -} - -#filters li a.selected, -#filters li a:hover { - border-color: rgba(175, 47, 47, 0.1); -} - -#filters li a.selected { - border-color: rgba(175, 47, 47, 0.2); -} - -#clear-completed, -html #clear-completed:active { - float: right; - position: relative; - line-height: 20px; - text-decoration: none; - cursor: pointer; - position: relative; -} - -#clear-completed:hover { - text-decoration: underline; -} - -#info { - margin: 65px auto 0; - color: #bfbfbf; - font-size: 10px; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - text-align: center; -} - -#info p { - line-height: 1; -} - -#info a { - color: inherit; - text-decoration: none; - font-weight: 400; -} - -#info a:hover { - text-decoration: underline; -} - -/* - Hack to remove background from Mobile Safari. - Can't use it globally since it destroys checkboxes in Firefox -*/ -@media screen and (-webkit-min-device-pixel-ratio:0) { - #toggle-all, - #todo-list li .toggle { - background: none; - } - - #todo-list li .toggle { - height: 40px; - } - - #toggle-all { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - -webkit-appearance: none; - appearance: none; - } -} - -@media (max-width: 430px) { - #footer { - height: 50px; - } - - #filters { - bottom: 10px; - } -} diff --git a/examples/todomvc/base.css b/examples/todomvc/base.css deleted file mode 100644 index da65968a..00000000 --- a/examples/todomvc/base.css +++ /dev/null @@ -1,141 +0,0 @@ -hr { - margin: 20px 0; - border: 0; - border-top: 1px dashed #c5c5c5; - border-bottom: 1px dashed #f7f7f7; -} - -.learn a { - font-weight: normal; - text-decoration: none; - color: #b83f45; -} - -.learn a:hover { - text-decoration: underline; - color: #787e7e; -} - -.learn h3, -.learn h4, -.learn h5 { - margin: 10px 0; - font-weight: 500; - line-height: 1.2; - color: #000; -} - -.learn h3 { - font-size: 24px; -} - -.learn h4 { - font-size: 18px; -} - -.learn h5 { - margin-bottom: 0; - font-size: 14px; -} - -.learn ul { - padding: 0; - margin: 0 0 30px 25px; -} - -.learn li { - line-height: 20px; -} - -.learn p { - font-size: 15px; - font-weight: 300; - line-height: 1.3; - margin-top: 0; - margin-bottom: 0; -} - -#issue-count { - display: none; -} - -.quote { - border: none; - margin: 20px 0 60px 0; -} - -.quote p { - font-style: italic; -} - -.quote p:before { - content: '“'; - font-size: 50px; - opacity: .15; - position: absolute; - top: -20px; - left: 3px; -} - -.quote p:after { - content: '”'; - font-size: 50px; - opacity: .15; - position: absolute; - bottom: -42px; - right: 3px; -} - -.quote footer { - position: absolute; - bottom: -40px; - right: 0; -} - -.quote footer img { - border-radius: 3px; -} - -.quote footer a { - margin-left: 5px; - vertical-align: middle; -} - -.speech-bubble { - position: relative; - padding: 10px; - background: rgba(0, 0, 0, .04); - border-radius: 5px; -} - -.speech-bubble:after { - content: ''; - position: absolute; - top: 100%; - right: 30px; - border: 13px solid transparent; - border-top-color: rgba(0, 0, 0, .04); -} - -.learn-bar > .learn { - position: absolute; - width: 272px; - top: 8px; - left: -300px; - padding: 10px; - border-radius: 5px; - background-color: rgba(255, 255, 255, .6); - transition-property: left; - transition-duration: 500ms; -} - -@media (min-width: 899px) { - .learn-bar { - width: auto; - padding-left: 300px; - } - - .learn-bar > .learn { - left: 8px; - } -} diff --git a/examples/todomvc/index.html b/examples/todomvc/index.html deleted file mode 100644 index f8499f1e..00000000 --- a/examples/todomvc/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - Mithril.js • TodoMVC - - - - -
- - - - - diff --git a/examples/todomvc/todomvc.js b/examples/todomvc/todomvc.js deleted file mode 100644 index dd97aa5f..00000000 --- a/examples/todomvc/todomvc.js +++ /dev/null @@ -1,131 +0,0 @@ -//model -var state = { - dispatch: function(action, args) { - state[action].apply(state, args || []) - requestAnimationFrame(function() { - localStorage["todos-mithril"] = JSON.stringify(state.todos) - }) - }, - - todos: JSON.parse(localStorage["todos-mithril"] || "[]"), - editing: null, - filter: "", - remaining: 0, - todosByStatus: [], - - createTodo: function(title) { - state.todos.push({title: title.trim(), completed: false}) - }, - setStatuses: function(completed) { - for (var i = 0; i < state.todos.length; i++) state.todos[i].completed = completed - }, - setStatus: function(todo, completed) { - todo.completed = completed - }, - destroy: function(todo) { - var index = state.todos.indexOf(todo) - if (index > -1) state.todos.splice(index, 1) - }, - clear: function() { - for (var i = 0; i < state.todos.length; i++) { - if (state.todos[i].completed) state.destroy(state.todos[i--]) - } - }, - - edit: function(todo) { - state.editing = todo - }, - update: function(title) { - if (state.editing != null) { - state.editing.title = title.trim() - if (state.editing.title === "") state.destroy(state.editing) - state.editing = null - } - }, - reset: function() { - state.editing = null - }, - - computed: function(vnode) { - state.showing = vnode.attrs.status || "" - state.remaining = state.todos.filter(function(todo) {return !todo.completed}).length - state.todosByStatus = state.todos.filter(function(todo) { - switch (state.showing) { - case "": return true - case "active": return !todo.completed - case "completed": return todo.completed - } - }) - } -} - -//view -var Todos = { - add: function(e) { - if (e.keyCode === 13 && e.target.value) { - state.dispatch("createTodo", [e.target.value]) - e.target.value = "" - } - }, - toggleAll: function() { - state.dispatch("setStatuses", [document.getElementById("toggle-all").checked]) - }, - toggle: function(todo) { - state.dispatch("setStatus", [todo, !todo.completed]) - }, - focus: function(vnode, todo) { - if (todo === state.editing && vnode.dom !== document.activeElement) { - vnode.dom.value = todo.title - vnode.dom.focus() - vnode.dom.selectionStart = vnode.dom.selectionEnd = todo.title.length - } - }, - save: function(e) { - if (e.keyCode === 13 || e.type === "blur") state.dispatch("update", [e.target.value]) - else if (e.keyCode === 27) state.dispatch("reset") - }, - oninit: state.computed, - onbeforeupdate: state.computed, - view: function(vnode) { - var ui = vnode.state - return [ - m("header.header", [ - m("h1", "todos"), - m("input#new-todo[placeholder='What needs to be done?'][autofocus]", {onkeypress: ui.add}), - ]), - m("section#main", {style: {display: state.todos.length > 0 ? "" : "none"}}, [ - m("input#toggle-all[type='checkbox']", {checked: state.remaining === 0, onclick: ui.toggleAll}), - m("label[for='toggle-all']", {onclick: ui.toggleAll}, "Mark all as complete"), - m("ul#todo-list", [ - state.todosByStatus.map(function(todo) { - return m("li", {class: (todo.completed ? "completed" : "") + " " + (todo === state.editing ? "editing" : "")}, [ - m(".view", [ - m("input.toggle[type='checkbox']", {checked: todo.completed, onclick: function() {ui.toggle(todo)}}), - m("label", {ondblclick: function() {state.dispatch("edit", [todo])}}, todo.title), - m("button.destroy", {onclick: function() {state.dispatch("destroy", [todo])}}), - ]), - m("input.edit", {onupdate: function(vnode) {ui.focus(vnode, todo)}, onkeyup: ui.save, onblur: ui.save}) - ]) - }), - ]), - ]), - state.todos.length ? m("footer#footer", [ - m("span#todo-count", [ - m("strong", state.remaining), - state.remaining === 1 ? " item left" : " items left", - ]), - m("ul#filters", [ - m("li", m(m.route.Link, {href: "/", class: state.showing === "" ? "selected" : ""}, "All")), - m("li", m(m.route.Link, {href: "/active", class: state.showing === "active" ? "selected" : ""}, "Active")), - m("li", m(m.route.Link, {href: "/completed", class: state.showing === "completed" ? "selected" : ""}, "Completed")), - ]), - m("button#clear-completed", {onclick: function() {state.dispatch("clear")}}, "Clear completed"), - ]) : null, - ] - } -} - -m.route(document.getElementById("todoapp"), "/", { - "/": Todos, - "/:status": Todos, -})