Skip to content

Commit

Permalink
Fix preventDefault behavior (maybe). Add escape to game info window.
Browse files Browse the repository at this point in the history
  • Loading branch information
artasparks committed Dec 1, 2014
1 parent 41a063a commit 87de38a
Show file tree
Hide file tree
Showing 9 changed files with 244 additions and 15 deletions.
1 change: 1 addition & 0 deletions src/depgen.py
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
'htmltests/PositionTester.html': False,
'htmltests/ProblemTester.html': False,
'htmltests/QunitTest.html': True,
'htmltests/TextOnlyTester.html': False,
'htmltests/ThemeTester.html': False,
'htmltests/TygemGameTester.html': False,
}
Expand Down
24 changes: 18 additions & 6 deletions src/displays/statusbar/statusbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,12 +81,25 @@ glift.displays.statusbar._StatusBar.prototype = {
}, gameInfoTheme.textDiv);

textDiv.css(textDivCss);

var exitScreen = function() {
newDiv.remove();
};
if (glift.platform.isMobile()) {
textDiv.on('touchend', function() { newDiv.remove(); });
textDiv.on('touchend', exitScreen);
} else {
textDiv.on('click', function() { newDiv.remove(); });
textDiv.on('click', exitScreen);
}

var instanceId = this.widget.manager.id;
var oldEscAction = glift.keyMappings.getFuncOrIcon(instanceId, 'ESCAPE');
glift.keyMappings.registerKeyAction(instanceId, 'ESCAPE', function() {
exitScreen();
if (oldEscAction) {
glift.keyMappings.registerKeyAction(instanceId, 'ESCAPE', oldEscAction);
}
});

