Commit 652e17c6ca36341c8b5f36c66780d9bae9bfc721
Search page modular styling
mix irving committed on 2/4/2017, 5:14:01 AMParent: e50286f70acfd2b61a42f560edfdfc1083b1e0fc
Files changed
| modules_basic/scroller.mcss | changed |
| modules_extra/search.js | changed |
| modules_extra/search.mcss | added |
| modules_basic/scroller.mcss | ||
|---|---|---|
| @@ -8,16 +8,16 @@ | ||
| 8 | 8 … | min-height: 0px |
| 9 | 9 … | |
| 10 | 10 … | div.wrapper { |
| 11 | 11 … | flex: 1 |
| 12 | - max-width: 600px | |
| 12 … | + width: 600px | |
| 13 | 13 … | margin-left: auto |
| 14 | 14 … | margin-right: auto |
| 15 | 15 … | |
| 16 | 16 … | section.content { |
| 17 | 17 … | |
| 18 | 18 … | div { |
| 19 | - border-top: solid 1px gainsboro | |
| 19 … | + border-bottom: solid 1px gainsboro | |
| 20 | 20 … | } |
| 21 | 21 … | } |
| 22 | 22 … | } |
| 23 | 23 … | } |
| modules_extra/search.js | |||
|---|---|---|---|
| @@ -1,17 +1,22 @@ | |||
| 1 | -var h = require('hyperscript') | ||
| 2 | -var u = require('../util') | ||
| 3 | -var pull = require('pull-stream') | ||
| 4 | -var Scroller = require('pull-scroll') | ||
| 5 | -var TextNodeSearcher = require('text-node-searcher') | ||
| 1 … | +const h = require('../h') | ||
| 2 … | +const fs = require('fs') | ||
| 3 … | +const { Value } = require('@mmckegg/mutant') | ||
| 4 … | +const u = require('../util') | ||
| 5 … | +const pull = require('pull-stream') | ||
| 6 … | +const Scroller = require('pull-scroll') | ||
| 7 … | +const TextNodeSearcher = require('text-node-searcher') | ||
| 6 | 8 … | ||
| 7 | 9 … | exports.needs = { | |
| 8 | 10 … | build_scroller: 'first', | |
| 9 | 11 … | message_render: 'first', | |
| 10 | 12 … | sbot_log: 'first' | |
| 11 | 13 … | } | |
| 12 | 14 … | ||
| 13 | -exports.gives = 'screen_view' | ||
| 15 … | +exports.gives = { | ||
| 16 … | + screen_view: true, | ||
| 17 … | + mcss: true | ||
| 18 … | +} | ||
| 14 | 19 … | ||
| 15 | 20 … | var whitespace = /\s+/ | |
| 16 | 21 … | ||
| 17 | 22 … | function andSearch(terms, inputs) { | |
| @@ -52,46 +57,57 @@ | |||
| 52 | 57 … | } | |
| 53 | 58 … | ||
| 54 | 59 … | exports.create = function (api) { | |
| 55 | 60 … | ||
| 56 | - return function (path) { | ||
| 57 | - if(path[0] === '?') { | ||
| 58 | - var query = path.substr(1).trim().split(whitespace) | ||
| 59 | - var _matches = searchFilter(query) | ||
| 61 … | + return { | ||
| 62 … | + screen_view, | ||
| 63 … | + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8') | ||
| 64 … | + } | ||
| 60 | 65 … | ||
| 61 | - var total = 0, matches = 0 | ||
| 66 … | + function screen_view (path) { | ||
| 67 … | + if (path[0] !== '?') return | ||
| 62 | 68 … | ||
| 63 | - var header = h('div.search_header', '') | ||
| 64 | - var { container, content } = api.build_scroller({ prepend: header}) | ||
| 65 | - container.id = path // helps tabs find this tab | ||
| 69 … | + var query = path.substr(1).trim().split(whitespace) | ||
| 70 … | + var _matches = searchFilter(query) | ||
| 66 | 71 … | ||
| 67 | - function matchesQuery (data) { | ||
| 68 | - total++ | ||
| 69 | - var m = _matches(data) | ||
| 70 | - if(m) matches++ | ||
| 71 | - header.textContent = 'searched:'+total+', found:'+matches | ||
| 72 | - return m | ||
| 73 | - } | ||
| 72 … | + const searched = Value(0) | ||
| 73 … | + const matches = Value(0) | ||
| 74 … | + const searchHeader = h('Search', [ | ||
| 75 … | + h('header', h('h1', query)), | ||
| 76 … | + h('section.details', [ | ||
| 77 … | + h('div.searched', ['Searched: ', searched]), | ||
| 78 … | + h('div.matches', [matches, ' matches']) | ||
| 79 … | + ]) | ||
| 80 … | + ]) | ||
| 81 … | + var { container, content } = api.build_scroller({ prepend: searchHeader }) | ||
| 82 … | + container.id = path // helps tabs find this tab | ||
| 74 | 83 … | ||
| 75 | - function renderMsg(msg) { | ||
| 76 | - var el = api.message_render(msg) | ||
| 77 | - highlight(el, createOrRegExp(query)) | ||
| 78 | - return el | ||
| 79 | - } | ||
| 84 … | + function matchesQuery (data) { | ||
| 85 … | + searched.set(searched() + 1) | ||
| 86 … | + var m = _matches(data) | ||
| 87 … | + if(m) matches.set(matches() +1 ) | ||
| 88 … | + | ||
| 89 … | + return m | ||
| 90 … | + } | ||
| 80 | 91 … | ||
| 81 | - pull( | ||
| 82 | - api.sbot_log({old: false}), | ||
| 83 | - pull.filter(matchesQuery), | ||
| 84 | - Scroller(container, content, renderMsg, true, false) | ||
| 85 | - ) | ||
| 92 … | + function renderMsg(msg) { | ||
| 93 … | + var el = api.message_render(msg) | ||
| 94 … | + highlight(el, createOrRegExp(query)) | ||
| 95 … | + return el | ||
| 96 … | + } | ||
| 86 | 97 … | ||
| 87 | - pull( | ||
| 88 | - u.next(api.sbot_log, {reverse: true, limit: 500, live: false}), | ||
| 89 | - pull.filter(matchesQuery), | ||
| 90 | - Scroller(container, content, renderMsg, false, false) | ||
| 91 | - ) | ||
| 98 … | + pull( | ||
| 99 … | + api.sbot_log({old: false}), | ||
| 100 … | + pull.filter(matchesQuery), | ||
| 101 … | + Scroller(container, content, renderMsg, true, false) | ||
| 102 … | + ) | ||
| 92 | 103 … | ||
| 93 | - return container | ||
| 94 | - } | ||
| 104 … | + pull( | ||
| 105 … | + u.next(api.sbot_log, {reverse: true, limit: 500, live: false}), | ||
| 106 … | + pull.filter(matchesQuery), | ||
| 107 … | + Scroller(container, content, renderMsg, false, false) | ||
| 108 … | + ) | ||
| 109 … | + | ||
| 110 … | + return container | ||
| 95 | 111 … | } | |
| 112 … | +} | ||
| 96 | 113 … | ||
| 97 | -} | ||
| modules_extra/search.mcss | ||
|---|---|---|
| @@ -1,0 +1,22 @@ | ||
| 1 … | +Search { | |
| 2 … | + padding: .5rem | |
| 3 … | + border-bottom: solid 1px gainsboro | |
| 4 … | + | |
| 5 … | + header { | |
| 6 … | + h1 { | |
| 7 … | + } | |
| 8 … | + } | |
| 9 … | + | |
| 10 … | + section.details { | |
| 11 … | + display: flex | |
| 12 … | + justify-content: space-between | |
| 13 … | + | |
| 14 … | + font-family: monospace | |
| 15 … | + | |
| 16 … | + div.searched {} | |
| 17 … | + div.matched {} | |
| 18 … | + } | |
| 19 … | + | |
| 20 … | +} | |
| 21 … | + | |
| 22 … | + | |
Built with git-ssb-web