ポップアップボタンの作成

ここでは、作成した addToCart 関数と disassemble 関数をポップアップに追加して、インタラクティブに操作できるようにします。また、ポップアップテンプレートを変更し、部品に合わせて適切に動作するようにします。

1. Add to Cart ボタンを、addToCart 関数に関連付けられている price 変数に追加します。ボタンは部品に価格が関連付けられている場合にのみ表示するので、Add to Cart ボタンはポップアップではなく price 変数に追加します。ボタンをクリックするとポップアップが閉じてシェーダーが除去されるようにするため、.close メソッドと hiliteOff 関数もボタンに関連付けます。

2. ポップアップテンプレートを編集し、itemCount アプリケーションパラメータ、部品の価格、Continue ボタンが追加されるようにします。

b. Continue ボタンがポップアップテンプレートに直接追加されます。このボタンをクリックするとポップアップが閉じます。これ以外には何も実行されません。このボタンをクリックすると、hiliteoff 関数と .close メソッドがアクティブ化されます。これで、部品をカートに追加するボタンとポップアップを閉じるボタンがポップアップに表示されるようになります。

//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x   ' + partNumber +
'  [/br]' + partName +
price +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',

3. 逆アセンブリシーケンスを 2D インタフェースのボタンにバインドする代わりに、ポップアップのボタンにバインドします。逆アセンプリシーケンスの属性は特定の部品にのみ含まれているので、表示するポップアップを 2 つ用意します。1 つは Add to Cart ボタン、Disassembly ボタン、Continue ボタンが含まれているポップアップ、もう 1 つは Add to Cart ボタンと Continue ボタンのみが含まれているポップアップです。どちらのポップアップを表示するかは、if else 文を作成して特定します。if else 文の 2 つの条件はどちらも instructionName 変数の長さに基づいて作成されます。ポップアップの各ボタンには関数を追加します。この操作については、このチュートリアルの以降の手順で説明します。

a. 最初の条件の instructionName 変数の長さが「0」である場合は、選択した部品に逆アセンブリシーケンスが関連付けられていないことを意味します。選択した部品に逆アセンブリシーケンスが関連付けられていない場合、ポップアップに Disassemble ボタンを表示する必要はありません。このような場合は、Add to Cart ボタンとContinue ボタンのみを表示します。これが現在のポップアップの状態です。ポップアップを呼び出すコードの上に以下の新しいコード行を追加し、ポップアップ変数のスコープを変更して、if 文の外側からポップアップ変数にアクセスできるようにします。コードをインデントし、if 文の内側の行頭を適切に調整します。

if (instructionName.length == 0) {
//
// adds an ionic popup when a part is clicked. Show the quantity, part number, name, and price of the selected object. </br> adds a line break between the two variables
$scope.popup = $ionicPopup.show({
//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x  ' + partNumber +
' </br>' + partName +
price +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',
scope: $scope
}); //end of ionic popup

}

b. else 条件は、部品に逆アセンブリシーケンスが関連付けられている場合に表示するポップアップを呼び出します。これにより、3 つのボタン (Add to Cart ボタン、Disassemble ボタン、Continue ボタン) がすべて表示されるポップアップが呼び出されます。Disassemble ボタンは disassemble 関数を呼び出すだけでなく、hiliteOff と popup.close も呼び出します。

} else {

//
// adds an ionic popup when a part is clicked. Show the quantity, part number, name, and price of the selected object. [/br] adds a line break between the two variables
$scope.popup = $ionicPopup.show({
//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x   ' + partNumber +
' </br>' + partName +
price +
'<div ng-click="hiliteOff();popup.close();disassemble();">Disassemble</div>' +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',
scope: $scope
}); //end of ionic popup if there is a disassembly sequence associated with it

} // end of if statement

4. 「プレビュー」をクリックします。

a. いずれかのローターをクリックし、ポップアップに加えられた変更を確認します。スタイルはまだ設定されていませんが、各ボタンはクリックできます。各ボタンをクリックし、モデルとどのように連携するかを確認します。

b. 次に、クワッドコプターの底部をクリックし、部品に逆アセンブリシーケンスが関連付けられていない場合に表示されるポップアップを確認します。

c. 最後に、PCB をクリックします。PCB をクリックすると、価格は表示されず、カートに部品を追加するオプションも表示されません。以前に PCB とバッテリーを 1 つの部品に結合し、個々の PCB に価格を関連付けていないからです。