0 votes
asked by (2.7k points)

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);
	}
});

 

1 Answer

0 votes
answered by (53.9k points)
selected by
 
Best answer

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());
		});
	}
});

 

commented by (2.7k points)

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();
	}
});

 

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...