javascripts/jquery-1.2.6.pack.js
@@ -23,8 +23,7 @@
<select id="font-family">
<option value="---">---</option>
</select>
- <input id="font-family-list" type="submit" value="Load font list" />
- <span id="font-detect-swf"></span>
+ <input id="font-family-list" type="submit" value="Load font list" />
<p id="status"> </p>
</form>
@@ -35,6 +34,7 @@
<input id="text-load-all" type="submit" value="Add all fonts" />
</form>
+ <div style="display:none" id="font-detect-swf"></div>
<br class="clear" />
</div>
@@ -42,44 +42,45 @@
</div>
- <script src="http://www.google.com/jsapi"></script>
+ <script src="javascripts/jquery-1.2.6.pack.js"></script>
<script src="javascripts/swfobject.js"></script>
<script src="javascripts/font-detect.js"></script>
<script src="javascripts/font-detect-edit.js"></script>
<script>
- google.load("jquery", "1");
- google.setOnLoadCallback(function() {
+ $(document).ready(function() {
+
+ var editFontDetect = newEditFontDetect();
$("#font-text-set").bind("submit", function(e) {
- fontDetectEdit.updateText($("#font-text").val(), $("#font-size").val());
+ newEditFontDetect().updateText($("#font-text").val(), $("#font-size").val());
return false;
});
$("#font-family-list").click(function(e) {
$("#status").html("Loading SWF...");
- var fontDetect = newFontDetect("font-detect-swf");
- fontDetect.loadSWF();
- var fonts = fontDetect.fonts();
-
- var editFontDetect = newEditFontDetect();
- editFontDetect.setFonts(fonts);
- editFontDetect.updateSelect(fonts);
+
+ var fontDetect = newFontDetect("font-detect-swf", "flash/FontList.swf", function() {
+ var fonts = fontDetect.fonts();
+
+ editFontDetect.setFonts(fonts);
+ editFontDetect.updateSelect(fonts);
+ });
return false;
- });
-
+ });
+
$("#text-clear").click(function(e) {
- fontDetectEdit.clearText();
+ editFontDetect.clearText();
return false;
});
$("#text-add").click(function(e) {
- fontDetectEdit.addText($('#font-text').val(), $('#font-size').val(), $('#font-family').val(), false);
+ editFontDetect.addText($('#font-text').val(), $('#font-size').val(), $('#font-family').val(), false);
return false;
});
$("#text-load-all").click(function(e) {
- fontDetectEdit.clearText();
- fontDetectEdit.addAll($('#font-text').val(), $('#font-size').val());
+ editFontDetect.clearText();
+ editFontDetect.addAll($('#font-text').val(), $('#font-size').val());
return false;
});
edit.html
flash/FontList.swf
@@ -7,29 +7,25 @@ package {
public class FontList extends Sprite {
- public function FontList() {
- ExternalInterface.marshallExceptions = true;
- ExternalInterface.addCallback("fontsAsJSON", fontsAsJSON);
- ExternalInterface.addCallback("fontsWithCallback", fontsWithCallback);
+ public function FontList() {
+ var params:Object = loadParams();
+ loadExternalInterface(params);
}
- // Use corelib JSON encoding for something generic
- private function fontsToJSON(fonts:Array):String {
- var items:Array = fonts.map(function(font:*, index:int, arr:Array):String {
- return "{ fontName:'" + font.fontName + "', fontStyle:'" + font.fontStyle + "', fontType:'" + font.fontType + "'}";
- });
- return "[" + items.join(",") + "]"
+ private function loadParams():Object {
+ return LoaderInfo(this.root.loaderInfo).parameters;
}
- public function fontsAsJSON():String {
- return fontsToJSON(Font.enumerateFonts(true).sortOn("fontName", Array.CASEINSENSITIVE));
+ private function loadExternalInterface(params:Object):void {
+ ExternalInterface.marshallExceptions = true;
+ ExternalInterface.addCallback("fonts", fonts);
+ ExternalInterface.call(params.onReady, params.swfObjectId);
}
- public function fontsWithCallback(callback:String):void {
- if (ExternalInterface.available)
- ExternalInterface.call(callback, fontsAsJSON());
+ public function fonts():Array {
+ return Font.enumerateFonts(true).sortOn("fontName", Array.CASEINSENSITIVE);
}
-
+
}
}
\ No newline at end of file
flash/src/FontList.as
@@ -15,12 +15,11 @@
<div id="font-detect-swf"></div>
- <script src="http://www.google.com/jsapi"></script>
+ <script src="javascripts/jquery-1.2.6.pack.js"></script>
<script src="javascripts/swfobject.js"></script>
<script src="javascripts/font-detect.js"></script>
<script>
- google.load("jquery", "1");
- google.setOnLoadCallback(function() {
+ $(document).ready(function() {
// Check Flash version
if (!swfobject.hasFlashPlayerVersion("9.0.0"))
@@ -28,28 +27,29 @@
else
$("#status span").html("Loading... (this may beach ball your browser for ~10 seconds)")
- FontDetect.loadSWF("font-detect-swf");
-
-
- $("#status span").html("Loaded " + fonts.length + " fonts");
+ var fontDetect = newFontDetect("font-detect-swf", "flash/FontList.swf", function() {
+ var fonts = fontDetect.fonts();
+
+ $("#status span").html("Loaded " + fonts.length + " fonts");
- var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
- var size = "32px";
+ var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+ var size = "32px";
- for(var i = 0; i < fonts.length; i++) {
- var node = document.createElement("p");
- $(node).css("font-family", "'" + fonts[i].fontName + "'");
- $(node).css("font-size", size);
- $(node).addClass("sample-text");
- $(node).html(text);
- $("#content").append(node);
+ for(var i = 0; i < fonts.length; i++) {
+ var node = document.createElement("p");
+ $(node).css("font-family", "'" + fonts[i].fontName + "'");
+ $(node).css("font-size", size);
+ $(node).addClass("sample-text");
+ $(node).html(text);
+ $("#content").append(node);
- var nameNode = document.createElement("p");
- $(nameNode).addClass("sample-text-name");
- $(nameNode).html("[" + fonts[i].fontName + "]");
- $("#content").append(nameNode);
- }
+ var nameNode = document.createElement("p");
+ $(nameNode).addClass("sample-text-name");
+ $(nameNode).html("[" + fonts[i].fontName + "]");
+ $("#content").append(nameNode);
+ }
});
+
});
</script>
index.html
@@ -3,29 +3,44 @@
*
* @author Gabriel Handford
* @website http://rel.me
+ *
+ * @see http://www.lalit.org/lab/javascript-css-font-detect
*/
-var newFontDetect = function(swfId) {
+// Callback for Flash
+var onFontDetectReady = function(swfObjectId) {
+ var swfObj = document.getElementById(swfObjectId);
+ swfObj.onFontDetectReady();
+ swfObj.onFontDetectReady = null;
+};
+
+var newFontDetect = function(swfId, swfLocation, onReady) {
var _swfId = swfId;
- var _swfObjectId = swfId + "-object";
+ var _swfObjectId = swfId;
var _fallbackWidthCache = null;
- // Load SWF
var _loadSWF = function() {
- var flashvars = { };
+ var flashvars = { onReady: "onFontDetectReady", swfObjectId: _swfObjectId };
var params = { allowScriptAccess: "always", menu: "false" };
- var attributes = { id: _swfObjectId };
- console.log("Load swf: " + _swfId);
- swfobject.embedSWF("flash/FontList.swf", _swfId, "1", "1", "9.0.0", false, flashvars, params, attributes);
+ var attributes = { id: _swfObjectId, name: _swfObjectId };
+ swfobject.embedSWF(swfLocation, _swfId, "1", "1", "9.0.0", false, flashvars, params, attributes);
+
+ // Attach onReady to element
+ document.getElementById(_swfObjectId).onFontDetectReady = onReady;
};
+ // Init
+ _loadSWF();
+
var _checkOffsetWidth = function(family, size) {
var node = document.createElement("p");
$(node).css("font-family", "'" + family + "', Times New Roman");
$(node).css("font-size", size);
$(node).css("display", "inline");
$(node).addClass("font-test")
+
+ // This was from http://www.lalit.org/lab/javascript-css-font-detect
$(node).html("mmmmmmmmml"); // m or w take up max width
$("body").append(node);
var width = node.offsetWidth;
@@ -66,19 +81,12 @@ var newFontDetect = function(swfId) {
},
fonts: function() {
- //_loadSWF();
-
// Use when doing static publishing
//var swf = swfobject.getObjectById(_swfObjectId);
// Works with dynamic publishing
- var swf = document.getElementById(_swfObjectId);
-
- console.log("Calling actionscript with swfObjectId: " + _swfObjectId + ", method: " + swf.fontsAsJSON);
- var fontsJSON = swf.fontsAsJSON();
- console.log("Got fonts: " + fontsJSON);
- var fonts = eval(fontsJSON);
- console.log("Evaled fonts: " + fonts);
+ var swfObj = document.getElementById(_swfObjectId);
+ var fonts = swfObj.fonts();
return _filterFonts(fonts);
}
}
javascripts/font-detect.js
169a98a6410269c734e25163144729fff2eb7bcf
Gabriel Handford
gabrielh@gmail.com
http://github.com/gabriel/font-detect-js/commit/561deeb249903369690d4d10da7aa8e569e3a1e6
561deeb249903369690d4d10da7aa8e569e3a1e6
2008-07-25T20:12:22-07:00
2008-07-25T20:12:22-07:00
updating to use javascript -> flash direct and not through callbacks
054c8a02170c47401f24b4db858562b7de74a236
Gabriel Handford
gabrielh@gmail.com