Inputfieldmodule doesn't autoload their js/css

[apeisa]

I have this module (InputfieldTapuEditor.module):

<?php
class InputfieldTapuEditor extends Inputfield {
public static function getModuleInfo() {
 return array(
  'title' => 'Inputfield Tapu Editor',
  'summary' => 'Lomake-editori ilmoittautumislomakkeiden luontiin ja muokkaamiseen.',
  'version' => 001,
  'permanent' => true
 );
}
protected $event_id = 0;
protected $current_form;

public function ready() {
}
public function ___render() {
 $this->event_id = $this->input->get('id');
 $form = new TapuFormsRender($this->input->get('id'));
 $this->current_form = $form->returnFormArray();

 /* Why are these required??
 $this->config->scripts->add($this->config->urls->siteModules . "InputfieldTapuEditor/InputfieldTapuEditor.js");
 $this->config->styles->add($this->config->urls->siteModules . "InputfieldTapuEditor/InputfieldTapuEditor.css");
 */

 $out = "<div class='header'>Lataa mallipohja | Aloita uusi lomake | Tallenna pohja malliksi</div>";

 $out .= "<ul id='valinnat'>";
 foreach($this->current_form as $field) {
  if (strlen($field['custom_id']) > 0) $id = $field['custom_id'];
  else $id = $field['id'];
  $attrs = array(
'selected' => 'selected'
);
  $select->addOption($id, $field['nimi'], $attrs);
  $out .= "<li class='tyyppi-". $field['tyyppi'] ."' data-id='$id'><a href=''><span class='ui-icon ui-icon-gear'></span>" . $field['nimi'] . "</a></li>";
 }
 $out .= "</ul>";
 $out .= "<br><br><br><pre>";
 $out .= print_r($this->current_form, true);
 $out .= print_r($this->saatavillaKiinteat, true);
 $out .= print_r($this->kaytetytKiinteat, true);
 $out .= "Tää on editori</pre>";

 return $out;
}

}

For some reason it doesn't load automatically the .css and .js files, called InputfieldTapuEditor.css|js

It might be because of the way that is initialized, it get's put into page editor through autoload module:

<?php
class TapuEventForm extends WireData implements Module {
public static function getModuleInfo() {
 return array(
  'title' => 'Tapu Event Form',
  'summary' => 'Lisää tapahtumasivun muokkausnäkymään "ilmoittautumislomake" välilehden',
  'version' => 001,
  'permanent' => false,
  'autoload' => true,
  'singular' => true
 );
}
public function init() {
}
public function ready() {
 $page = wire('page');
 if ($page->template->name != "admin") return;
 $id = $this->input->get->id;
 $page = wire('pages')->get($id);
 if ($page->id) {
  if ($page->template->name != "events-item") return;
 } else {
  return;
 }
 $this->addHookAfter('ProcessPageEdit::buildForm', $this, 'addFormTab');
}
public function addFormTab($event) {
 $this->config->styles->add($this->config->urls->siteModules . "Tapu/Tapu.css");
 $id = $this->input->get->id;
 $wrapper = $event->return;
 $formTab = new InputfieldWrapper();
 $formTab->attr('id', $this->className() . 'View');
 $formTab->attr('title', $this->_('Ilmoittautumislomake'));
 $editor = new InputfieldTapuEditor();
 $editor->label = $this->_("Ilmoittautumislomake");
 $editor->attr('id', 'tapuEditor');

 $formTab->append($editor);
 $wrapper->append($formTab);
 $event->return = $wrapper;
}
public function install() {
}
public function uninstall() {
}
}

Is the autoload module reason for not to load the .css and js?

Also: I am planning to use other Inputfield modules inside my InputfieldTapuEditor.module. Is that possible? They seem to render fine, but same problem there: no js or css loaded. Or rather: if I try to render AsmSelect field there, it gives me just a plain multiselect (I guess that is how it should work if js isn't available).

[apeisa]

Btw: reason I am building this (it will be event registration form editor) as a Inputfield instead of Inputfield & Fieldtype combo is that I do need more than one db table to store the values. Should or could I still use fieldtype here?

My current plan is to build Inputfield, which is appended to right pages through autoload module - and saving db values will be done in ___processInput method.

[Soma]

As you know I'm also struggling everytime I create a module with this autoadd script/css feature, sometimes it works and sometimes not. I asked several times and got told it only works for process and inputfield modules, so I stopped asking

Sometimes I need to str_replace, sometimes I need to use ->scripts->add...

Here just one example of my module colorpicker:

<?php

/**
* An Inputfieldtype for handling Colors
* used by the FieldtypeColorPicker
*
* 19.01.2012 by Philipp "Soma" Urlich
* ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
*
*/

class InputfieldColorPicker extends Inputfield {

   public static function getModuleInfo() {
       return array(
           'title' => 'ColorPicker',
           'version' => 100,
           'summary' => 'Chose your colors the easy way.',
           'href' => 'http://processwire.com/talk/topic/865-module-colorpicker/page__gopid__7340#entry7340',
           'requires' => array("FieldtypeColorPicker")
           );
   }

   public function __construct() {
       parent::__construct();
       $this->setAttribute('type', 'hidden');
   }

   public function init() {
       parent::init();
       $this->config->styles->add($this->config->urls->InputfieldColorPicker . "colorpicker/css/colorpicker.css");
       $this->config->scripts->add($this->config->urls->InputfieldColorPicker . "colorpicker/js/colorpicker.js");
   }

   public function ___render() {
       $out = "\n<p><div id='ColorPicker_$this->name' style='border:2px solid #444;display:block;width:40px;height:40px;background-color:#".$this->value."'></div>";
       $out .= "<input " . $this->getAttributesString() . " /></p>";
       $out .= <<<_OUT
<script type='text/javascript'>
   $('#ColorPicker_$this->name').ColorPicker({
       color: '#$this->value',
       onShow: function (colpkr) {
           $(colpkr).fadeIn(500);
           return false;
       },
       onHide: function (colpkr) {
           $(colpkr).fadeOut(500);
           return false;
       },
       onChange: function (hsb, hex, rgb) {
           $('#ColorPicker_$this->name').css('backgroundColor', '#' + hex);
           $('#Inputfield_$this->name').val(hex).trigger('change');
       }
   });

</script>

_OUT;

       return $out; 
   }
}

[apeisa]

Yeah, maybe it is just inconsistent. I couldn't figure out any reason for that.

Now I created new Inputfield and Fieldtype, used them normally (not through autoload) and they load js|css just fine.

[ryan]

Any modules that extend: Inputfield, Process or ModuleJS will auto-load their CSS/JS files if they have the same name as the module and appear in the same directory. However, in order for that to work, their init() method has to be called. So if your module extends one of those, and has an init() method, then make sure to call the parent init() method:

public function init() {
 parent::init(); 
 // ... then your code
}

[Soma]

Any modules that extend: Inputfield, Process or ModuleJS will auto-load their CSS/JS files if they have the same name as the module and appear in the same directory. However, in order for that to work, their init() method has to be called. So if your module extends one of those, and has an init() method, then make sure to call the parent init() method:

public function init() {
 parent::init();
 // ... then your code
}

Ah my colorpicker example isn't what I thought.. I decided to leave colorpicker js files in a subfolder as is. Sorry for the false example. But it really confused me in other modules I've done for sure.

Just spoted something I didn't knew, thanks Ryan