{"id":21006204,"url":"https://github.com/derlin/semantic-modals","last_synced_at":"2025-05-15T01:33:46.967Z","repository":{"id":58229758,"uuid":"58518939","full_name":"derlin/semantic-modals","owner":"derlin","description":"AngularJS ModalService for the semantic-UI framework.","archived":false,"fork":false,"pushed_at":"2018-10-03T15:18:42.000Z","size":4120,"stargazers_count":8,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T20:18:18.227Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://derlin.github.io/semantic-modals/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/derlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-11T06:15:56.000Z","updated_at":"2024-06-22T02:46:04.000Z","dependencies_parsed_at":"2022-08-31T09:21:30.803Z","dependency_job_id":null,"html_url":"https://github.com/derlin/semantic-modals","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2Fsemantic-modals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2Fsemantic-modals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2Fsemantic-modals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2Fsemantic-modals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/derlin","download_url":"https://codeload.github.com/derlin/semantic-modals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254256752,"owners_count":22040352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T08:49:54.969Z","updated_at":"2025-05-15T01:33:46.681Z","avatar_url":"https://github.com/derlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# semantic-modals\n\nAngularJS ModalService for the semantic-UI framework. Have a look at [the demo](http://derlin.github.io/semantic-modals/).\n\n# Quick start\n\n1. load the script to your page\n2. reference the module as a dependency to your angular app:\n   \n  ```js\n  angular.module('app',\n      [\n          'semantic.modals',\n          // other dependencies\n      ]);\n  ```\n  \n3. In your controller, use the `ModalService` :\n\n ```js\n angular\n        .module( 'app' )\n        .controller( 'MainCtrl', function(ModalService){\n          var self = this;\n          \n          self.confirmModal = function(){\n            ModalService.showModal({\n              title : \"confirm deletion\",\n              text: \"are you sure ? The action cannot be undone\",\n              positive: \"yep\",\n              negative: \"cancel\",\n              basic: true\n            }).then( function( result ){\n                if(result.status){\n                  console.log(\"deleting item...\");\n                }\n            });\n          };\n          \n        } );\n ```\n The result is : \n \n ![result](screenshots/basic-confirm-modal.png)\n \n# With bower\n\n```\nbower install semantic-modals\n```\n\n# Usage\n\n### Available options\n\n`showModals` accepts the following options:\n\n- _title_ : the title of the modal,\n- _text_ : the content of the modal, as a simple text,\n- _html_ : the content of the modal, with html support,\n- _htmlInclude_: the path to a file containing the content of the modal (uses `ng-include` internally),\n- _templateId_: the id of a `ng-template`, to use only when you need your own modal code,\n- _templateUrl_: the url of a file containing some ng-templates definitions, to use in conjonction with `templateId` \n    (note: if your template file contains only one template and the template ID is equal to the template url, you can\n     leave this option blank),\n- _positive, negative_ : the text of the negative/positive buttons. If not present, the button won't appear,\n- _basic_ : true/false, if true, the result will be a small basic modal, as presented in the semantic-ui examples,\n- _inputs_ : an object which will be passed to the modal controller. It means you can use whatever you register in the inputs in your modal content, using `inputs.myVar` or `inputs.myFunc()`. But don't forget the modal is in an isolated scope,\n- _cancelable_ : true/false, true by default. Whether or not clicking outside the modal closes it.\n\n### Promise\n\nThe `showModal` function returns a `promise`, which is resolved upon modal close and rejected in case the modal could not be instanciated.\nThe resolve callback takes one argument: `{status: true/false, inputs: yourInputs}`. The `status` is `true` if the use pressed the positive button, `false` otherwise.\nThe `inputs` argument is passed back and can have been modified. It is useful for dialogs with forms for example.\n\n# Examples\n\nA confirm modal with html and `inputs` binding, no cancel button:\n\n```js\nModalService.showModal( {\n      title: \"confirm\",\n      html: \"are you sure you want to delete {{inputs.sensor.name}} ({{inputs.sensor.id}} ) ?\",\n      positive: \"yes\",\n      basic: false,\n      inputs     : {\n          sensor: {id: 3, name: \"merde\"}\n      },\n      cancelable : true\n\n  } ).then( function( result ){\n      console.log( result );\n      \n  }, function(){\n      console.log( \"error\" );\n      \n  } );\n```\n\n![confirm](screenshots/confirm-modal-inputs.png)\n\nA modal using a partial:\n\n```js\n ModalService.showModal( {\n    title: \"edit\",\n    htmlInclude: \"html/_editModalContent.html\",\n    positive: \"yes\",\n    negative: \"nevermind\",\n    basic: false,\n    cancelable : false\n\n} ).then( function( result ){\n    console.log( result );\n}, function(){\n    console.log( \"error\" );\n} );\n```\n\n```html\n// html/_editModalContent.html\n\u003cform name=\"editform\" class=\"ui form\" novalidate\u003e\n    \u003cdiv class=\"ui labeled input\"\u003e\n        \u003c!--name--\u003e\n        \u003cdiv class=\"ui label\"\u003e\n            name\n        \u003c/div\u003e\n        \u003cinput type=\"text\" ng-model=\"inputs.name\"\u003e\n    \u003c/div\u003e\n\n    \u003c!--description--\u003e\n    \u003cdiv class=\"field\"\u003e\n        \u003clabel\u003eDescription\u003c/label\u003e\n        \u003ctextarea ng-model=\"inputs.description\" rows=\"2\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n\n    \u003c!--location--\u003e\n    \u003cdiv class=\"field\"\u003e\n        \u003clabel\u003eLocation\u003c/label\u003e\n        \u003ctextarea ng-model=\"inputs.location\" rows=\"2\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n\u003c/form\u003e\n```\n\n![html-include](screenshots/html-include.png)\n\nA completely custom template:\n\n```html\n\u003cscript type=\"text/ng-template\" id=\"semanticModal.html\"\u003e\n    \u003cdiv class=\"ui modal small\"\u003e\n\n        \u003ci class=\"close icon\" ng-click=\"close(false)\"\u003e\u003c/i\u003e\n        \u003cdiv class=\"header\"\u003e\n            edit {{inputs.sensor.id}}\n        \u003c/div\u003e\n        \u003cdiv class=\"image content\"\u003e\n            \u003cdiv class=\"description\"\u003e\n                \u003cform name=\"editform\" class=\"ui form\" novalidate\u003e\n                    \u003cdiv class=\"ui labeled input\"\u003e\n                        \u003c!--name--\u003e\n                        \u003cdiv class=\"ui label\"\u003e\n                            name\n                        \u003c/div\u003e\n                        \u003cinput type=\"text\" ng-model=\"inputs.sensors.name\"\u003e\n                    \u003c/div\u003e\n\n                    \u003c!--description--\u003e\n                    \u003cdiv class=\"field\"\u003e\n                        \u003clabel\u003eDescription\u003c/label\u003e\n                        \u003ctextarea ng-model=\"inputs.sensor.description\" rows=\"2\"\u003e\u003c/textarea\u003e\n                    \u003c/div\u003e\n\n                    \u003c!--location--\u003e\n                    \u003cdiv class=\"field\"\u003e\n                        \u003clabel\u003eLocation\u003c/label\u003e\n                        \u003ctextarea ng-model=\"inputs.sensor.description\" rows=\"2\"\u003e\u003c/textarea\u003e\n                    \u003c/div\u003e\n\n                \u003c/form\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"actions\"\u003e\n            \u003cdiv class=\"ui black deny button\" ng-click=\"close(false)\"\u003e\n                Nope\n            \u003c/div\u003e\n            \u003cdiv class=\"ui positive right labeled icon button\" ng-click=\"close(true)\"\u003e\n                Yep, that's me\n                \u003ci class=\"checkmark icon\"\u003e\u003c/i\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/script\u003e\n```\n\nIf the template is located in a file with the path identical to the template id (`semanticModal.html`):\n```js\nModalService.showModal( {\n      templateId: \"semanticModal.html\",\n      cancelable : false\n  } );\n```\n\nIf the template is in a file different from the id, say `partial/templates.html`:\n```js\nModalService.showModal( {\n      templateId: \"semanticModal.html\",\n      templateUrl: \"partial/templates.html\",\n      cancelable : false\n  } );\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderlin%2Fsemantic-modals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderlin%2Fsemantic-modals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderlin%2Fsemantic-modals/lists"}