Plugin Author
kontur
(@kontur)
Hey,
both things can be done via jQuery. As you already found, the fontsampler.events.activatefont event can be used to detect the font being changed. You can use that event and its parameters to update the text field. The object passed from the event is that fontsampler instance root. You can get the selected font name with the selector .fontsampler .font-lister .selectric .label or you use $(.fontsampler .font-lister select option:selected).html()
Equally, and there is no need for a fontsampler-specific event for text changes, you can just use the keyup/keydown event of the text field (use .fontsampler .current-font selector) or the change event of the select (use .fontsampler select[name=”sample-text”] ) to react to changes in the text.
Let me know how you get on with those things 😉
Thanks for the reply. Just tested this and still having issues – I can trap the event but can’t extract the label value
Here is my code (in footer for now):
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$("body").on("fontsampler.event.activatefont", ".fontsampler-wrapper", function (myevent) {
console.log("The event type is: " + myevent.type);
// The event type is: fontsampler
console.log(myevent.font-lister.selectric.label);
// Uncaught ReferenceError: lister is not defined
});
});
</script>
Also can I establish in chrome devtools (f12) what properties and methods are available for fontsampler without referring to the documentation?
NB looks like a typo in the GitHub documentation: should be fontsampler.event.afterinit and fontsampler.event.activatefont?
Thanks again
Plugin Author
kontur
(@kontur)
Thanks, I fixed the typo, you are correct! 🙂
Inside your event listener function this will give you a jQuery element of the fontsampler:
$(myevent.target)
So you can use:
$(myevent.target).find(".font-lister option:selected").val() // the index of the selected option
$(myevent.target).find(".font-lister option:selected").html() // the displaed name of the selected option
Does this help? 🙂
