This project is archived and is in readonly mode.

#257 ✓wontfix
Raszagar

Morph don´t work in css import

Reported by Raszagar | July 23rd, 2008 @ 10:13 AM | in 1.3.0 rc2 (closed)

version: mootools 1.2

when import a stylesheet into main stylesheet function Morph don´t

do nothing.

--- my css stylesheet ---

@import url(stylesheet2.css);

.estyle1 {

........

}

--- stylesheet2.css ----

.estyle2 {

.........

}

--- javascript code ---

var effect = new Fx.Morph('id_x', {duration: 150});

effect.start('.estyle1'); // Work fine

effect.start('.estyle2'); // DON´T WORK

Comments and changes to this ticket

  • fgiust

    fgiust July 26th, 2008 @ 03:50 PM

    This is a more general issue in Fx.CSS.search(), which doesn't see any imported stylesheet since it only looks in document.styleSheets.

    In order to fix it the loop on stylesheet rules should check for imports (rule.styleSheet property) and process any found stylesheet recursively (since it may contains other imports). Obviously, taking care of already processed stylesheets in order to avoid loops ;)

    search: function(selector){

    ...

    ...

    Array.each(rules, function(rule, i){

    if (rule.styleSheet) {

    // go on processing this stylesheet recursively

    }

    HTH

  • Mehmet Gurevin

    Mehmet Gurevin August 6th, 2008 @ 03:03 PM

    /*
    Script: Fx.CSS.searchFix.js
    	------------------------------------------------------------------------------------------------------------------------------------------------ English
    	Fx.CSS.js patch.
    	
    	Function search at Fx.CSS.js can't find styles from files which imported by @import. So this fix that bug.
    
    	It can enabled style which css files added by @import.
    
    	It is usefull for recursively imported css files with @import.
    	
    	With that patch u can use morph like effects on style files imported by @import. 
    	
    	Tested on Internet Explorer 6 and 7, Mozilla Firefox 3.0 and Safari 3.
    	
    	Using:
    		<script type="text/javascript" src="./mootools.js"></script>
    		<script type="text/javascript" src="./Fx.CSS.searchFix.js"></script>
    	
    	Author: Mehmet Gurevin - mehmetgurevin@gmail.com
    	Translate: Elvin Siriyev - elvin.sh@gmail.com
    	------------------------------------------------------------------------------------------------------------------------------------------------ Türkçe
    	Fx.CSS.js yamasıdır.
    	
    	Fx.CSS.js'de tanımlanan search fonksiyonu, import ile tanımlanmış stil dosyalarındaki stilleri bulamadığı için yeniden yazılmıştır.
    
    	@import ile eklenen css dosyalarında tanımlanan stillerin kullanılmasını sağlar.
    	import edilen dosyanın içinden yapılan importlarıda denetler.
    	import ile stil dosyası bağlanarak iç içe sonsuza kadar tanımlamalar yapılabilir.
    	
    	import ile tanımlanan stil dosyalarındaki stillerin morph gibi efektler ile kullanılmasını sağlar.
    	
    	Internet Explorer 6 ve 7, Mozilla Firefox 3.0 ve Safari 3'de test edilmiştir.
    	
    	Kullanımı:
    		<script type="text/javascript" src="./mootools.js"></script>
    		<script type="text/javascript" src="./Fx.CSS.searchFix.js"></script>
    	
    	Yazar: Mehmet Gürevin  -  mehmetgurevin@gmail.com
    License:
    	MIT-style license.
    */
    
    Fx.CSS.prototype.search = function(selector){
    	if(Fx.CSS.Cache[selector]) return Fx.CSS.Cache[selector];
    	
    	var to = {};
    
    	var recursiveGetRules = function(stylesheet, list){
    		var rules = stylesheet.cssRules || stylesheet.rules;
    		
    		for(var rCounter = 0; rCounter < rules.length; rCounter++){
    			if(rules[rCounter].selectorText){
    				var selectorText = (rules[rCounter].selectorText) ? rules[rCounter].selectorText.replace(/^\w+/, function(m){
    					return m.toLowerCase();
    				}) : null;
    				
    				if(selectorText && selectorText.test('^' + selector + '$')){
    					Element.Styles.each(function(value, style){
    						if(! rules[rCounter].style[style] || Element.ShortStyles[style]) return;
    						
    						value = String(rules[rCounter].style[style]);
    						
    						to[style] = (value.test(/^rgb/)) ? value.rgbToHex() : value;
    					});
    					
    					return;
    				}
    			}
    			
    			if(rules[rCounter].styleSheet) recursiveGetRules(rules[rCounter].styleSheet, list);
    		}
    	}
    
    	var recursiveGetImportRules = function(imports, list){
    		for(var rCounter = 0; rCounter < imports.rules.length; rCounter++){
    			if(imports.rules[rCounter].selectorText){
    				var selectorText = (imports.rules[rCounter].selectorText) ? imports.rules[rCounter].selectorText.replace(/^\w+/, function(m){
    					return m.toLowerCase();
    				}) : null;
    				
    				if(selectorText && selectorText.test('^' + selector + '$')){
    					Element.Styles.each(function(value, style){
    						if(! imports.rules[rCounter].style[style] || Element.ShortStyles[style]) return;
    						
    						value = String(imports.rules[rCounter].style[style]);
    						
    						to[style] = (value.test(/^rgb/)) ? value.rgbToHex() : value;
    					});
    					
    					return;
    				}
    			}
    		}
    		
    		for(var iCounter = 0; iCounter < imports.imports.length; iCounter++){
    			try{
    				recursiveGetImportRules(imports.imports[iCounter], list);
    			}catch(err){}
    		}
    	}
    
    	for(var sCounter = 0; sCounter < document.styleSheets.length; sCounter++){
    		recursiveGetRules(document.styleSheets[sCounter], Fx.CSS.Cache);
    		
    		if(document.styleSheets[sCounter].imports){
    			for(var g = 0; g < document.styleSheets[sCounter].imports.length; g++){
    				recursiveGetImportRules(document.styleSheets[sCounter].imports[g], Fx.CSS.Cache);
    			}
    		}
    	}
    
    	return Fx.CSS.Cache[selector] = to;
    }
    
  • fakedarren

    fakedarren February 8th, 2010 @ 03:10 PM

    • State changed from “new” to “hold”
    • Milestone changed from 2.0 to 1.3.0 rc2

    Is this something we intend to implement in 2.0? I think this should be made into a Forge plugin if the OP still requires this functionality as it is quite niche.

  • Christoph Pojer

    Christoph Pojer November 9th, 2010 @ 07:25 PM

    • State changed from “hold” to “wontfix”
    • Milestone order changed from “0” to “0”

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Pages