Skip to content

Commit

Permalink
changed allowSimple to true (oppia#4724)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishucr7 @seanlip
ishucr7 authored and seanlip committed Feb 26, 2018
1 parent c3e9a24 commit 290e901
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 115 deletions.
9 changes: 8 additions & 1 deletion .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"eslint:recommended",
],
"plugins": [
"html"
"html",
"angular"
],
"rules": {
"brace-style":[
Expand All @@ -23,6 +24,12 @@
"after": true
}
],
"angular/no-inline-template": [
"error",
{
"allowSimple": true
}
],
"curly": [
"error",
"all"
Expand Down
165 changes: 84 additions & 81 deletions core/templates/dev/head/components/forms/Select2DropdownDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,95 +16,98 @@
* @fileoverview Directive for the select2 autocomplete component.
*/

oppia.directive('select2Dropdown', [function() {
// Directive for incorporating select2 dropdowns.
return {
restrict: 'E',
scope: {
// Whether to allow multiple choices. In order to do so, the value of
// this attribute must be the exact string 'true'.
allowMultipleChoices: '@',
choices: '=',
// An additional CSS class to add to the select2 dropdown. May be
// undefined.
dropdownCssClass: '@',
// A function that formats a new selection. May be undefined.
formatNewSelection: '=',
// The message shown when an invalid search term is entered. May be
// undefined, in which case this defaults to 'No matches found'.
invalidSearchTermMessage: '@',
item: '=',
// The regex used to validate newly-entered choices that do not
// already exist. If it is undefined then all new choices are rejected.
newChoiceRegex: '@',
onSelectionChange: '&',
placeholder: '@',
width: '@'
},
template: '<select><option></option></select>',
controller: ['$scope', '$element', function($scope, $element) {
$scope.newChoiceValidator = new RegExp($scope.newChoiceRegex);
oppia.directive('select2Dropdown', [
'UrlInterpolationService', function(UrlInterpolationService) {
// Directive for incorporating select2 dropdowns.
return {
restrict: 'E',
scope: {
// Whether to allow multiple choices. In order to do so, the value of
// this attribute must be the exact string 'true'.
allowMultipleChoices: '@',
choices: '=',
// An additional CSS class to add to the select2 dropdown. May be
// undefined.
dropdownCssClass: '@',
// A function that formats a new selection. May be undefined.
formatNewSelection: '=',
// The message shown when an invalid search term is entered. May be
// undefined, in which case this defaults to 'No matches found'.
invalidSearchTermMessage: '@',
item: '=',
// The regex used to validate newly-entered choices that do not
// already exist. If it is undefined then all new choices are rejected.
newChoiceRegex: '@',
onSelectionChange: '&',
placeholder: '@',
width: '@'
},
templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
'/components/forms/select2_dropdown_directive.html'),
controller: ['$scope', '$element', function($scope, $element) {
$scope.newChoiceValidator = new RegExp($scope.newChoiceRegex);

var select2Options = {
allowClear: false,
data: $scope.choices,
multiple: $scope.allowMultipleChoices === 'true',
tags: $scope.newChoiceRegex !== undefined,
placeholder: $scope.placeholder,
width: $scope.width || '250px',
createTag: function(params) {
return params.term.match($scope.newChoiceValidator) ? {
id: params.term,
text: params.term
} : null;
},
templateResult: function(queryResult) {
var doesChoiceMatchText = function(choice) {
return choice.id === queryResult.text;
};
var select2Options = {
allowClear: false,
data: $scope.choices,
multiple: $scope.allowMultipleChoices === 'true',
tags: $scope.newChoiceRegex !== undefined,
placeholder: $scope.placeholder,
width: $scope.width || '250px',
createTag: function(params) {
return params.term.match($scope.newChoiceValidator) ? {
id: params.term,
text: params.term
} : null;
},
templateResult: function(queryResult) {
var doesChoiceMatchText = function(choice) {
return choice.id === queryResult.text;
};

if ($scope.choices && $scope.choices.some(doesChoiceMatchText)) {
return queryResult.text;
} else {
if ($scope.formatNewSelection) {
return $scope.formatNewSelection(queryResult.text);
} else {
if ($scope.choices && $scope.choices.some(doesChoiceMatchText)) {
return queryResult.text;
}
}
},
language: {
noResults: function() {
if ($scope.invalidSearchTermMessage) {
return $scope.invalidSearchTermMessage;
} else {
return 'No matches found';
if ($scope.formatNewSelection) {
return $scope.formatNewSelection(queryResult.text);
} else {
return queryResult.text;
}
}
},
language: {
noResults: function() {
if ($scope.invalidSearchTermMessage) {
return $scope.invalidSearchTermMessage;
} else {
return 'No matches found';
}
}
}
}
};
};

if ($scope.dropdownCssClass) {
select2Options.dropdownCssClass = $scope.dropdownCssClass;
}
if ($scope.dropdownCssClass) {
select2Options.dropdownCssClass = $scope.dropdownCssClass;
}

var select2Node = $element[0].firstChild;
var select2Node = $element[0].firstChild;

// Initialize the dropdown.
$(select2Node).select2(select2Options);
$(select2Node).val($scope.item).trigger('change');
// Initialize the dropdown.
$(select2Node).select2(select2Options);
$(select2Node).val($scope.item).trigger('change');

// Update $scope.item when the selection changes.
$(select2Node).on('change', function() {
$scope.item = $(select2Node).val();
$scope.$apply();
$scope.onSelectionChange();
});
// Update $scope.item when the selection changes.
$(select2Node).on('change', function() {
$scope.item = $(select2Node).val();
$scope.$apply();
$scope.onSelectionChange();
});

// Respond to external changes in $scope.item
$scope.$watch('item', function(newValue) {
$(select2Node).val(newValue);
});
}]
};
}]);
// Respond to external changes in $scope.item
$scope.$watch('item', function(newValue) {
$(select2Node).val(newValue);
});
}]
};
}
]);
1 change: 1 addition & 0 deletions core/templates/dev/head/components/forms/select2_dropdown_directive.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<select><option></option></select>
1 change: 1 addition & 0 deletions core/templates/dev/head/custom_popover_directive.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div style="cursor: pointer;" ng-click="showPopover()"><[label]></div>
67 changes: 34 additions & 33 deletions core/templates/dev/head/directives.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,41 +71,42 @@ oppia.directive('selectOnClick', [function() {

// A popover that is shown when its label is hovered or clicked upon, and
// disappears when focus moves away from its label.
oppia.directive('customPopover', ['$sce', function($sce) {
return {
restrict: 'A',
template: (
'<div style="cursor: pointer;" ng-click="showPopover()"><[label]></div>'
),
link: function(scope, elt, attrs) {
scope.label = attrs.popoverLabel;
$(elt).popover({
trigger: 'hover',
html: true,
content: $sce.getTrustedHtml(
'<pre class="oppia-pre-wrapped-text">' + attrs.popoverText +
'</pre>'),
placement: attrs.popoverPlacement
});
},
controller: ['$scope', '$element', function($scope, $element) {
$scope.isShown = false;

$element.on('shown.bs.popover', function() {
$scope.isShown = true;
});
$element.on('hidden.bs.popover', function() {
oppia.directive('customPopover', [
'UrlInterpolationService', '$sce', function(UrlInterpolationService, $sce) {
return {
restrict: 'A',
templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
'/custom_popover_directive.html'),
link: function(scope, elt, attrs) {
scope.label = attrs.popoverLabel;
$(elt).popover({
trigger: 'hover',
html: true,
content: $sce.getTrustedHtml(
'<pre class="oppia-pre-wrapped-text">' + attrs.popoverText +
'</pre>'),
placement: attrs.popoverPlacement
});
},
controller: ['$scope', '$element', function($scope, $element) {
$scope.isShown = false;
});

$scope.showPopover = function() {
if (!$scope.isShown) {
$element.popover('show');
}
};
}]
};
}]);
$element.on('shown.bs.popover', function() {
$scope.isShown = true;
});
$element.on('hidden.bs.popover', function() {
$scope.isShown = false;
});

$scope.showPopover = function() {
if (!$scope.isShown) {
$element.popover('show');
}
};
}]
};
}
]);

// When set as an attr of an <input> element, moves focus to that element
// when a 'focusOn' event is broadcast.
Expand Down
1 change: 1 addition & 0 deletions scripts/install_third_party.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ $PYTHON_CMD scripts/install_third_party.py
# Install third-party node modules needed for the build process.
install_node_module eslint 3.18.0
install_node_module eslint-plugin-html 2.0.1
install_node_module eslint-plugin-angular 0.12.0
install_node_module gulp 3.9.0
install_node_module through2 2.0.0
install_node_module yargs 3.29.0
Expand Down

0 comments on commit 290e901

Please sign in to comment.