How to set the maximum size of a popup?

Question

I am using the <<popup>> custom macro and I would like to know how to give it a maximum size. Currently, many passages do not look very good when displayed inside a popup; any way to make sure it cannot take up more than maybe 60% of the screen in either direction?

Code for <<popup>> macro:

Macro.add("popup", {
	version : { major: 1, minor: 0, revision: 0 },
	handler : function () {
		if (this.args.length < 2) {
			var errors = [];
			if (this.args.length < 1) { errors.push("link text"); }
			if (this.args.length < 2) { errors.push("passage name"); }
			return this.error("no " + errors.join(" or ") + " specified");
		}

		var	el      = document.createElement("a"),
			passage = this.args[1],
			title;
		el.innerHTML = this.args[0];
		el.className = "link-internal macro-popup";
		el.setAttribute("data-passage", passage);
		title = el.textContent;
		UI.addClickHandler(el, null, function (evt) {
			var	dialog = UI.setup(title, "popup");
			new Wikifier(dialog, tale.get(passage).processText().trim());
		});
		this.output.appendChild(el);
	}
});

 

Answer 1

Something like the following style should work:

#ui-dialog-body.popup {
	max-width: 60vw;
}

 

Also.  That code is outdated, you should be using something like the following:

/* Usage: <<popup "Link Text" "Pasage Name">> */
Macro.add('popup', {
	handler : function () {
		if (this.args.length < 2) {
			var errors = [];
			if (this.args.length < 1) { errors.push('link text'); }
			if (this.args.length < 2) { errors.push('passage name'); }
			return this.error('no ' + errors.join(' or ') + ' specified');
		}

		var passage = this.args[1];
		var $link   = $(document.createElement('a'));

		$link
			.attr('data-passage', passage)
			.addClass('link-internal macro-popup')
			.html(this.args[0])
			.appendTo(this.output);

		Dialog.addClickHandler($link, null, function () {
			Dialog.setup($link.text(), 'popup');
			Dialog.wiki(Story.get(passage).processText().trim());
		});
	}
});

 

Comments

Works fine for me... one question though. Why is the popup code that I use "outdated"? Are some of the functions depricated or something? And does this code for an autopopup need any changing:

/* Usage: <<autopopup "Pasage Name">> */
Macro.add('autopopup', {
	handler : function () {
		if (this.args.length === 0) {
			return this.error('no passage name specified');
		}

		var passage = this.args[0];

		Dialog.setup(passage, 'popup');
		Dialog.wiki(Story.get(passage).processText().trim());
		Dialog.open();
	}
});