SAPUI5 Routing with Master-Detail and Fullscreen

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8" />

        <title>FullScreen - Master-Detail</title>

        <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m, sap.ui.core"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{"hirse": "."}'>
        </script>

        <script>
            sap.ui.getCore().attachInit(function() {
                sap.ui.require([
                    "sap/m/Shell",
                    "sap/ui/core/ComponentContainer"
                ], function (Shell, ComponentContainer) {
                    new Shell({
                        app: new ComponentContainer({
                            height: "100%",
                            name: "hirse"
                        }),
                        id: "Shell",
                        appWidthLimited: false
                    }).placeAt("content");
                });
            });
        </script>
    </head>

    <body class="sapUiBody" id="content"></body>

</html>

sap.ui.define([
    "jquery.sap.global",
    "sap/ui/core/UIComponent"
], function (jQuery, UIComponent) {
    "use strict";

    var Component = UIComponent.extend("hirse.Component", {
        "metadata": {
            "manifest": "json"
        }
    });

    Component.prototype.init = function () {
        UIComponent.prototype.init.apply(this, arguments);

        this.getRouter().initialize();
    };

    return Component;
});

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true">
    <App id="appControl" />
</mvc:View>

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >
    <Page title="Detail Page">
        <ObjectHeader title="Item Details" />
    </Page>
</mvc:View>

<mvc:View controllerName="hirse.Master" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >
    <Page title="Master Page">
      <subHeader>
        <Toolbar>
          <Button text="Fullscreen" press=".onFullScreenPressed" />
        </Toolbar>
      </subHeader>
        <List>
          <StandardListItem text="List Item" />
        </List>
    </Page>
</mvc:View>

<mvc:View controllerName="hirse.FullScreen" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >
    <Page showNavButton="true" title="FullScreen Page" navButtonPress=".onBackPressed">
        <ObjectHeader title="Item Details" />
    </Page>
</mvc:View>

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
    <SplitContainer id="splitContainerControl" mode="StretchCompressMode" />
</mvc:View>

sap.ui.define([
  "jquery.sap.global",
  "sap/ui/core/mvc/Controller"
], function(jQuery, Controller) {
  "use strict";

  var FullScreenController = Controller.extend("hirse.FullScreen");

  FullScreenController.prototype.onBackPressed = function() {
    this.getOwnerComponent().getRouter().navTo("mainRoute");
    
       if (!this._oShell) {
				this._oShell = sap.ui.getCore().byId('Shell');
			}
		this._oShell.setAppWidthLimited(false);
  };

  return FullScreenController;
});

sap.ui.define([
  "jquery.sap.global",
  "sap/ui/core/mvc/Controller"
], function(jQuery, Controller) {
  "use strict";

  
  var MasterController = Controller.extend("hirse.Master");

  MasterController.prototype.onFullScreenPressed = function() {
    this.getOwnerComponent().getRouter().navTo("fullscreenRoute");
    
    if (!this._oShell) {
				this._oShell = sap.ui.getCore().byId('Shell');
			}
		this._oShell.setAppWidthLimited(true);

  };

  return MasterController;
});

{
  "sap.ui5": {
    "rootView": {
      "viewName": "hirse.App",
      "type": "XML"
    },
    "dependencies": {
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "hirse",
        "controlId": "appControl",
        "controlAggregation": "pages",
        "bypassed": {
          "target": ["detailTarget", "masterTarget"]
        }
      },
      "routes": {
        "mainRoute": {
          "pattern": "",
          "target": ["detailTarget", "masterTarget"]
        },
        "detailRoute": {
          "pattern": "detail/{id}",
          "target": ["masterTarget", "detailTarget"]
        },
        "fullscreenRoute": {
          "pattern": "fullscreen",
          "target": "fullscreenTarget"
        }
      },
      "targets": {
        "splitviewTarget": {
          "viewName": "SplitView"
        },
        "masterTarget": {
          "viewName": "Master",
          "parent": "splitviewTarget",
          "controlId": "splitContainerControl",
          "controlAggregation": "masterPages"
        },
        "detailTarget": {
          "viewName": "Detail",
          "parent": "splitviewTarget",
          "controlId": "splitContainerControl",
          "controlAggregation": "detailPages"
        },
        "fullscreenTarget": {
          "viewName": "FullScreen"
        }
      }
    }
  }
}