I have a svelte app where I map channelcodes to imported logos and render that logo in a div that is in a focused or unfocused state. Currently I have been mapping 1 image and changing the CSS of the logo(SVG) conditionally. But I find it kind of hacky and makes more sense to switch between a focused and unfocused versions of the logo image. The style of the element I can change, but i don't know how to switch images through my mapping (I want to avoid long if statements or switch cases as there could be many logos).
How would I switch between two images? Let me know if more information is required. (One idea I thought was an array of two images and I pass in an index 0 or 1 somehow)
TS FILE
import { Television_ChannelCode } from '#gql/schema';
import Logo1 from '#logos/Logo1.svelte';
import Logo2F from '#logos/Logo2F.svelte';
import Logo2U from '#logos/Logo2U.svelte'
const map = new Map<Television_ChannelCode, any>();
map.set(Television_ChannelCode.News, Logo1);
//I want to switch between 2, use array?//
map.set(Television_ChannelCode.Sports, [Logo2F, Logo2U]);
export const getLogoFromTelevisionChannelCode = (
televisionChannelCode: Television_ChannelCode,
): any => {
return map.get(televisionChannelCode);
};
SVELTE FILE <--- Can change style but how to swap images??
{#if hasFocus}
<div class={focusedStyle}>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
{:else}
<div class="unfocusedStyle">
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
{/if}
In your example the if block could be avoided by combining the class
<div class={hasFocus ? 'focusedStyle' : 'unfocusedStyle'}>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
Your approach with the array could work like this
<div>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)[hasFocus ? 0 : 1]}/>
</div>
(if every channel had the two version array) but I think the better approach would be to stick to the one component per Logo version, handle the styling intern and export a hasFocus flag from components, so it could look like this
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)} {hasFocus}/>
Related
I have implemented form validation with formik and react. I am using material-UI.
<Formik
initialValues={{ name: '' }}
onSubmit={values => {
console.log('submitting', values);
}}
validate={values => {
alert();
let errors = {};
if (!values.name) {
errors.name = 'Name is required';
}
return errors;
}}>
{({
handleSubmit,
handleChange,
values,
errors
}) => (
<form onSubmit={handleSubmit}>
<div>
<input name="name"
onChange={handleChange}
name="name"
value={values.name}
type="text"
placeholder="Name">
</input>
{errors.name &&
<span style={{ color: "red", fontWeight: "bold" }}>
{errors.name}
</span>
}
</div>
<div>
<button>Submit</button>
</div>
</form>
)}
</Formik>
Above code is working fine for normal input tags but it is not working for Select and TextField material widgets.
Is there a compatibility issue with material UI ?
Please help.
As Chris B. commented, the solution is to wrap each desired element inside a React component that has what Formik requires. In the case of Material-UI, Gerhat on GitHub has created some of those components.
You can use those by downloading the source from the github link above. There is also a usage example there, showing how to use Gerhat's "wrapper" for a Material TextField and a Select.
In Gerhat's usage example, TextField is a component in that github repo; it isn't the Material UI TextField directly; it is a Formik-compatible "wrapper" around the Material TextField widget.
By looking at gerhat's source code, you can learn how to do the same for other Material widgets you need.
HOWEVER, gerhat's implementation may not be the easiest for a beginner to understand. Those wrappers are easy to use, but it may not be obvious from that code how to write your own wrappers for other widgets or components.
See my answer here for a discussion of Formik's <Field> and useField. Those are easier ways to "wrap" existing React components. (Not specifically Material-UI widgets, but AFAIK, you can wrap those like any other React component.)
If you do want to understand gerhat's approach, here are some comments about the code you'll see at github.
This is the source to TextField.jsx in that repo.
The "heart" of TextField.jsx, is its wrapping around Material's TextField. The generated virtual-DOM element (representing a Material TextField) is seen in these lines:
return (
<TextField
label={label}
error={hasError}
helperText={hasError ? errorText : ''}
{...field}
{...other}
/>
)
See the source link above, for the details of how this is made compatible with Formik. IMHO, a fairly advanced understanding of both React and Formik is required, to understand what is being done there. This is why I mentioned Field and useField as the place to start, for writing your own "Formik-compatible wrappers".
One detail I'll mention. The implementation relies on a file index.js in the same folder as TextField.jsx, to map the default of TextField.jsx, which is FTextField, to the name TextField, which is how you refer to it in the "usage" code at the start of this answer. SO Q&A about index.js file of a React component.
index.js contents:
export { default as TextField } from './TextField'
The other two files in the TextField source folder are ".d.ts" files. See this Q&A to understand those. You don't need them unless you are using TypeScript.
In my Laravel 5.6/"vue": "^2.5.7/"vuetify": “^1.0.8” application I use carousel of
images ( https://vuetifyjs.com/en/components/carousels#introduction )
it works but if there are uploaded images of different size the images are partly cut and view is broken.
I tried to make like :
<v-carousel>
<v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :src="nextArtistImage.image_url" :key="nextArtistImage.id"
:alt="nextArtistImage.image_url" style="width: 200px;height:auto;">
<div class="carousel_image_title">{{ nl2br(concatStr(nextArtistImage.description, 100)) }}</div>
</v-carousel-item>
</v-carousel>
But my attempts to change style did not alter anything...
If there is a valid way ?
Thanks!
Try...
<v-carousel>
<v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :key="nextArtistImage.id">
<img :src="nextArtistImage.image_url" style="width:200px;height:auto;" :alt="nextArtistImage.image_url"/>
</v-carousel-item>
</v-carousel>
The above html takes advantage of the default slot for the v-carousel-item.
<v-carousel height="auto">
<v-carousel-item></v-carousel-item>
</v-carousel>
enter link description here
Based on Vuetify Documentation
As I saw images are set as background pictures, for <div class="v-image__image--cover"></div>. They are not rendering on DOM as images (for example: <img src="image_src" />). So if you want to change image view, you have to override css properties of that div, for example background properties (background-position, background-size ...).
I am not sure it is a valid way or not, but if you want to change item's height you have to override carousel's height (<v-carousel>), because the height of <v-carousel-item> determined by height of carousel itself, or you have to override whole structure of carousel (change positions and some other css properties).
But there is one issue, I guess you want to render pictures of different original heights at one height, so that it does not turn off the view. This is a common problem for front-end developers. By the way, one of the best way to solve this problem is the structure you are trying to override.
The code below, shows the entire image within the carousel. Set the height of the v-carousel (300 in this example) and set that same value for the v-img max-height. If there are images that that wide but short, then limits to the width should also be added.
<v-carousel cycle v-model="model" height="300">
<v-carousel-item
v-for="(item, i) in items"
:key="i"
>
<v-img :src="item.src" contain max-height="300"></v-img>
</v-carousel-item>
</v-carousel>
Where items is defined as:
<script>
export default {
data() {
return {
items: [
{ src: require('#/assets/photo1.jpg') },
{ src: require('#/assets/photo2.jpg') },
],
};
},
};
</script>
#peter.edwards just a tiny mistake on your code:
<img src="nextArtistImage.image_url" style="width:200px;height:auto;" :alt="nextArtistImage.image_url"/>
Source of image cannot be loaded because is a string so the correct form should be <img :src="nextArtistImage.image_url" :alt="nextArtistImage.image_url"/> so the final form will be
<v-carousel>
<v-carousel-item
v-for="(itemnextArtistImagei) in artistImagesList"
:key="i"
><img :src="nextArtistImage.image_url" :alt="nextArtistImage.image_url"/>
</v-carousel-item>
</v-carousel>
Today I'm learning Vue.js, and I have a few ideas of where it might be really useful in a new project that's an off-shoot of an existing, live project.
I like the idea of trying to replace some of my existing functionality with Vue, and I see that Components may be quite handy as quite a lot of functionality is re-used (e.g. Postcode lookups).
Once of the pieces of functionality I've used for an age is for invalid form elements - currently in jQuery when a form input or textarea is blurred I add a class of form__blurred, and that is coupled with some Sass such as:
.form__blurred {
&:not(:focus):invalid {
border-color:$danger;
}
}
This is to avoid styling all required inputs as errors immediately on page load.
I'm totally fine with doing this in jQuery, but I figured maybe it could be done in Vue.
I have an idea of how I might do it with components thanks to the laracasts series, but my form inputs are all rendered by Blade based on data received from Laravel and it doesn't seem like a neat solution to have some of the inputs rendered in Javascript, for a number of reasons (no JS, confusion about where to find input templates, etc).
I figured something like the following simplified example would be handy
<input type="text" class="form__text" v-on:blur="blurred" v-bind:class="{ form__blurred : isBlurred }" />
<script>
var form = new Vue({
el : '.form__input',
data : {
isBlurred : false
},
methods : {
blurred : function() {
this.isBlurred = true;
}
}
});
</script>
That actually works great but, as expected, it seems like using a class selector only selects the first instance, and even if it didn't, I'm guessing changing the properties would apply to all elements, not each one individually.
So the question is - is this possible with pre-rendered HTML, in a way that's smarter than just looping through a selector?
If it is, is there a way to create the Vue on a .form element and apply this function to both .form__input and .form__textarea?
Or, as is probably the case, is this just not a good use-case for Vue (since this is actually a lot more code than the jQuery solution).
Sounds like a great use case for a Custom Directive.
Vue allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you just need some low-level DOM access on plain elements, and this is where custom directives would still be useful.
<div id="app">
<input type="text" name="myforminput" v-my-directive>
</div>
<script>
Vue.directive('my-directive', {
bind: function (el) {
el.onblur = function () {
el.classList.add('form__blurred');
}
}
});
var app = new Vue({
el: '#app'
});
</script>
You can also add the directive locally to a parent component, if it makes sense for your application.
I try to read pics (for a slider) from a folder. I have a marker called ###SLIDER### and my images are in the fileadmin/sliders/ folder.
I would like to achieve the following output as in the template that I bought:
<div class="camera_wrap">
<div data-src="fileadmin/sliders/slider_1.jpg">
<div class="camera-caption fadeIn">Text_1</div>
</div>
<div data-src="fileadmin/sliders/slider_2.jpg">
<div class="camera-caption fadeIn">Text_2</div>
</div>
<div data-src="fileadmin/sliders/slider_3.jpg">
<div class="camera-caption fadeIn">Text_3</div>
</div>
</div>
How can I load the images from a folder using Typoscript and display it this way?
The following code will give you what you want but without the captions. It works in TYPO3 4.5.x. I'm not sure that it works in higher versions as the description of filelist in the current (as of 16/10/2013) manual is somewhat confusing so I don't know if something has changed in the newer versions.
YOUR_MARKER = TEXT
YOUR_MARKER {
filelist = fileadmin/sliders/
split {
token = ,
cObjNum = 1
1 {
current = 1
wrap = <div data-src="fileadmin/sliders/|"></div>
}
}
wrap = <div class="camera_wrap">|</div>
}
NOTE: This is a very simple example that presumes that all the images in the folder are already resized to appropriate dimensions and that all the files within the folder are images. To make it better, the first (1) object of the split might be set to be IMG_RESOURCE. This way it would check that only images are outputted and it would allow you to use GIFBUILDER to resize the images if needed.
I have a complex form that has a static section and one that can have from 0 to many divs that containing radio buttons, textfields and textareas.
I'm wondering what's the best way to add elements to the section that has a variable amount of form inputs. I have a working solution, but it's probably not the best:
I use javascript to add a chunk of html code and append it to the div containing the variable amount of input fields. In the code sample below, my javascript code would do something like
Javascript
document.getElementId('dynamic_form_stuff').innerHTML += "<div id='element3'>Form stuff</div>";
HTML
<form>
<div id="static_form_stuff">
form fields
</div>
<div id="dynamic_form_stuff">
<div id="element1">
Radio buttons stuff
Text field stuff
Text area stuff
</div>
<div id="element2">
Radio buttons stuff
Text field stuff
Text area stuff
</div>
</div>
</form>
I think this largely depends on what you are doing elsewhere, and how many items you are adding, as well as how you want to add event handlers.
I tend to find it easier to use the DOM methods if I need to add event handlers, but if you are just adding to a form with a submit button, then using innerHTML is faster, as shown here: http://www.quirksmode.org/dom/innerhtml.html.
I would personally do something like:
var elem = document.getElementId('dynamic_form_stuff');
var div = document.createElement('div'); // create element
div.setAttribute('class', 'myclass'); // define attributes
elem.appendChild(div);
// and/or more code.....
This gives me more control in adding attributes and style there.