GUI | Closer to Code

Pracując dzisiaj nad Susanoo dla Senpuu, wyszło na jaw, że korzystanie z takiego selectora:

$$('tr[class = "parent_'+id+'"]')

kiedy klasa nie jest jedna ale jest ich kilka, jak np. w takim przypadku:

class="parent_252342 body status_2"

nic nie da.

Wyniki nie zostaną poprawnie wybrane ponieważ nie pasują "idealnie". Aby w takim wypadku wybrać elementy z klasą parent_ID ale także z innymi, musimy skorzystać z takiego selectora:

$$('tr[class ~= "parent_'+id+'"]')

Poniżej prezentuję jeszcze kilka innych przykładów selectorów:

$$('.class-a,.class-b');
$$('div[class~="class-a"]')
$$('td:not(.class-b)');
$(element).select('.class-a');

w zasadzie to co tutaj widać, to w dużej mierze wykorzystanie selectorów dostępnych w CSS3.

Korzystając z FCKEditora, mamy możliwość zdecydowania w pliku fckconfig.js czy pasek narzędziowy ma być domyślnie rozwinięty czy też nie.

Jednak w wielu przypadkach, jest to za mało. Często nie chcemy w całej aplikacji definiować jednego "stylu", a zależnie od tego gdzie jesteśmy, mieć rozwinięty bądź nie, ten pasek narzędziowy.

Przykładem tego może być prosty CMS, gdzie mamy miejsce edycji tekstów - w takim miejscu ten pasek powinien być rozwinięty. Jednak mamy też np miejsce wpisywania opisów do galerii (pomijając fakt że tam wystarczyłoby zwykłe textarea) - w takim miejscu użytkownicy zazwyczaj wpisują tekst, nie "zdobiąc" go zbytnio.

Do Railsów jest plugin umożliwiający wykorzystywanie FCKEditora, dodając wygodny helper fckeditor_textarea. Rozwiązanie to ma jednak jedną zasadniczą wadę: nie można sterować z jego poziomu parametrem: toolbarStartExpanded.

Pokusiłem się i napisałem łatkę, a raczej wersję poprawioną metody fckeditor_textarea. W pliku fckeditor.rb pluginu, znajdujemy wyżej wymienioną metodę i dopisujemy od linijki 30:

      if options[:toolbarStartExpanded].nil?
        toolbar_expand = ''
      else
        toolbar_expand = "oFCKeditor.Config['ToolbarStartExpanded'] = #{options[:toolbarStartExpanded].to_s}"
      end

A następnie w javascript_tag zwracanym, jako trzeci wiersz:

"#{toolbar_expand}\n"<<

i tyle :)

Od teraz możemy korzystać z tego w następujący sposób:

  <%= fckeditor_textarea(:text, :content,
    :toolbarSet => 'Text',
    :toolbarStartExpanded => false,
    :width => '75%',
    :height => '250px',
    :cols => '50',
    :rows=> '8',
    :id => 'fckedit') %>

Poniżej cała metoda fckeditor_textarea:

    def fckeditor_textarea(object, field, options = {})
      var = instance_variable_get("@#{object}")
      if var
        value = var.send(field.to_sym)
        value = value.nil? ? "" : value
      else
        value = ""
        klass = "#{object}".camelcase.constantize
        instance_variable_set("@#{object}", eval("#{klass}.new()"))
      end
      id = fckeditor_element_id(object, field)

      cols = options[:cols].nil? ? '' : "cols='"+options[:cols]+"'"
      rows = options[:rows].nil? ? '' : "rows='"+options[:rows]+"'"

      width = options[:width].nil? ? '100%' : options[:width]
      height = options[:height].nil? ? '100%' : options[:height]

      if options[:toolbarStartExpanded].nil?
        toolbar_expand = ''
      else
        toolbar_expand = "oFCKeditor.Config['ToolbarStartExpanded'] = #{options[:toolbarStartExpanded].to_s}"
      end

      toolbarSet = options[:toolbarSet].nil? ? 'Default' : options[:toolbarSet]

      id = options[:id].nil? ? id : options[:id]
      value = options[:value].nil? ? value : options[:value]

      if options[:ajax]
        inputs = "<input type='hidden' id='#{id}_hidden' name='#{object}[#{field}]'>\n" <<
                 "<textarea id='#{id}' #{cols} #{rows} name='#{id}'>#{value}</textarea>\n"
      else
        inputs = "<textarea id='#{id}' #{cols} #{rows} name='#{object}[#{field}]'>#{value}</textarea>\n"
      end

      js_path = "/javascripts"
      base_path = "#{js_path}/fckeditor/"
      return inputs <<
        javascript_tag("try{var oFCKeditor = new FCKeditor('#{id}', '#{width}', '#{height}', '#{toolbarSet}');\n" <<
                       "oFCKeditor.BasePath = \"#{base_path}\"\n" <<
                       "#{toolbar_expand}\n"<<
                       "oFCKeditor.Config['CustomConfigurationsPath'] = '#{js_path}/fckcustom.js';\n" <<
                       "oFCKeditor.ReplaceTextarea();\n}catch(e){}")
    end

Tag: GUI

Krótko i szybko o selectorach JS w Prototype

Fckeditor, Rails oraz toolbarStartExpanded czyli autorozwijanie paska narzędzi