Yii Framework Forum: 2 Similar Widgets With 2 Different Css On 1 Site - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 Similar Widgets With 2 Different Css On 1 Site Rate Topic: -----

#1 User is offline   FlavorFlav 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 03-May 11

Posted 06 February 2013 - 09:01 PM

hi,

is it possible to use 2 instances of a widget with 2 different css on 1 site?

for example:

<?php
  $this->widget('application.extensions.mbmenu.MbMenu',array(
      'items' => $items1;
      'cssFile' => Yii::app()->request->baseUrl . '/css/mbmenu1.css',
  ));

  $this->widget('application.extensions.mbmenu.MbMenu',array(
      'items' => $items2;
      'cssFile' => Yii::app()->request->baseUrl . '/css/mbmenu2.css',
  ));
?>



yii includes both css files perfectly... but the problme is, that both css definitions overwrite each other, because both contains the same css classes

you understnad my problem?

is there any solution?
0

#2 User is offline   redguy 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 818
  • Joined: 02-July 10
  • Location:Central Poland

Posted 07 February 2013 - 04:03 AM

you must put both widgets in some element with differtent class/id and prepare css rules based on that context:
<div id="firstMenu">
<?php
  $this->widget('application.extensions.mbmenu.MbMenu',array(
      'items' => $items1;
      'cssFile' => Yii::app()->request->baseUrl . '/css/mbmenu1.css',
  ));
?>
</div>
<div id="secondMenu">
<?php
  $this->widget('application.extensions.mbmenu.MbMenu',array(
      'items' => $items2;
      'cssFile' => Yii::app()->request->baseUrl . '/css/mbmenu2.css',
  ));
?>
</div>

and corresponding css:
#firstMenu .nav {
}

#secondMenu .nav {
}
...

There is however problem with mbmenu widget which disallows it to be used more than once on one page - it creates html code with "id" attributes which are not unique. This makes your page not compliant with html standards if you use this widget twice or more.
red
0

#3 User is offline   FlavorFlav 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 03-May 11

Posted 07 February 2013 - 04:43 AM

thanks for your answer

View Postredguy, on 07 February 2013 - 04:03 AM, said:

you must put both widgets in some element with differtent class/id and prepare css rules based on that context:
<div id="firstMenu">
<?php
  $this->widget('application.extensions.mbmenu.MbMenu',array(
      'items' => $items1;
      'cssFile' => Yii::app()->request->baseUrl . '/css/mbmenu1.css',
  ));
?>
</div>
<div id="secondMenu">
<?php
  $this->widget('application.extensions.mbmenu.MbMenu',array(
      'items' => $items2;
      'cssFile' => Yii::app()->request->baseUrl . '/css/mbmenu2.css',
  ));
?>
</div>

and corresponding css:
#firstMenu .nav {
}

#secondMenu .nav {
}
...



damn... i thought about this solution, but i hoped for soemthing better


View Postredguy, on 07 February 2013 - 04:03 AM, said:

There is however problem with mbmenu widget which disallows it to be used more than once on one page - it creates html code with "id" attributes which are not unique. This makes your page not compliant with html standards if you use this widget twice or more.


ohh thanks for lettign me know about this... any adwice for a good alternative drop-down-menu component?
0

#4 User is offline   FlavorFlav 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 03-May 11

Posted 02 March 2013 - 09:08 AM

i don't know if anyone else needs this...

i wrote a widget, which do all this #id stuff in css automatically:

class CssSection extends CWidget {

    public $tagName = 'div';
    public $id;
    public $cssFile;

    public function init() {
        parent::init();
        $this->publishCssFile();
        echo CHtml::openTag($this->tagName, array('id' => $this->id));
    }

    private function publishCssFile() {
        //path stuff
        $cssPathParts = pathinfo($this->cssFile);
        $cssFileName = $this->id . '_' . $cssPathParts['filename'];
        $cssSourceDir = $cssPathParts['dirname'];
        $cssRuntimeDir = Yii::app()->getRuntimePath() . '/' . $cssFileName;

        //only process css stuff when folder does not exist or in debug mode
        $refresh=!is_dir($cssRuntimeDir) || YII_DEBUG == TRUE;
        if ($refresh) {
            Yii::import('application.vendors.*');

            //autoloader for the use-statements in Sabberworm
            spl_autoload_register(function($class) {
                        require_once ($class . ".php");
                    });
            $cssParser = new Sabberworm\CSS\Parser(file_get_contents($this->cssFile));
            $cssDocument = $cssParser->parse();

            $this->setPrefixIdsToCssBlocks($cssDocument, $this->id);
            $urls = $this->substituteUrlsInCss($cssDocument);

            //create dir if not exist
            if (!is_dir($cssRuntimeDir)) {
                mkdir($cssRuntimeDir);
            }

            //save css document ot file
            $cssFileContent = $cssDocument->__toString();
            file_put_contents($cssRuntimeDir . '/' . $cssFileName . ".css", $cssFileContent);

            //copy linked resources to runtime folder
            foreach ($urls as $url => $newUrlId) {
                copy($cssSourceDir . '/' . $url, $cssRuntimeDir . '/' . $newUrlId);
            }

            //spl_autoload_register(array('YiiBase', 'autoload'));
        }
    
        //publish css and linked resources
        $cssAssetPath = Yii::app()->assetManager->publish($cssRuntimeDir,true,-1,$refresh);

        //
        echo '<link rel="stylesheet" type="text/css" href="' . $cssAssetPath . '/' . $cssFileName . '.css" />';
    }

    /**
     * adds a prefix before to every css block
     * 
     * @param type $cssDocument css documnt
     * @param type $prefixId prefix
     */
    private function setPrefixIdsToCssBlocks($cssDocument, $prefixId) {
        //add #id to all css blocks
        foreach ($cssDocument->getAllDeclarationBlocks() as $oBlock) {
            foreach ($oBlock->getSelectors() as $oSelector) {
                $oSelector->setSelector('#' . $prefixId . ' ' . $oSelector->getSelector());
            }
        }
    }

    /**
     * @param type $cssDocument css document
     * @return array (key = old url, value = new url id)
     */
    private function substituteUrlsInCss($cssDocument) {
        $urls = array();
        $urlId = 0;

        foreach ($cssDocument->getAllValues() as $value) {
            if ($value instanceof Sabberworm\CSS\Value\URL) {
                $url = $value->getURL();

                //remove quotes from url
                $url = str_replace('"', "", $url);
                $url = str_replace("'", "", $url);

                //evaluate new url id
                if (array_key_exists($url, $urls)) {
                    $newUrlId = $urls[$url];
                } else {
                    $urlPathParts = pathinfo($url);
                    $urlExtension = $urlPathParts['extension'];
                    $newUrlId = $urls[$url] = $urlId . '.' . $urlExtension;
                    $urlId++;
                }

                //change url to new url id
                $value->setURL(new Sabberworm\CSS\Value\String($newUrlId));
            }
        }
        return $urls;
    }

    public function run() {
        parent::run();
        echo CHtml::closeTag($this->tagName);
    }

}


it uses the Sabberworm CSS Parser (https://github.com/s.../PHP-CSS-Parser)

it can be used like this:

$this->beginWidget('CssSection', array(
    'id' => 'menu2',
    'cssFile'=>Yii::app()->getBasePath() . '/../css/mbmenu_orig/mbmenu.css'));

    $this->widget('application.extensions.mbmenu.MbMenu', array(
        'items' => $this->menuItems,
    ));

$this->endWidget('CssSection');


this generates a surrounding div with a id (menu2) and creates a new css file with this ids (and publish it to assets)

any advices?
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users