# j-WizardExpert

> Едно просто решение за създаване на напреднали магьосници. магьосницата изтегля стъпки (като HTML части) в съответствие с схемата. стъпките са вградени в персонализирани сглобове, така че те са под валидиране.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: bg
Content-SHA256: d037dde7d98f4c0143124618d97f3e6bcf2a0184b6a7350d2f8f21d1c3143057
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Едно просто решение за създаване на напреднали магьосници. магьосницата изтегля стъпки (като HTML части) в съответствие с схемата. стъпките са вградени в персонализирани сглобове, така че те са под валидиране.

__Конфигуриране__

- `output {String}` - пътят за изход, обектът ще съдържа целия изход (степента ще бъде свойства)
- `exec {String}` е пътят към `method(output_object)`, той се изпълнява, ако магьосникът не съдържа следващия път
- `next {String}` е пътят, тук ще бъде назначен следващият етап с собствеността на `enabled {Boolean}`
- `back {String}` е пътят, тук ще бъде присвоен предходният етап с собствеността на `enabled {Boolean}`
- `validate {Boolean}` позволява валидиране (предварително: `true`)

__схема__:

```js
{
	'step1': { url: 'step1.html', next: 'step2', validate: false },
	'step2': { url: 'step2.html', next: 'step3' },
	'step3': { url: 'step3.html' }
}
```

- Съставът разширява всяка стъпка, като добавя нови свойства `enabled {Boolean}`, `id {String}`, `prev {String}`

Използвайте го с `<ui-component name="wizardexpert">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

```html example.html
<style>
	button { background-color: white; border: 1px solid #E0E0E0; font-size: 12px; padding: 5px 15px; }
	button:hover { background-color: #F8F8F8; }
	button:disabled { background-color: #F0F0F0; cursor: not-allowed; color: #A0A0A0; }
</style>

<div style="border:1px solid #E0E0E0;width:300px;height:150px;padding:20px;margin-bottom:20px">
	<ui-component name="wizardexpert" path="currentstep" config="output:currentoutput;next:nextstep;back:prevstep;exec:steps_finish">
		<script type="text/plain">
			{
				'step1': { url: 'step1.html', next: 'step2', validate: false },
				'step2': { url: 'step2.html', next: 'step3' },
				'step3': { url: 'step3.html' }
			}
		</script>
	</ui-component>

</div>

<nav>
	<ui-component name="validation" path="outputdata">
		<button is="is-button" path="prevstep" config="enabled:value && value.enabled;click:steps_back" disabled>Back</button>
		<button is="is-button" path="nextstep" config="enabled:!value||value.enabled;html:value?'Next':'Finish';click:steps_next" disabled>Next</button>
	</ui-component>
</nav>


<script type="text/html" id="step1">
	WELCOME
</script>

<script type="text/html" id="step2">
	<ui-component name="input" path="?.name" config="required:1">Type your name</ui-component>
</script>

<script type="text/html" id="step3">
	FINISH
</script>

<script>

	var currentstep = 'step1';
	var currentoutput = {};

	ON('request', function(options) {
		// Hijack response
		if (options.url.indexOf('step') !== -1)
			options.respond($('#' + options.url.replace('.html', '')).html());
	});

	function steps_next() {
		SET('currentstep', 'NEXT');
	}

	function steps_back() {
		SET('currentstep', 'BACK');
	}

	function steps_finish() {
		alert('DONE: ' + STRINGIFY(currentoutput));
	}

</script>
```