I'm building a search application and am trying to get some results links that appear in tab format to work. Much like you see on google.com/search=?user_query and bing.com/search=?user_query... where after you submit the initial query, you can click on "Images", "Shopping" and "News" for example and a different results view is rendered based on the the result link/tab that you clicked.
I'm using ReactiveSearch to build my search UI. So far I have this:
ResultNavigationTabs.tsx to build the link tabs
class ResultNavigationTabs extends Component {
render() {
const { classes, items, location: { pathname } } = this.props;
return (
<ul className={classes.nav}>
{items.map(item => (
<Link to={item.link} key={item.text}>
<li className={item.link.startsWith(pathname) ? "active" : ""}>
{item.text}
</li>
</Link>
))}
</ul>
);
}
}
export default withStyles(styles)(withRouter(ResultNavigationTabs));
I then render this component in my ResultsViewPage.tsx like so:
render() {
const { selected } = this.state;
...(omitted for brevity)
<ResultNavigationTabs2
className={classes.myNavigationTabs}
items={[
{ text: "Web", link: `/search?q="${selected}"` },
{ text: "News", link: `/news?q="${selected}"` },
{ text: "Shopping", link: `/shopping?q="${selected}"` },
]}
/>
The links do render but they do not work. If I hover over the links, the search query string is empty (http://localhost:3000/search?q=%22%22). If you've worked with ReactiveSearch, it should be: http://localhost:3000/search?q=%22user%20query%22.
I have had it working but only when I render ResultNavigationTabs in the same file as the search box (DataSearch in ReactiveSearch language). However, if I do that it appears right below the search box in the Header instead of the results area.
I need to figure out a way to render ResultNavigationTabs in the ResultsViewPage.tsx file with working links.
After doing some more thoughtful searching, I found the answer right here on SO! Comes complete with 2 CodeSandBox demos as well - check them out.
Related
While I understand this is probably a terrible practice, I need to build StencilJS component such that inside render(), I don't want to render component tag itself due to already existing style guide and it expect DOM to be constructed in certain way. Here is what I'm trying to achieve - component code (from HTML or within another component):
<tab-header-list>
<tab-header label="tab 1"></tab-header>
<tab-header label="tab 2"></tab-header>
</tab-header-list>
when rendered, I want generated DOM to be something like:
<tab-header-list>
<ul>
<li>tab 1</li>
<li>tab 2</li>
</ul>
</tab-header-list>
so inside tab-header-list render() function, I'm doing
return (
<ul>
<slot/>
</ul>
);
and I can do this inside tab-header render() function
#Element() el: HTMLElement;
#Prop() label: string;
render() {
this.el.outerHTML = `<li>${this.label}</li>`;
}
to get what I want but how can I do this with TSX? (for simplicity sake, above code is really simple but what I really need to build is lot more complicated li tag with events etc so I would like to use TSX)
Tried to store DOM to variable but I'm not sure how I can assign it as this.el (outerHTML seem to be only way I can come up with, but I feel there must be better way)
#Element() el: HTMLElement;
#Prop() label: string;
render() {
var tabheaderDOM = (<li>{this.label}</li>);
// how can I assign above DOM to this.el somehow?
//this.el.outerHTML = ?
}
I appreciate any help I can get - thanks in advance for your time!
Unfortunately, you can't use custom elements without tags, but there is a workaround for it:
You can use Host element as reference to the result tag.
render () {
return (
<Host>....</Host>
)
}
Then in your stylesheet you can set the display property for it:
:host {
display: contents;
}
display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself
Beware: it doesn't work in IE, opera mini... https://caniuse.com/#feat=css-display-contents
UPD:
If you are not using the shadowDOM then you need to replace :host by the tag name like:
tab-header {
display: contents;
}
Functional components might be able to help you achieve this. They are merely syntactic sugar for a function that returns a TSX element, so they are completely different to normal Stencil components. The main difference is that they don't compile to web components, and therefore only work within TSX. But they also don't result in an extra DOM node because they simply return the template that the function returns.
Let's take your example:
#Element() el: HTMLElement;
#Prop() label: string;
render() {
this.el.outerHTML = `<li>${this.label}</li>`;
}
you could write it as a functional component:
import { FunctionalComponent } from '#stencil/core';
interface ListItemProps {
label: string;
}
export const ListItem: FunctionalComponent<ListItemProps> = ({ label }) => (
<li>{label}</li>
);
and then you can use it like
import { ListItem } from './ListItem';
#Component({ tag: 'my-comp' })
export class MyComp {
render() {
return (
<ul>
<ListItem label="tab 1" />
<ListItem label="tab 2" />
</ul>
);
}
}
Which will render as
<ul>
<li>tab 1</li>
<li>tab 2</li>
</ul>
Instead of a label prop you could also write your functional component to accept the label as a child instead:
export const ListItem: FunctionalComponent = (_, children) => (
<li>{children}</li>
);
and use it like
<ListItem>tab 1</ListItem>
BTW Host is actually a functional component. To find out more about functional components (and there limitations), see https://stenciljs.com/docs/functional-components.
I want to build a really basic search bar with a search icon (similar to the one on Material-UI ) & invoke a function with the current value of the search field whenever the user hits enter or click on the search enter. I am new to Material-UI & I'm struggling to find my way through the different text fields elements.
I currently have this code
import Input from '#material-ui/core/Input';
class ...somecode
...somecode
constructor(props) {
super(props);
this.state = {
resources: [],
value: '',
};
}
handleChange(event) {
console.log(event.target.value);
this.setState({ value: event.target.value });
}
search(/* access value upons enter/ search icon click */) { <--------------------------
}
...some code
return (
<form id="search">
<Input type="text" value={value} onChange={(event) => { this.handleChange(event); }} placeholder="Search..." autoFocus fullWidth />
</form>
);
p.s: I had a really hard time fiddling around with all the APIs and options available in the input suite (I highly suggest an explanation of how they are related in the docs)
Found several similar questions, but not the answer to this specific one..
Is there a way to add a title to BOTH the top and bottom of a FancyBox2 modal/popup?
I know how to position the title to the top or bottom. But need to put a title on the top and a caption on the bottom.
Thanks to all in advance..
You can modify the default fancybox template to add some extra HTML in. Like so:
Your HTML:
Click
Javascript:
$(".fancybox").fancybox({
type: 'iframe',
beforeLoad: function() {
var caption = this.element.attr('data-caption');
this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'
},
helpers: {
title : {
type : 'inside',
position: 'top'
}
}
});
I've used an iFrame as an example, but this should work for any Fancybox type.
JS Fiddle here:
http://jsfiddle.net/WillDonohoe/thy0om73/
Look under the tpl section of the fancybox docs for more information: http://fancyapps.com/fancybox/#docs
Okay. So I hope this is specific enough.
I'm, kind of new to mustache, but see it has great potential, so why not use it.
I'm making a quite big form, and want to have the form built with mustache. So i have started to make the form in mustache and, then i realized i want to template the form-elements. One template for how i want every narrow input, wide input, select etc. to look like. because now i'm repeating myself.
My template and partials are provided through $.ajax get, where the main form template are defined as a mustache file, with html content, and the partials are defined as a mustache file with every template inside -tags.
Variables for mustache to use. This object is somewhat subject for change.
var jsonForm = {
oneInputField: {
value:'put your title here',
rule_set: {
required: {
strName: 'required',
strErrorMsg: 'error message'
}
}
},
oneSelect: {
options: [
{value: '- Pick one -', helper: 'helper', select_options: {disable_search: true}},
{value: 'option1', selected: true},
{value: 'option2'},
{value: 'option3'},
{value: 'option4'}
],
rule_set: {
required: {
strName: 'required',
strErrorMsg: 'error message'
}
}
}
};
How i fetch the data
$.ajax({
url: 'myForm.mustache',
type: 'get',
success: function(template) {
$.ajax({
url: 'myFormElements.mustache',
type: 'get',
success: function(partials) {
var $html = Mustache.render(template, jsonForm.fields, partials);
$('div#formContent').html($html);
$('div#formContent select').chosen();
if (jsonForm.fields.title.length > 1) {
$('div#header').html(jsonForm.fields.title);
}
}
});
}
});
Partials. Would actually like to have it all in separate files, but it doesn't seem to be possible without making a ton of ajax calls, so I keep with my current two mustache templates.
<script type="text/html" id="inputNarrow">
<label>{{label}}:</label><input value="{{value}}">
{{#rule_set.required}}<div class="required">*</div>{{/rule_set.required}}
{{^rule_set.required}}<div class="not-required"> </div>{{/rule_set.required}}
<div class="clearfix"></div>
</script>
and my form-template
<div id="formContainer" class="border-box">
<div class="group-box">
<p>Fields marked with <span class="required">*</span> are required to complete the form</p>
</div>
<div class="group-box">
<h2>Partial element test</h2>
<div class="form-container">
{{>partials.inputNarrow}} <-- I have to be able to specify what data I want to enter here.
</div>
<div class="form-container">
{{>partials.selectNarrow}} <-- I have to be able to specify what data I want to enter here.
</div>
</div>
So my question is is it possible for a bigger one big unique mustache-template to use "element"-templates (also in mustache), for rendering?
I am not very open to adding additional libraries to my project, like ICanHaz or similar, since this is for work.
Really sorry if this question is answered before, but I couldn't find it
I found an alternative way of doing what I tried to do.
I'm not sure if it's any good, but it does the job.
I used the possibility of making functions inside the object sent to the main-tempalte "form-template".
wich looks like this:
var smallRender = function(url, containerId, objData) {
$.ajax({
url: url,
type: 'get',
success: function(template) {
var $html = Mustache.render(template, objData);
var $objContainer = $('div#' + containerId);
$objContainer.append($html);
}
});
};
the actual object
oneInputField: {
value:'put your title here',
rule_set: {
required: {
strName: 'required',
strErrorMsg: 'error message'
}
},
getRendered: function() { // I would like to cache this somehow
smallRender(templateUrl.input.narrow, jsonForm.fields.title.containerId, {
label: jsonForm.labels.title,
field: jsonForm.fields.title,
required: isRequired(jsonForm.fields.title)
});
}
},
So basicly i send an ajax call to get the main template, and for each element in the form I want to present, i call on the getRendered in main-tamplate mustache, and it basicly renders the content with the smaller template.
tempalte url is basicly a collections with the urls to all the templates. so if I specify templateUrl.input.narrow i will get the narrow input element and so on.
Not sure as I mentioned if this is the "correct" way of doing it, or how good it will scale in a big environment, but it works.
I will mark my this as the correct answer (if I'm even allowed), since there are no other answers that solves my problem.
Looking for some insight into this problem.
I have dynamically generated links on a page that launch a lightbox ie they use a rel="lightbox[...]" I'm also putting a class on the hyperlink to make a tooltip work.
<a id="a_-1_6" class="Tips2" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">
And in the dom ready event
var Tips2 = new Tips($$('.Tips2'), {
initialize: function() { this.tip.fade('hide'); },
onShow: function(tip) { tip.fade('in'); },
onHide: function(tip) { tip.fade('out'); }
});
This all works fine except the tip uses the rel attribute to store data, i'm presuming as its a pre-html5 - so my question is would this mean I need to make my own version of the Tips class in mootools to work off the data.* attributes? I'd like to see I'm not barking up the wrong tree before I try that.
Thanks
Could you make another element inside the Ahref, like:
<a id="a_-1_6" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">
<span class="Tips2">blah</span>
</a>
This way, you can avoid the conflict.
Tips' documentation states that you can change which property is checked for the tip text. By default, it is rel or href, but you can change it when initializing the new Tip:
var Tips2 = new Tips($$('.Tips2'), {
initialize: function() { this.tip.fade('hide'); },
onShow: function(tip) { tip.fade('in'); },
onHide: function(tip) { tip.fade('out'); },
text: 'data-text' // Will now check the data-text property for tooltip text
});