Leaderboard

ProcessSlider Module (alpha version) Repository https://github.com/mauricius/ProcessSlider Introduction Like many of you, I came to ProcessWire from Wordpress and immediately I fell in love with its power and its clean syntax. I have to say that PW has become my default choice for building websites. However there is only one thing that me and my clients miss from WordPress and is the ability to visually build image sliders through plugins (Nivo, Revolution Slider, LayerSlider, just to name a few). So I decided to create a module for this purpose. ProcessSlider essentialy is an editor for the wonderful Jssor plugin (http://www.jssor.com/) which is absolutely free. The module creates a new page under the Setup menu which allows users to easily add image sliders on the site using an intuitive visual editor. To each slider you can easily add images and other custom and animate them using the transition effects provided by the Jssor slider. The ProcessSlider module in reality is composed by three different modules: ProcessSlider: the main module InputfieldSlider/FieldtypeSlide: allows the user to use an existing slider inside a page MarkupSlider: converts the slider into Jssor compatible markup and optionally provides the necessary initialization script Features Custom slider size Drag and Drop interface Move and resize elements Slides background with images from existing PW pages Slider Preview (with the provided MarkupSlider module) Predefined style classes for Elements Add or remove Slides Add or remove elements Change slide order visually Jssor skins and bullets support Visual Timeline Optional responsive/fullwidth slider Predefined elements: Images, Text, Links, Image as link, Div blocks, Youtube Videos Animation Options (In and Out): Animation type, Delay, Duration The editor is built with Vue.js+Webpack and uses jQuery for D&D and resize functionalities. Release I'm going to release the module in a couple of weeks, there are still some minor tweaks and improvements that I would like to add. Demo Screencast (be sure to watch it at least at 720p) I hope it will be helpful to the community and I would be glad to get feedback or suggestions for improvement! Please also consider that it is my first PW module, so probably I'm missing some best practices, hopefully the most experienced developers can throw me some hints

welcome mauricius! that's insane drag&drop timeline?! what comes next? an online pw video editing module?! looks really awesome! thanks for the screencast. i also didn't know jssor.com

I am currently looking into dependent select fields or cascading select fields (as they are sometimes called), too. So I have a quite similar scenario as yours. I already have setup some working code that I want to share here. For a better understanding about my scenario: 1. parent countries with list of all countries 2. parent destinations, each destination gets assigned one country through "countries" pages asm select field. 3. parent tours, each tour gets assigned 1 or more countries through "countries" field and 1 or more destinations from "destinations" pages asm select field In tours form, when countries are selected I want to filter the destinations field to only show destinations of the previously chosen countries. For my solution I am using this jQuery plugin. So you need to call this in your template. My code is still a work in progress and written around my requirements but should be fairly easy to transfer to other contexts. Template code <?php // do not load _main.php for ajax requests if($config->ajax) $useMain = false; // provide dropdown data for the ajax request if ($input->post->depdrop_parents) { $ids = $input->post->depdrop_parents; $params = $input->post->depdrop_params; $options = []; $option = []; if (count($ids) == 1) { // only 1 id $pages = $pages->find("template=$params[0], countries=$ids[0]"); } // todo else { handle multiple ids} foreach ($pages as $page) { $option["id"] = $page->id; $option["name"] = $page->title; $options[] = $option; } echo json_encode(['output'=>$options, 'selected'=>'']); } // render the form if (!$config->ajax) { $content = ""; $destinations = $pages->find("template=destination,sort=countries.title"); $options = []; $option = []; // build options array for first select field: this is very specific to my scenario foreach ($destinations as $destination) { if (seekKey($options, $destination->countries->first()->id) == $destination->countries->first()->id) continue; $option["value"] = $destination->countries->first()->id; $option["name"] = $destination->countries->first()->title; $options[] = $option; } $content = "<form> <select id='parent' name='countries'>"; foreach ($options as $option) { $value = $option["value"]; $name = $option["name"]; $content .= "<option value='$value'>$name</option>"; } $content .= "</select>"; $content .= "<select id='child-1' name='destination'> </select>"; // need hidden input with value "destination" to populate params for the JS plugin // with the value that will be used as template value above in line 14 $content .= "<input type='hidden' id='dest' value='destination'> //todo submit button and logic </form>"; } In my functions.inc // Find the value in a multidimensional array function seekKey($haystack, $needle){ $output = ""; foreach($haystack as $key => $value){ if($value == $needle){ $output = $value; }elseif(is_array($value)){ $output = seekKey($value, $needle); } } return $output; } Javascript $(document).ready(function () { $("#child-1").depdrop({ url: './', depends: ['parent'], params: ['dest'], initialize: true }); }); Hope this helps.

I can definitely see the need for just being able to show the time picker. I have a custom inputfield for entering lists of hours that does this. The JS in the module customizes the picker to only show date — even though it's using the core datetimepicker.js $(document).on("focus", ".InputfieldHours .datepicker", function() { $(this).timepicker({ timeFormat: 'h:mm tt', ampm: true }); }); bah! Just noticed some alignment issues on my time picker in safari. :/

It should do that automatically. PW requires a user to at least have that role, so it'll add it if it's not there. You could do this with a hook. Add this to the top of your form-builder.php template file: $forms->addHookAfter('InputfieldForm::processInput', null, 'hookProcessInput'); function hookProcessInput(HookEvent $event) { $form = $event->object; $field = $form->get('username_field'); // substitute the name of your username field if(!$field) return; // probably a different form you don't want $username = $sanitizer->pageName($field->attr('value')); $user = $users->get($username); if($user->id) $field->error("That name is already taken"); } This was written in the browser rather than tested here, so may need tweaking, but let me know if you find it provides the capability you needed or doesn't?