EES Plugins

(Scott Hall) #1

Hey peeps, looks like EES plugins are taking off in a big way and some of the other threads in the forums are getting a little polluted with off topic replies, lets use this space to discuss EES plugins. People don't realise how easy it can be to add your own stuff to the interface without touching the core code files, you just need to get over the first few steps.


Disclaimer: some of these plugins are use case specific and may not work in your environment but should give any keen web client side dev (peeps with JS skillz) enough to get their creative juices flowing.



Some of the other forum posts/replies that could help you with plugins are:



[list=1]

  • Start of with something very basic so you understand what is going on: http://manuals.matrix.squizsuite.net/ees/chapters/javascript-plugins[]Correcting 'preview' mode design issues: http://forums.squizsuite.net/index.php?showtopic=7405&view=findpost&p=37996[]Asset finder custom caching: http://forums.squizsuite.net/index.php?showtopic=7667&view=findpost&p=38390 (logic added to EES core in new release)[*]Customising metadata field: http://www.palitsyn.com/blog/squiz-suite/squiz-matrix-easy-edit-suite-and-related-content (created by Anton Palitsyn and Sren Silva of the UK team)Once you get your hands dirty we think it would be great if you shared you're ideas at http://community.squiz.net/ so other users can connect the dots.



    We'll update the above links as more simple examples become available, but throw you're questions at us in here.



    Cheers



    The EES Team
    • (Scott Hall) #2

    So we've had some feedback about monitors with low screen res and how the current creation wizard hasn't been optimised for this (pretty much every thing else is for 1024x768) somehow this slipped under the radar. You have a couple of options:

    1. Use custom CSS style overrides to chop/change a few things to squeeze it in. But why ruin the experience for those with bigger screen res (we're almost at 80/20 for stats now) or for when screen res is upgraded? Well you could try:
    2. Bring custom style overrides in using EES plugin based on screen res detection as per below example. You might need to tweak the height/width variables.


        
    
    /**
     * EES plugin -     Example of dynamically overriding EES CSS based on low screen res detection.
     *                  jQuery solution may differ across designs/desktop setup.
     *                  Use this as a guide to get the creative juices flowing.
     *                  More info on plugin use can be found here: http://manuals.matrix.squiz.net/ees/chapters/javascript-plugins
     * Author -         Scott Hall
     * Date -           13 December 2010
     * Last Modified -  13 December 2010
     */
     
    EasyEdit.plugins.screenResOverrides = {
    
    // URL of custom CSS file.
    customStylesURL: 'http://www.example.com/css/ees-customlowres.css',
    
    init: function() {
        var self = this;       
        // Load new styles after EES is loaded.
        EasyEditEventManager.bind('EasyEditAfterLoad',self.addLowResSyles);
    },
    
    /*
    *    Only add CSS if screen res is lower than a certain height and width.
    */
    addLowResSyles: function(){
        var self = this;
        var minWidth = 1024;
        var minHeight = 768;
        newHeadCSS = '';
        // Detect min size and apply styles.
        if ((screen.width<=minWidth) && (screen.height<=minHeight)){
            jQuery('head').append(newHeadCSS);
        }
    } // End addLowResSyles.
    
    }; // End EasyEdit.plugins.screenResOverrides.
    (Darren Johnston) #3

    Hi ,
    I am trying to add a new custom asset type to EES (modified standard page asset).

    Having issues keeping it separated from the main code. If I try to add another asset type to the 'Pages' category like below all I see is the asset types from the plugin, all the standard ones are gone.



    how do you add more data to an object property 'AssetWizardCategoryData '?



    (EES build 1858)

    <br /> <br /> <br /> <br /> AssetWizardCategoryData = {<br /> &#39;Pages&#39;: [<br /> {<br /> type_code: &#39;page_standard&#39;,<br /> display_name: &#39;Standard Page&#39;,<br /> interface_type: &#39;wizard_default&#39;, // Corresponds to template<br /> description: &#39;Pages are used to create standard content within &#39; +<br /> &#39;your site such as a page with headings, hyperlinks &#39; +<br /> &#39;and images.&#39;<br /> },<br /> {<br /> type_code: &#39;page_person&#39;,<br /> display_name: &#39;Person Page&#39;,<br /> interface_type: &#39;wizard_default&#39;, // Corresponds to template<br /> description: &#39;Creates a Person asset profile page&#39;<br /> }<br /> ]<br /> }; //end AWCD<br /> <br /> }<br /> <br /> }<br />



    :) have sorted it just recreated the AssetWizardCategoryData object in my plugin with all the categories and it overwrites the default js settings.