// This is a hack until a better solution for captures can be crafted.
var captureArr = [
{displayName: 'Captured White Stones', value: captureCount.WHITE},
Expand Down Expand Up @@ -117,6 +130,7 @@ glift.displays.statusbar._StatusBar.prototype = {
* Note: Key bindings are set in the base_widget.
*/
fullscreen: function() {
// TODO(kashomon): Support true fullscreen: issues/69
var widget = this.widget,
wrapperDivId = widget.wrapperDivId,
newDivId = wrapperDivId + '_fullscreen',
Expand All @@ -135,8 +149,6 @@ glift.displays.statusbar._StatusBar.prototype = {
}, this.theme.statusBar.fullscreen);
newDiv.css(cssObj);

// TODO(kashomon): Support true fullscreen: issues/69

// Prevent scrolling outside the div
body.addClass('glift-fullscreen-no-scroll').append(newDiv);
manager.prevScrollTop =
Expand All @@ -154,8 +166,8 @@ glift.displays.statusbar._StatusBar.prototype = {

/** Returns Glift to non-fullscreen */
unfullscreen: function() {
if (!this.widget.manager.fullscreenDivId) {
return; // We're not fullscreened
if (!this.widget.manager.isFullscreen()) {
return;
}
var widget = this.widget,
wrapperDivEl = glift.dom.elem(widget.wrapperDivId),
Expand Down
178 changes: 178 additions & 0 deletions src/htmltests/TextOnlyTester.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>

<title> Text Only Tester </title>
<script type="text/javascript" src="../testdata/sgfs.js"></script>

<!-- AUTO-GEN-DEPS -->
<!-- Otre -->
<script type="text/javascript" src=".././glift.js"></script>
<script type="text/javascript" src=".././global.js"></script>
<script type="text/javascript" src=".././init.js"></script>
<!-- Util -->
<script type="text/javascript" src="../util/util.js"></script>
<script type="text/javascript" src="../util/array.js"></script>
<script type="text/javascript" src="../util/colors.js"></script>
<script type="text/javascript" src="../util/enums.js"></script>
<script type="text/javascript" src="../util/errors.js"></script>
<script type="text/javascript" src="../util/id_generator.js"></script>
<script type="text/javascript" src="../util/key_mappings.js"></script>
<script type="text/javascript" src="../util/math.js"></script>
<script type="text/javascript" src="../util/obj.js"></script>
<script type="text/javascript" src="../util/performance.js"></script>
<script type="text/javascript" src="../util/platform.js"></script>
<script type="text/javascript" src="../util/point.js"></script>
<script type="text/javascript" src="../util/regions.js"></script>
<script type="text/javascript" src="../util/test_util.js"></script>
<!-- Dom -->
<script type="text/javascript" src="../dom/dom.js"></script>
<script type="text/javascript" src="../dom/sanitize.js"></script>
<script type="text/javascript" src="../dom/ux.js"></script>
<!-- Ajax -->
<script type="text/javascript" src="../ajax/ajax.js"></script>
<!-- Themes -->
<script type="text/javascript" src="../themes/themes.js"></script>
<script type="text/javascript" src="../themes/colorful.js"></script>
<script type="text/javascript" src="../themes/default.js"></script>
<script type="text/javascript" src="../themes/depth.js"></script>
<script type="text/javascript" src="../themes/moody.js"></script>
<script type="text/javascript" src="../themes/textbook.js"></script>
<script type="text/javascript" src="../themes/transparent.js"></script>
<!-- Displays -->
<script type="text/javascript" src="../displays/displays.js"></script>
<script type="text/javascript" src="../displays/bbox.js"></script>
<script type="text/javascript" src="../displays/board_points.js"></script>
<script type="text/javascript" src="../displays/cropbox.js"></script>
<script type="text/javascript" src="../displays/environment.js"></script>
<script type="text/javascript" src="../displays/ids.js"></script>
<script type="text/javascript" src="../displays/line_box.js"></script>
<script type="text/javascript" src="../displays/resized_box.js"></script>
<!-- Displays board -->
<script type="text/javascript" src="../displays/board/board.js"></script>
<script type="text/javascript" src="../displays/board/board_base.js"></script>
<script type="text/javascript" src="../displays/board/board_labels.js"></script>
<script type="text/javascript" src="../displays/board/buttons.js"></script>
<script type="text/javascript" src="../displays/board/intersections.js"></script>
<script type="text/javascript" src="../displays/board/lines.js"></script>
<script type="text/javascript" src="../displays/board/marks.js"></script>
<script type="text/javascript" src="../displays/board/starpoints.js"></script>
<script type="text/javascript" src="../displays/board/stones.js"></script>
<!-- Displays commentbox -->
<script type="text/javascript" src="../displays/commentbox/commentbox.js"></script>
<script type="text/javascript" src="../displays/commentbox/create.js"></script>
<!-- Displays gui -->
<script type="text/javascript" src="../displays/gui/gui.js"></script>
<script type="text/javascript" src="../displays/gui/center.js"></script>
<!-- Displays icons -->
<script type="text/javascript" src="../displays/icons/icons.js"></script>
<script type="text/javascript" src="../displays/icons/bar.js"></script>
<script type="text/javascript" src="../displays/icons/icon_centering.js"></script>
<script type="text/javascript" src="../displays/icons/icon_selector.js"></script>
<script type="text/javascript" src="../displays/icons/svg.js"></script>
<script type="text/javascript" src="../displays/icons/wrapped_icon.js"></script>
<!-- Displays svg -->
<script type="text/javascript" src="../displays/svg/svg.js"></script>
<script type="text/javascript" src="../displays/svg/pathutils.js"></script>
<script type="text/javascript" src="../displays/svg/svgobj.js"></script>
<!-- Displays statusbar -->
<script type="text/javascript" src="../displays/statusbar/statusbar.js"></script>
<!-- Displays position -->
<script type="text/javascript" src="../displays/position/position.js"></script>
<script type="text/javascript" src="../displays/position/widget_boxes.js"></script>
<script type="text/javascript" src="../displays/position/widget_positioner.js"></script>
<!-- Rules -->
<script type="text/javascript" src="../rules/rules.js"></script>
<script type="text/javascript" src="../rules/autonumber.js"></script>
<script type="text/javascript" src="../rules/goban.js"></script>
<script type="text/javascript" src="../rules/movenode.js"></script>
<script type="text/javascript" src="../rules/movetree.js"></script>
<script type="text/javascript" src="../rules/problems.js"></script>
<script type="text/javascript" src="../rules/properties.js"></script>
<script type="text/javascript" src="../rules/treepath.js"></script>
<!-- Sgf -->
<script type="text/javascript" src="../sgf/sgf.js"></script>
<script type="text/javascript" src="../sgf/props.js"></script>
<!-- Parse -->
<script type="text/javascript" src="../parse/parse.js"></script>
<script type="text/javascript" src="../parse/pandanet.js"></script>
<script type="text/javascript" src="../parse/sgf_parser.js"></script>
<script type="text/javascript" src="../parse/tygem.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="../controllers/controllers.js"></script>
<script type="text/javascript" src="../controllers/base.js"></script>
<script type="text/javascript" src="../controllers/board_editor.js"></script>
<script type="text/javascript" src="../controllers/game_viewer.js"></script>
<script type="text/javascript" src="../controllers/static_problem.js"></script>
<!-- Bridge -->
<script type="text/javascript" src="../bridge/bridge.js"></script>
<script type="text/javascript" src="../bridge/cropping.js"></script>
<script type="text/javascript" src="../bridge/intersections.js"></script>
<!-- Flattener -->
<script type="text/javascript" src="../flattener/flattener.js"></script>
<script type="text/javascript" src="../flattener/board.js"></script>
<script type="text/javascript" src="../flattener/flattened.js"></script>
<script type="text/javascript" src="../flattener/intersection.js"></script>
<script type="text/javascript" src="../flattener/symbols.js"></script>
<!-- Widgets -->
<script type="text/javascript" src="../widgets/widgets.js"></script>
<script type="text/javascript" src="../widgets/base_widget.js"></script>
<script type="text/javascript" src="../widgets/manager.js"></script>
<!-- Widgets options -->
<script type="text/javascript" src="../widgets/options/options.js"></script>
<script type="text/javascript" src="../widgets/options/base_options.js"></script>
<script type="text/javascript" src="../widgets/options/board_editor.js"></script>
<script type="text/javascript" src="../widgets/options/correct_variations_problem_options.js"></script>
<script type="text/javascript" src="../widgets/options/example_options.js"></script>
<script type="text/javascript" src="../widgets/options/game_viewer_options.js"></script>
<script type="text/javascript" src="../widgets/options/reduced_game_viewer.js"></script>
<script type="text/javascript" src="../widgets/options/standard_problem_options.js"></script>

<!-- END-AUTO-GEN-DEPS -->

<style>
* {
margin: 0;
padding: 0;
}
#glift_display1 {
width:100%;
height:500px;
position:relative;
}
</style>
</head>

<body>
<div id="wrap" style="position:relative; width:100%">
<div id="gheader"></div>
<div id="glift_display1"></div>
<div id="extra_info"></div>
<script type="text/javascript">
//glift.global.performanceDebugLevel = 'info'
var basicProblem = glift.create({
allowWrapAround: true,
sgfCollection: [
{
sgfString: testdata.sgfs.complexproblem,
widgetType: 'EXAMPLE',
disableCommentBox: true
}
],
divId: "glift_display1",
sgfDefaults: {
widgetType: 'STANDARD_PROBLEM'
},
display: {
drawBoardCoords: true,
disableZoomForMobile: true
// theme: 'COLORFUL' // useful for debugging box issues.
}
});
window.onresize = function() {
basicProblem.redraw();
};
</script>
</div>
</body>
</html>
4 changes: 2 additions & 2 deletions src/parse/tygem_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ glift.parse.tygemTest = function() {
deepEqual(mt.properties().getOneValue('PB'), 'go48 (2K)');

mt.moveDown();
deepEqual(mt.properties().getAsPoint('B'), point(15, 3));
deepEqual(mt.properties().getAsPoint('B').toString(), point(15, 15).toString());
mt.moveDown();
deepEqual(mt.properties().getAsPoint('W'), point(3, 16));
deepEqual(mt.properties().getAsPoint('W').toString(), point(3, 2).toString());
});
};
2 changes: 1 addition & 1 deletion src/util/enums.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ glift.enums = {
GAME_VIEWER: 'GAME_VIEWER',
REDUCED_GAME_VIEWER: 'REDUCED_GAME_VIEWER',
STANDARD_PROBLEM: 'STANDARD_PROBLEM',
BOARD_EDITOR: 'BOARD_EDITOR'
BOARD_EDITOR: 'BOARD_EDITOR',
},

boardComponents: {
Expand Down
16 changes: 12 additions & 4 deletions src/util/key_mappings.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,12 @@ glift.keyMappings = {

if (argType === 'function') {
funcOrIcon(widget);
if (event.preventDefault) event.preventDefault();
else event.returnValue = false; // IE
if (manager.isFullscreen()) {
// We don't want the widget interacting with anything else while
// full-screen.
if (event.preventDefault) event.preventDefault();
else event.returnValue = false; // IE
}
} else if (argType === 'string') {
// Assume it's an icon-action-path
// icon namespaces look like: icons.arrowleft.mouseup
Expand All @@ -159,8 +163,12 @@ glift.keyMappings = {
action = action[actionNamespace[i]];
}
action(keyEvent, widget);
if (event.preventDefault) event.preventDefault();
else event.returnValue = false; // IE
if (manager.isFullscreen()) {
// We don't want the widget interacting with anything else while
// full-screen.
if (event.preventDefault) event.preventDefault();
else event.returnValue = false; // IE
}
}
}
};
19 changes: 18 additions & 1 deletion src/widgets/base_widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ glift.widgets.BaseWidget.prototype = {
parentDivBbox,
this.displayOptions.boardRegion,
this.displayOptions.intersections,
this.sgfOptions.uiComponents,
this._getUiComponents(this.sgfOptions),
this.displayOptions.oneColumnSplits,
this.displayOptions.twoColumnSplits).calcWidgetPositioning();

Expand Down Expand Up @@ -143,6 +143,23 @@ glift.widgets.BaseWidget.prototype = {
return this;
},

/** Gets the UI icons to use */
_getUiComponents: function(sgfOptions) {
var base = sgfOptions.uiComponents;
base = base.slice(0, base.length); // make a shallow copy.
var rmItem = function(arr, key) {
var idx = arr.indexOf(key);
if (idx > -1) {
arr.shift(idx);
}
}
sgfOptions.disableStatusBar && rmItem(base, 'STATUS_BAR');
sgfOptions.disableBoard && rmItem(base, 'BOARD');
sgfOptions.disableCommentBox && rmItem(base, 'COMMENT_BOX');
sgfOptions.disableIonBar && rmItem(base, 'ICONBAR');
return base;
},

/**
* Create divs from positioning (WidgetBoxes) and the wrapper div id.
*/
Expand Down
5 changes: 5 additions & 0 deletions src/widgets/manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,11 @@ glift.widgets.WidgetManager.prototype = {
loader(this.sgfColIndex + 1);
},

/** Whether or not the widget is currently fullscreened. */
isFullscreen: function() {
return !!this.fullscreenDivId;
},

/** Enable auto-resizing of the glift instance. */
enableFullscreenAutoResize: function() {
if (window.onresize) { this.oldWindowResize = window.onresize; }
Expand Down
10 changes: 9 additions & 1 deletion src/widgets/options/base_options.js
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,15 @@ glift.widgets.options.baseOptions = {
'ICONBAR'
],

/**
* Convenience variables for disabling ui components.
* @api(experimental)
*/
disableStatusBar: false,
disableBoard: false,
disableCommentBox: false,
disableIconBar: false,

/**
* Icons to use in the status bar.
* @api(1.0)
Expand All @@ -200,7 +209,6 @@ glift.widgets.options.baseOptions = {
'game-info',
'move-indicator',
'fullscreen'
// TODO(kashomon): Add a settings icon.
// 'settings-wrench'
],

Expand Down

0 comments on commit 87de38a

Please sign in to comment.