icons for kfm

Images now have auto-generated icons for them.

It was interesting developing these – a major difference between Internet programming and desktop applications, is the extreme slowness of the Internet at times.

As an example, I’ll walk through an experience of loading up the Test directory in the demo (click the image icon, then Browse Server), while my computer is under a heavy network load (I have discovered the treasure of public domain films).

  1. Initial file directory, with icons depending on the extension of the file:
  2. The browser then requests the addresses of different icons for those files that might be images (again, based on the extension):
  3. The browser finally finishes replacing the icons.
  4. On a slow network, the major bottleneck was step 2 above. The reason for this was that when a browser is asked to replace the background image of an element, it does it immediately, whether that image is in its memory yet or not. Notice that there are two empty spaces there – those oare icons where the original default icon has been cleared, but the new replacements have not yet loaded.

    So, the solution was to first load the image, then replace the element’s background.

    How? Simple:

        var img=newImg(image_data.icon);
        setStyles(img,'width:1px;height:1px');
        img.onload=function(){
          var p=this.parentNode;
          setStyles(p,'backgroundImage:url("'+p.kfm_attributes.image_data.icon+'")');
          p.removeChild(this);
        }
        el.appendChild(img);
        el.kfm_attributes.image_data=image_data;
    

    Obviously in the above, el is the icon element, and image_data is some data retrieved from the server about the image.

    Now, that’s all nice and dandy, and solves the huge “blank space” issue, but it still takes a little bit of time to load. What if you need to go back to that directory at some future time?

    Obviously, a bit of caching is needed. If you need to view that directory again, load up the file list as normal, then see if there is a cached copy of that file’s data. In the kfm, I store this data in kfm_filesCache. For example, the line directly after the above block is this:

        kfm_filesCache[kfm_cwd+'/'+file]=el.kfm_attributes;
    

    There is a subtle problem here, though, which can trip up even the most experienced web developers every now and then – what if the image changes? Obviously, if you change an image (rotate, etc), then you want the icon to also change. This can be tricky if you only refer to the image as “blah.png”.

    Solution to this is to change the src of the image to “blah.png?5897451” (a random number) or similar, and cache /that/ address, then when the image changes, simply remove the cached copy (set it equal to null), then rebuild the data. The new icon will have a different random number, so will reload.

    For example, the line directly preceding the block above is this one:

       if(!kfm_filesCache[kfm_cwd+'/'+file])image_data.icon=image_data.icon+'?'+Math.random();
    

    I hope this was helpful to someone, and not just of interest to myself šŸ˜‰

7 Comments.

  1. Incredible work dude! Just what I was looking for.
    Is it CSS compatible or customizable?

    By the way, may I ask something related to FCKE?

    I just cant handle tags, i just get lines of text followed by s, and my site needs to be paragraph compliant.

    Got any help?

    Im using FCKEditor 2.3Beta with own styles.xml and some config changes.

  2. Ok i fu**ed it up, i put actual HTML tags on the comment and obviously are prohibited. The tag i cant handle is the p tag. I only get br tags after every carriage return.

  3. it is customisable – the icons used are determined by a css sheet, kfm.css. by editing that, you can edit the look of the file manager.

    There is an option in fckconfig.js, FCKConfig.UseBROnCarriageReturn. If you set that to false, you should get <p> elements instead of <br>s. If not, then try asking in the fckeditor forum.

  4. Is there a way to make that UseBrOnCarriageReturn spec to work on Firefox????

  5. Hi,
    Do I understand correctly that this filemanager is meant for the FCKeditor? If so, how can I integrate your editor into it? It looks and works much better than the default editor of version 2.3.
    Arjan

  6. Arjan, yes indeedy. I was kind of frustrated by the limitations of the original, so started my own.

    Download a recent copy of the plugin here: http://demo.verens.com/fckeditor/2.3tr/editor/plugins/kfm-20060609.tbz2 – then unzip that in your /editor/plugins/ directory, and add this line to the bottom of your fckconfig.js: FCKConfig.Plugins.Add(‘kfm’);

    simple as that!

  7. Thank you! It works great although I get some png/zlib errors from GD when it’s loading the thumbnails.
    Anyway, it works great already, and I sure hope you keep developing it and that it may one time become part of FCKeditor.

%d bloggers like this: