├── .eslintrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── Procfile ├── README.md ├── build-config.js ├── config ├── defaults.env └── production.env ├── intl-config.json ├── npm_tasks ├── build-core.js └── copy-env.js ├── package.json ├── server.js ├── src ├── colors.less ├── components │ ├── app-cta │ │ ├── app-cta.jsx │ │ └── app-cta.less │ ├── footer │ │ └── footer.jsx │ ├── masthead │ │ └── masthead.jsx │ ├── micro-modal │ │ ├── micro-modal.jsx │ │ └── micro-modal.less │ └── promo │ │ ├── promo.jsx │ │ └── promo.less ├── locales │ ├── en-US.yaml │ └── index.js ├── main.jsx ├── main.less ├── pages │ ├── error │ │ ├── error.jsx │ │ └── error.less │ ├── legal │ │ ├── legal.jsx │ │ └── legal.less │ ├── project │ │ ├── project.jsx │ │ └── project.less │ ├── splash │ │ ├── splash.jsx │ │ └── splash.less │ └── thumbnail │ │ ├── thumbnail.jsx │ │ └── thumbnail.less └── util │ ├── color.js │ ├── i18n.js │ ├── spec.js │ └── touchhandler.js ├── static ├── css │ └── normalize.css ├── favicon.ico ├── img │ ├── default.svg │ ├── google-play.png │ ├── hero@2x.png │ ├── icon-close.svg │ ├── logo.png │ ├── logo.svg │ ├── maker-party-pattern-tile@2x.png │ ├── maker-party@2x.png │ ├── mozilla.svg │ ├── newlogo.png │ ├── nub.svg │ ├── thimble-pattern@2x.png │ ├── thimble.svg │ ├── toucan.svg │ ├── twitter.svg │ └── zoom-out.svg ├── index.html └── js │ └── lib │ ├── Intl.js │ ├── react-dom.js │ └── react.js ├── views └── project.html └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "indent": [1, 2], 4 | "no-empty": [2], 5 | "no-console": [0], 6 | "comma-dangle": [1], 7 | "no-unused-vars": [0], 8 | "linebreak-style": [2, "unix"], 9 | "semi": [2, "always"] 10 | }, 11 | "env": { 12 | "commonjs": true, 13 | "es6": true, 14 | "browser": true 15 | }, 16 | "extends": "eslint:recommended", 17 | "ecmaFeatures": { 18 | "es6": true, 19 | "jsx": true, 20 | "experimentalObjectRestSpread": true 21 | }, 22 | "plugins": [ 23 | "react" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules 3 | npm-** 4 | /build 5 | src/config.js 6 | .env 7 | src/locales/*.json 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.12' 4 | - '4' 5 | sudo: false 6 | deploy: 7 | provider: heroku 8 | api_key: 9 | secure: EzrSIqqULIoSkIK/GWKdhQ84XlMBOkOzLho2Ei4DpKTUpM9kW5kU0oAzpw4EUORUEKnkTQWwdnDvmsOPBWdL/lMY6SXMdIGG2wf1HEVqjg0Xceq0LrqjUBoMuPgHWjXBKNgobU6uIYpfgQPxHLFqaJvlTNfVydJ52v6S2IXND54= 10 | app: 11 | master: webmaker-desktop-production 12 | develop: webmaker-desktop-staging 13 | on: 14 | repo: mozilla/webmaker-browser 15 | node: '0.12' 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License, version 2.0 2 | 3 | 1. Definitions 4 | 5 | 1.1. "Contributor" 6 | 7 | means each individual or legal entity that creates, contributes to the 8 | creation of, or owns Covered Software. 9 | 10 | 1.2. "Contributor Version" 11 | 12 | means the combination of the Contributions of others (if any) used by a 13 | Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | 17 | means Covered Software of a particular Contributor. 18 | 19 | 1.4. "Covered Software" 20 | 21 | means Source Code Form to which the initial Contributor has attached the 22 | notice in Exhibit A, the Executable Form of such Source Code Form, and 23 | Modifications of such Source Code Form, in each case including portions 24 | thereof. 25 | 26 | 1.5. "Incompatible With Secondary Licenses" 27 | means 28 | 29 | a. that the initial Contributor has attached the notice described in 30 | Exhibit B to the Covered Software; or 31 | 32 | b. that the Covered Software was made available under the terms of 33 | version 1.1 or earlier of the License, but not also under the terms of 34 | a Secondary License. 35 | 36 | 1.6. "Executable Form" 37 | 38 | means any form of the work other than Source Code Form. 39 | 40 | 1.7. "Larger Work" 41 | 42 | means a work that combines Covered Software with other material, in a 43 | separate file or files, that is not Covered Software. 44 | 45 | 1.8. "License" 46 | 47 | means this document. 48 | 49 | 1.9. "Licensable" 50 | 51 | means having the right to grant, to the maximum extent possible, whether 52 | at the time of the initial grant or subsequently, any and all of the 53 | rights conveyed by this License. 54 | 55 | 1.10. "Modifications" 56 | 57 | means any of the following: 58 | 59 | a. any file in Source Code Form that results from an addition to, 60 | deletion from, or modification of the contents of Covered Software; or 61 | 62 | b. any new file in Source Code Form that contains any Covered Software. 63 | 64 | 1.11. "Patent Claims" of a Contributor 65 | 66 | means any patent claim(s), including without limitation, method, 67 | process, and apparatus claims, in any patent Licensable by such 68 | Contributor that would be infringed, but for the grant of the License, 69 | by the making, using, selling, offering for sale, having made, import, 70 | or transfer of either its Contributions or its Contributor Version. 71 | 72 | 1.12. "Secondary License" 73 | 74 | means either the GNU General Public License, Version 2.0, the GNU Lesser 75 | General Public License, Version 2.1, the GNU Affero General Public 76 | License, Version 3.0, or any later versions of those licenses. 77 | 78 | 1.13. "Source Code Form" 79 | 80 | means the form of the work preferred for making modifications. 81 | 82 | 1.14. "You" (or "Your") 83 | 84 | means an individual or a legal entity exercising rights under this 85 | License. For legal entities, "You" includes any entity that controls, is 86 | controlled by, or is under common control with You. For purposes of this 87 | definition, "control" means (a) the power, direct or indirect, to cause 88 | the direction or management of such entity, whether by contract or 89 | otherwise, or (b) ownership of more than fifty percent (50%) of the 90 | outstanding shares or beneficial ownership of such entity. 91 | 92 | 93 | 2. License Grants and Conditions 94 | 95 | 2.1. Grants 96 | 97 | Each Contributor hereby grants You a world-wide, royalty-free, 98 | non-exclusive license: 99 | 100 | a. under intellectual property rights (other than patent or trademark) 101 | Licensable by such Contributor to use, reproduce, make available, 102 | modify, display, perform, distribute, and otherwise exploit its 103 | Contributions, either on an unmodified basis, with Modifications, or 104 | as part of a Larger Work; and 105 | 106 | b. under Patent Claims of such Contributor to make, use, sell, offer for 107 | sale, have made, import, and otherwise transfer either its 108 | Contributions or its Contributor Version. 109 | 110 | 2.2. Effective Date 111 | 112 | The licenses granted in Section 2.1 with respect to any Contribution 113 | become effective for each Contribution on the date the Contributor first 114 | distributes such Contribution. 115 | 116 | 2.3. Limitations on Grant Scope 117 | 118 | The licenses granted in this Section 2 are the only rights granted under 119 | this License. No additional rights or licenses will be implied from the 120 | distribution or licensing of Covered Software under this License. 121 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 122 | Contributor: 123 | 124 | a. for any code that a Contributor has removed from Covered Software; or 125 | 126 | b. for infringements caused by: (i) Your and any other third party's 127 | modifications of Covered Software, or (ii) the combination of its 128 | Contributions with other software (except as part of its Contributor 129 | Version); or 130 | 131 | c. under Patent Claims infringed by Covered Software in the absence of 132 | its Contributions. 133 | 134 | This License does not grant any rights in the trademarks, service marks, 135 | or logos of any Contributor (except as may be necessary to comply with 136 | the notice requirements in Section 3.4). 137 | 138 | 2.4. Subsequent Licenses 139 | 140 | No Contributor makes additional grants as a result of Your choice to 141 | distribute the Covered Software under a subsequent version of this 142 | License (see Section 10.2) or under the terms of a Secondary License (if 143 | permitted under the terms of Section 3.3). 144 | 145 | 2.5. Representation 146 | 147 | Each Contributor represents that the Contributor believes its 148 | Contributions are its original creation(s) or it has sufficient rights to 149 | grant the rights to its Contributions conveyed by this License. 150 | 151 | 2.6. Fair Use 152 | 153 | This License is not intended to limit any rights You have under 154 | applicable copyright doctrines of fair use, fair dealing, or other 155 | equivalents. 156 | 157 | 2.7. Conditions 158 | 159 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in 160 | Section 2.1. 161 | 162 | 163 | 3. Responsibilities 164 | 165 | 3.1. Distribution of Source Form 166 | 167 | All distribution of Covered Software in Source Code Form, including any 168 | Modifications that You create or to which You contribute, must be under 169 | the terms of this License. You must inform recipients that the Source 170 | Code Form of the Covered Software is governed by the terms of this 171 | License, and how they can obtain a copy of this License. You may not 172 | attempt to alter or restrict the recipients' rights in the Source Code 173 | Form. 174 | 175 | 3.2. Distribution of Executable Form 176 | 177 | If You distribute Covered Software in Executable Form then: 178 | 179 | a. such Covered Software must also be made available in Source Code Form, 180 | as described in Section 3.1, and You must inform recipients of the 181 | Executable Form how they can obtain a copy of such Source Code Form by 182 | reasonable means in a timely manner, at a charge no more than the cost 183 | of distribution to the recipient; and 184 | 185 | b. You may distribute such Executable Form under the terms of this 186 | License, or sublicense it under different terms, provided that the 187 | license for the Executable Form does not attempt to limit or alter the 188 | recipients' rights in the Source Code Form under this License. 189 | 190 | 3.3. Distribution of a Larger Work 191 | 192 | You may create and distribute a Larger Work under terms of Your choice, 193 | provided that You also comply with the requirements of this License for 194 | the Covered Software. If the Larger Work is a combination of Covered 195 | Software with a work governed by one or more Secondary Licenses, and the 196 | Covered Software is not Incompatible With Secondary Licenses, this 197 | License permits You to additionally distribute such Covered Software 198 | under the terms of such Secondary License(s), so that the recipient of 199 | the Larger Work may, at their option, further distribute the Covered 200 | Software under the terms of either this License or such Secondary 201 | License(s). 202 | 203 | 3.4. Notices 204 | 205 | You may not remove or alter the substance of any license notices 206 | (including copyright notices, patent notices, disclaimers of warranty, or 207 | limitations of liability) contained within the Source Code Form of the 208 | Covered Software, except that You may alter any license notices to the 209 | extent required to remedy known factual inaccuracies. 210 | 211 | 3.5. Application of Additional Terms 212 | 213 | You may choose to offer, and to charge a fee for, warranty, support, 214 | indemnity or liability obligations to one or more recipients of Covered 215 | Software. However, You may do so only on Your own behalf, and not on 216 | behalf of any Contributor. You must make it absolutely clear that any 217 | such warranty, support, indemnity, or liability obligation is offered by 218 | You alone, and You hereby agree to indemnify every Contributor for any 219 | liability incurred by such Contributor as a result of warranty, support, 220 | indemnity or liability terms You offer. You may include additional 221 | disclaimers of warranty and limitations of liability specific to any 222 | jurisdiction. 223 | 224 | 4. Inability to Comply Due to Statute or Regulation 225 | 226 | If it is impossible for You to comply with any of the terms of this License 227 | with respect to some or all of the Covered Software due to statute, 228 | judicial order, or regulation then You must: (a) comply with the terms of 229 | this License to the maximum extent possible; and (b) describe the 230 | limitations and the code they affect. Such description must be placed in a 231 | text file included with all distributions of the Covered Software under 232 | this License. Except to the extent prohibited by statute or regulation, 233 | such description must be sufficiently detailed for a recipient of ordinary 234 | skill to be able to understand it. 235 | 236 | 5. Termination 237 | 238 | 5.1. The rights granted under this License will terminate automatically if You 239 | fail to comply with any of its terms. However, if You become compliant, 240 | then the rights granted under this License from a particular Contributor 241 | are reinstated (a) provisionally, unless and until such Contributor 242 | explicitly and finally terminates Your grants, and (b) on an ongoing 243 | basis, if such Contributor fails to notify You of the non-compliance by 244 | some reasonable means prior to 60 days after You have come back into 245 | compliance. Moreover, Your grants from a particular Contributor are 246 | reinstated on an ongoing basis if such Contributor notifies You of the 247 | non-compliance by some reasonable means, this is the first time You have 248 | received notice of non-compliance with this License from such 249 | Contributor, and You become compliant prior to 30 days after Your receipt 250 | of the notice. 251 | 252 | 5.2. If You initiate litigation against any entity by asserting a patent 253 | infringement claim (excluding declaratory judgment actions, 254 | counter-claims, and cross-claims) alleging that a Contributor Version 255 | directly or indirectly infringes any patent, then the rights granted to 256 | You by any and all Contributors for the Covered Software under Section 257 | 2.1 of this License shall terminate. 258 | 259 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user 260 | license agreements (excluding distributors and resellers) which have been 261 | validly granted by You or Your distributors under this License prior to 262 | termination shall survive termination. 263 | 264 | 6. Disclaimer of Warranty 265 | 266 | Covered Software is provided under this License on an "as is" basis, 267 | without warranty of any kind, either expressed, implied, or statutory, 268 | including, without limitation, warranties that the Covered Software is free 269 | of defects, merchantable, fit for a particular purpose or non-infringing. 270 | The entire risk as to the quality and performance of the Covered Software 271 | is with You. Should any Covered Software prove defective in any respect, 272 | You (not any Contributor) assume the cost of any necessary servicing, 273 | repair, or correction. This disclaimer of warranty constitutes an essential 274 | part of this License. No use of any Covered Software is authorized under 275 | this License except under this disclaimer. 276 | 277 | 7. Limitation of Liability 278 | 279 | Under no circumstances and under no legal theory, whether tort (including 280 | negligence), contract, or otherwise, shall any Contributor, or anyone who 281 | distributes Covered Software as permitted above, be liable to You for any 282 | direct, indirect, special, incidental, or consequential damages of any 283 | character including, without limitation, damages for lost profits, loss of 284 | goodwill, work stoppage, computer failure or malfunction, or any and all 285 | other commercial damages or losses, even if such party shall have been 286 | informed of the possibility of such damages. This limitation of liability 287 | shall not apply to liability for death or personal injury resulting from 288 | such party's negligence to the extent applicable law prohibits such 289 | limitation. Some jurisdictions do not allow the exclusion or limitation of 290 | incidental or consequential damages, so this exclusion and limitation may 291 | not apply to You. 292 | 293 | 8. Litigation 294 | 295 | Any litigation relating to this License may be brought only in the courts 296 | of a jurisdiction where the defendant maintains its principal place of 297 | business and such litigation shall be governed by laws of that 298 | jurisdiction, without reference to its conflict-of-law provisions. Nothing 299 | in this Section shall prevent a party's ability to bring cross-claims or 300 | counter-claims. 301 | 302 | 9. Miscellaneous 303 | 304 | This License represents the complete agreement concerning the subject 305 | matter hereof. If any provision of this License is held to be 306 | unenforceable, such provision shall be reformed only to the extent 307 | necessary to make it enforceable. Any law or regulation which provides that 308 | the language of a contract shall be construed against the drafter shall not 309 | be used to construe this License against a Contributor. 310 | 311 | 312 | 10. Versions of the License 313 | 314 | 10.1. New Versions 315 | 316 | Mozilla Foundation is the license steward. Except as provided in Section 317 | 10.3, no one other than the license steward has the right to modify or 318 | publish new versions of this License. Each version will be given a 319 | distinguishing version number. 320 | 321 | 10.2. Effect of New Versions 322 | 323 | You may distribute the Covered Software under the terms of the version 324 | of the License under which You originally received the Covered Software, 325 | or under the terms of any subsequent version published by the license 326 | steward. 327 | 328 | 10.3. Modified Versions 329 | 330 | If you create software not governed by this License, and you want to 331 | create a new license for such software, you may create and use a 332 | modified version of this License if you rename the license and remove 333 | any references to the name of the license steward (except to note that 334 | such modified license differs from this License). 335 | 336 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 337 | Licenses If You choose to distribute Source Code Form that is 338 | Incompatible With Secondary Licenses under the terms of this version of 339 | the License, the notice described in Exhibit B of this License must be 340 | attached. 341 | 342 | Exhibit A - Source Code Form License Notice 343 | 344 | This Source Code Form is subject to the 345 | terms of the Mozilla Public License, v. 346 | 2.0. If a copy of the MPL was not 347 | distributed with this file, You can 348 | obtain one at 349 | http://mozilla.org/MPL/2.0/. 350 | 351 | If it is not possible or desirable to put the notice in a particular file, 352 | then You may include the notice in a location (such as a LICENSE file in a 353 | relevant directory) where a recipient would be likely to look for such a 354 | notice. 355 | 356 | You may add additional accurate notices of copyright ownership. 357 | 358 | Exhibit B - "Incompatible With Secondary Licenses" Notice 359 | 360 | This Source Code Form is "Incompatible 361 | With Secondary Licenses", as defined by 362 | the Mozilla Public License, v. 2.0. 363 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: npm run server 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Webmaker for Browser 2 | 3 | [![Build Status](https://travis-ci.org/mozilla/webmaker-browser.svg)](https://travis-ci.org/mozilla/webmaker-browser) 4 | 5 | Mozilla Webmaker's mission is to help enable a new generation of digital creators and webmakers, giving people the tools and skills they need to move from using the Web to actively making the Web. 6 | 7 | ## Getting Started 8 | 9 | #### Prerequisites 10 | Before you jump into the code you'll want to download, install, and configure the following: 11 | 12 | - [Node 0.12+](https://nodejs.org/) w/ ES6 ("harmony") features enabled 13 | - [NPM 2.6+](https://www.npmjs.com/) 14 | 15 | #### Clone & Install Dependencies 16 | ```bash 17 | git clone https://github.com/mozilla/webmaker-browser 18 | cd webmaker-browser 19 | npm install 20 | ``` 21 | 22 | #### Starting the Server 23 | ```bash 24 | npm start 25 | ``` 26 | 27 | ## Deployment 28 | Deployment to `staging` and `production` servers is automated via [Travis-CI](https://travis-ci.org/). 29 | 30 | `develop` – Deploys to https://webmaker-desktop-staging.herokuapp.com 31 | 32 | `master` – Deploys to https://webmaker-desktop-production.herokuapp.com 33 | 34 | ## Localization 35 | 36 | In this project we're using [React-Intl](https://github.com/yahoo/react-intl) to localize our application and YAML for translation. 37 | 38 | #### Localize a component or page 39 | 40 | To localize a component or page you have to include `IntlMixin` in your class `mixins`, for example: 41 | 42 | ``` typescript 43 | var React = require('react'); 44 | 45 | var Example = React.createClass({ 46 | mixins: [require('react-intl').IntlMixin], 47 | render: function() { 48 | return ( 49 |
50 |

{this.getIntlMessage('key_name_here')} 51 |

52 | ); 53 | } 54 | 55 | }); 56 | ``` 57 | 58 | If the strings include HTML, use the `FormattedHTMLMessage` element: 59 | 60 | ``` typescript 61 | import { FormattedHTMLMessage, IntlMixin } from 'react-intl'; 62 | 63 | 66 | ``` 67 | 68 | Once you add the mixin it will expose the `getIntlMessage` method to your component to get the localized message for the given key. 69 | 70 | #### Adding locale 71 | Because we are using YAML for our translation and React-Intl expects JSON, we need an extra build step to convert YAML to JSON. 72 | We are using [yaml-intl-xml-json-converter](https://www.npmjs.com/package/yaml-intl-xml-json-converter) to convert from YAML to JSON. 73 | 74 | ##### config for for YAML to JSON conversion 75 | 76 | `intl-config.json` 77 | ``` json 78 | { 79 | "supportedLocales": ["en-US", "de", "fr", "pt-BR", "es"], 80 | "dest": "locales", 81 | "src": "locales", 82 | "type": "json" 83 | } 84 | ``` 85 | 86 | ##### YAML template 87 | 88 | `en-US.yaml` 89 | ``` yaml 90 | --- 91 | en-US: 92 | first: This is your first message 93 | second: This is your second message 94 | ``` 95 | 96 | You have to make sure you match your language code in your YAML file and the name of the file with what you include in your config file for the converting part otherwise it will fail. 97 | 98 | ### I18N Methods 99 | 100 | `i18n.js` file exposes different methods to help with localization. These are the list of available methods when you required the module. 101 | 102 | ``` js 103 | { 104 | intlData: {messages: {}, locales: {}}, 105 | defaultLang: 'en-US', 106 | currentLanguage: locale, 107 | isSupportedLanguage: function(lang), 108 | intlDataFor: function(lang) 109 | } 110 | ``` 111 | 112 | 1. `intlData` 113 | This object consist of two properties. `locales` and `messages`. We use this object to pass it to React-Router in order for `getIntlMessage` to work properly. 114 | 115 | 2. `defaultLang` 116 | This will return default language of the application. 117 | 118 | 3. `currentLanguage` 119 | This will return current language of the client that visiting our site. 120 | 121 | 4. `isSupportedLanguage` 122 | This method expect a valid language code, and it's used to validate if we support that given language or not. 123 | The return value is boolean. 124 | 125 | 5. `intlDataFor` 126 | This method expect a valid language code, and it will return `intlData` for the given language. 127 | 128 | ## Post localization 129 | 130 | To fully localized the app we need to make sure we update the resource file on Transifex. 131 | This step requires that you have the required credential to upload the resource file on the Transifex's Webmaker project. 132 | 133 | If you do not have the credential please speak @alicoding on IRC or any of the coordinator of the project for Webmaker on Transifex. 134 | 135 | NOTE: There should be a weekly cycle where we upload the file on Transifex to avoid any problem that could occur. 136 | 137 | ## Contact Us 138 | IRC: `#webmaker` on `irc.mozilla.org` 139 | 140 | Forum: [https://groups.google.com/forum/#!forum/mozilla.webmaker](https://groups.google.com/forum/#!forum/mozilla.webmaker) 141 | -------------------------------------------------------------------------------- /build-config.js: -------------------------------------------------------------------------------- 1 | var habitat = require('habitat'); 2 | 3 | // Local environment in .env overwrites everything else 4 | habitat.load('.env'); 5 | 6 | var environment = habitat.get('NODE_ENV'); 7 | 8 | if (environment === 'PRODUCTION') { 9 | habitat.load('config/production.env'); 10 | } 11 | 12 | habitat.load('config/defaults.env'); 13 | 14 | var config = { 15 | API_URI: habitat.get('API_URI'), 16 | }; 17 | 18 | process.stdout.write( 19 | '// THIS IS A GENERATED FILE. EDIT npm_tasks/build-config.js INSTEAD\n' + 20 | 'module.exports = ' + JSON.stringify(config) + ';\n' 21 | ); 22 | -------------------------------------------------------------------------------- /config/defaults.env: -------------------------------------------------------------------------------- 1 | API_URI='https://webmaker-api.herokuapp.com' 2 | -------------------------------------------------------------------------------- /config/production.env: -------------------------------------------------------------------------------- 1 | API_URI='https://api.webmaker.org' 2 | -------------------------------------------------------------------------------- /intl-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "supportedLocales": ["en-US"], 3 | "dest": "src/locales", 4 | "src": "src/locales", 5 | "type": "json" 6 | } 7 | -------------------------------------------------------------------------------- /npm_tasks/build-core.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var execSync = require('child_process').execSync; 4 | 5 | var ROOT_DIR = path.resolve(__dirname, '..'); 6 | var WEBMAKER_CORE_DIR = fs.realpathSync(path.resolve( 7 | ROOT_DIR, 'node_modules', 'webmaker-core' 8 | )); 9 | 10 | function main() { 11 | execSync('npm install', { cwd: WEBMAKER_CORE_DIR, stdio: 'inherit' }); 12 | execSync('node npm_tasks/copy-env.js', 13 | { cwd: ROOT_DIR, stdio: 'inherit' }); 14 | execSync('npm run build', { cwd: WEBMAKER_CORE_DIR, stdio: 'inherit' }); 15 | } 16 | 17 | exports.WEBMAKER_CORE_DIR = WEBMAKER_CORE_DIR; 18 | 19 | if (!module.parent) { 20 | main(); 21 | } 22 | -------------------------------------------------------------------------------- /npm_tasks/copy-env.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var ncp = require('ncp').ncp; 3 | 4 | if(fs.existsSync('.env')) { 5 | ncp('.env', 'node_modules/webmaker-core/.env', function (error) { 6 | if (error) { 7 | console.error('Failed to copy .env'); 8 | } 9 | }) 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webmaker-desktop", 3 | "version": "1.6.1", 4 | "description": "", 5 | "scripts": { 6 | "start": "npm run build && npm run server", 7 | "postinstall": "npm run build", 8 | "dev": "npm-run-all --parallel server watch:**", 9 | "config": "node ./build-config.js > src/config.js", 10 | "build": "npm-run-all build:**", 11 | "build:clean": "rimraf ./build && mkdirp ./build", 12 | "build:static": "ncp ./static ./build", 13 | "build:l10njson": "yamlconvert intl-config.json", 14 | "build:css": "npm run watch:css -- --no-watch", 15 | "build:js": "npm run build:core && npm run config && webpack", 16 | "build:core": "node npm_tasks/copy-env.js && node npm_tasks/build-core.js", 17 | "watch:js": "npm run build:js -- --watch", 18 | "watch:css": "autoless --autoprefix \"> 5%, last 2 versions, android >= 4.0\" ./src ./build/css", 19 | "test": "npm run test:lint", 20 | "test:lint": "eslint --ext .js,.jsx src/", 21 | "server": "node server.js" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/mozilla/webmaker-desktop" 26 | }, 27 | "license": "MPL-2.0", 28 | "bugs": { 29 | "url": "https://github.com/mozilla/webmaker-desktop/issues" 30 | }, 31 | "dependencies": { 32 | "bunyan": "1.5.1", 33 | "classnames": "2.2.0", 34 | "color": "0.10.1", 35 | "email-validator": "1.0.3", 36 | "handlebars": "4.0.3", 37 | "hapi": "8.6.0", 38 | "hapi-bunyan": "0.6.0", 39 | "nets": "3.2.0", 40 | "react": "0.14.0", 41 | "react-cookie": "0.4.1", 42 | "react-dom": "0.14.0", 43 | "react-intl": "v2.0.0-pr-3", 44 | "react-router": "v1.0.0-rc3", 45 | "ua-parser-js": "0.7.9", 46 | "webmaker-core": "https://github.com/mozilla/webmaker-core.git#v1.6.1" 47 | }, 48 | "devDependencies": { 49 | "autoless": "~0.1.7", 50 | "babel-core": "~5.8.29", 51 | "babel-loader": "~5.3.2", 52 | "expect.js": "~0.3.1", 53 | "habitat": "~3.1.2", 54 | "json-loader": "~0.5.2", 55 | "jsx-loader": "~0.13.2", 56 | "eslint": "^1.3.1", 57 | "eslint-plugin-react": "^3.3.1", 58 | "mkdirp": "~0.5.1", 59 | "ncp": "^2.0.0", 60 | "npm-run-all": "~1.2.4", 61 | "rimraf": "~2.4.3", 62 | "webpack": "~1.12.2", 63 | "yaml-intl-xml-json-converter": "0.0.7" 64 | }, 65 | "engines": { 66 | "node": "0.12.2" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var Hapi = require('hapi'); 2 | var Path = require('path'); 3 | var qs = require('querystring'); 4 | var bunyan = require('bunyan'); 5 | var nets = require('nets'); 6 | 7 | var config = require('./src/config'); 8 | 9 | // Create server 10 | var server = new Hapi.Server({ 11 | connections: { 12 | router: { stripTrailingSlash: true }, 13 | routes: { 14 | files: { relativeTo: Path.join(__dirname, 'build') } 15 | } 16 | } 17 | }); 18 | 19 | server.connection({ 20 | port: process.env.PORT || 8000 21 | }); 22 | 23 | // Bunyan Logging 24 | server.register({ 25 | register: require('hapi-bunyan'), 26 | options: { 27 | logger: bunyan.createLogger({ 28 | name: 'webmaker-desktop', 29 | level: process.env.LOG_LEVEL || 'debug' 30 | }) 31 | } 32 | }, function(err) { 33 | if ( err ) { 34 | throw err; 35 | } 36 | }); 37 | 38 | 39 | server.views({ 40 | engines: { 41 | html: require('handlebars') 42 | }, 43 | relativeTo: __dirname, 44 | path: './views', 45 | }); 46 | 47 | // Route handlers 48 | server.route({ 49 | method: 'GET', 50 | path: '/', 51 | handler: function (request, reply) { 52 | if (!request.query.project) { 53 | reply.file('index.html'); 54 | } else { 55 | var options = { 56 | method: 'GET', 57 | uri: config.API_URI + 58 | '/users/' + request.query.user + 59 | '/projects/' + request.query.project, 60 | json: {} 61 | }; 62 | 63 | nets(options, function (err, res, body) { 64 | if (err || res.statusCode !== 200) { 65 | reply.file('index.html'); 66 | return; 67 | } 68 | 69 | var images = body.project.thumbnail; 70 | var thumb; 71 | 72 | if (images && images[320]) { 73 | thumb = images[320]; 74 | } 75 | 76 | reply.view( 77 | 'project', 78 | { 79 | user: body.project.author.username, 80 | title: body.project.title, 81 | image: thumb, 82 | host: request.info.host 83 | }); 84 | }); 85 | } 86 | } 87 | }); 88 | 89 | server.route({ 90 | method: 'GET', 91 | path: '/users/{user}/projects/{project}', 92 | handler: function (request, reply) { 93 | reply.redirect('/?' + qs.stringify(request.params) + '#/project?' + qs.stringify(request.params)); 94 | } 95 | }); 96 | 97 | server.route({ 98 | method: 'GET', 99 | path: '/favicon.ico', 100 | handler: function (request, reply) { 101 | reply.file('favicon.ico'); 102 | } 103 | }); 104 | 105 | // X-Ray Goggles redirect 106 | if (process.env.GOGGLES_URL) { 107 | var gogglesRedirect = function (request, reply) { 108 | reply.redirect(process.env.GOGGLES_URL); 109 | }; 110 | 111 | server.route([{ 112 | method: 'GET', 113 | path: '/goggles', 114 | handler: gogglesRedirect 115 | }, { 116 | method: 'GET', 117 | path: '/{locale}/goggles', 118 | handler: gogglesRedirect 119 | }]); 120 | } 121 | 122 | var meRedirect = function (request, reply) { 123 | reply.redirect(process.env.TEACH_ME_PAGE_URL); 124 | }; 125 | 126 | server.route({ 127 | method: 'GET', 128 | path: '/me', 129 | handler: meRedirect 130 | }); 131 | 132 | server.route({ 133 | method: 'GET', 134 | path: '/{locale}/me', 135 | handler: meRedirect 136 | }); 137 | 138 | server.route({ 139 | method: 'GET', 140 | path: '/{path}/{param*}', 141 | handler: { 142 | directory: { 143 | path: [ 144 | 'css', 145 | 'favicons', 146 | 'fonts', 147 | 'img', 148 | 'js' 149 | ] 150 | } 151 | } 152 | }); 153 | 154 | // Start listening 155 | server.start(function () { 156 | console.log('Server running at:', server.info.uri); 157 | }); 158 | -------------------------------------------------------------------------------- /src/colors.less: -------------------------------------------------------------------------------- 1 | // If possible, use colors from webmaker-core! 2 | // node_modules/webmaker-core/src/colors.less 3 | 4 | @vikingYellow: #E5B41C; 5 | @modalSlate: #718095; 6 | @legacyGreen: #00BE94; 7 | @thimbleGreen: #47AD66; 8 | -------------------------------------------------------------------------------- /src/components/app-cta/app-cta.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var cookie = require('react-cookie'); 3 | var platform = require('webmaker-core/src/lib/platform'); 4 | var UAParser = require('ua-parser-js'); 5 | var ua = new UAParser().getResult(); 6 | var {defineMessages, injectIntl, intlShape, FormattedMessage} = require('react-intl'); 7 | 8 | var AppCta = React.createClass({ 9 | statics: { 10 | FALLBACK_URL: 'https://play.google.com/store/apps/details?id=org.mozilla.webmaker' 11 | }, 12 | getInitialState: function () { 13 | return { 14 | hidden: cookie.load('hideCTA') ? true : false 15 | }; 16 | }, 17 | getDeepLink: function () { 18 | return 'webmaker://play?user=' + 19 | this.props.user + 20 | '&project=' + 21 | this.props.project + 22 | '#Intent;scheme=webmaker;package=org.mozilla.webmaker;S.browser_fallback_url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dorg.mozilla.webmaker;end'; 23 | }, 24 | onBlur: function () { 25 | // TODO: This still seems to fire, even if the app was launched. 26 | // i.e. launching the app doesn't trigger a blur 27 | clearTimeout(this.timeout); 28 | this.setState({ 29 | loading: false 30 | }); 31 | }, 32 | isAndroid: function () { 33 | if (ua && ua.os && ua.os.name === 'Android') { 34 | return true; 35 | } 36 | }, 37 | openApp: function () { 38 | 39 | platform.trackEvent('Browser Player', 'Click CTA Open App', this.getDeepLink()); 40 | 41 | this.setState({ 42 | loading: true 43 | }); 44 | 45 | if (!this.isAndroid()) { 46 | window.location = AppCta.FALLBACK_URL; 47 | return; 48 | } 49 | 50 | this.timeout = setTimeout(function () { 51 | window.location = AppCta.FALLBACK_URL; 52 | }, 1000); 53 | 54 | window.location = this.getDeepLink(); 55 | }, 56 | closeCta: function () { 57 | // Keep CTA dismissed for 30 days 58 | cookie.save('hideCTA', 1, { 59 | expires: new Date(Date.now() + (30 * 24 * 60 * 60 * 1000)) 60 | }); 61 | 62 | this.setState({ 63 | hidden: true 64 | }); 65 | }, 66 | render: function () { 67 | var messages = this.props.intl.messages; 68 | 69 | return (
70 |
71 |

{messages['use_webmaker_app']}

72 |

{messages['like_it_better']}

73 |
74 |
75 | 79 | 80 |
81 |
); 82 | } 83 | }); 84 | 85 | module.exports = injectIntl(AppCta); 86 | -------------------------------------------------------------------------------- /src/components/app-cta/app-cta.less: -------------------------------------------------------------------------------- 1 | header.app-cta { 2 | display: flex; 3 | align-items: center; 4 | 5 | background: #414567; 6 | color: @softGrey; 7 | padding: 13px; 8 | font-size: 13px; 9 | 10 | &.hidden { 11 | display: none; 12 | } 13 | 14 | .open-loading { 15 | animation: pulseOpacity 1s infinite; 16 | } 17 | 18 | .left { 19 | flex-grow: 1; 20 | } 21 | .right { 22 | flex-shrink: 0; 23 | } 24 | h3, 25 | p { 26 | line-height: 1; 27 | margin: 0; 28 | display: inline-block; 29 | } 30 | h3 { 31 | font-weight: normal; 32 | margin-right: 8px; 33 | } 34 | p { 35 | color: fade(@softGrey, 80%); 36 | } 37 | button { 38 | outline: none; 39 | box-sizing: content-box; 40 | text-transform: uppercase; 41 | background: fade(@softGrey, 5%); 42 | color: @softGrey; 43 | border: 1px solid fade(@softGrey, 90%); 44 | height: 31px; 45 | line-height: 14px; 46 | &:first-child { 47 | padding: 0 14px; 48 | border-radius: 20px; 49 | margin-right: 10px; 50 | } 51 | &:last-child { 52 | padding: 0; 53 | width: 31px; 54 | border-radius: 31px; 55 | margin-right: -5px; 56 | img { 57 | vertical-align: middle; 58 | } 59 | } 60 | } 61 | } 62 | 63 | @keyframes pulseOpacity { 64 | 0% { 65 | opacity: 1; 66 | } 67 | 50% { 68 | opacity: 0; 69 | } 70 | 100% { 71 | opacity: 1; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/footer/footer.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var {defineMessages, injectIntl, intlShape, FormattedMessage} = require('react-intl'); 3 | 4 | var Footer = React.createClass({ 5 | render: function () { 6 | var messages = this.props.intl.messages; 7 | 8 | return ( 9 | 20 | ); 21 | } 22 | }); 23 | 24 | module.exports = injectIntl(Footer); 25 | -------------------------------------------------------------------------------- /src/components/masthead/masthead.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | module.exports = React.createClass({ 4 | render: function () { 5 | return ( 6 |
7 |
8 | 11 | {this.props.children} 12 |
13 |
14 | ); 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/micro-modal/micro-modal.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | module.exports = React.createClass({ 4 | getInitialState: function () { 5 | return { 6 | isVisible: true 7 | }; 8 | }, 9 | show: function () { 10 | this.setState({ 11 | isVisible: true 12 | }); 13 | }, 14 | hide: function () { 15 | this.setState({ 16 | isVisible: false 17 | }); 18 | }, 19 | render: function () { 20 | return ( 21 |
22 | {this.props.children} 23 |
24 | ); 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /src/components/micro-modal/micro-modal.less: -------------------------------------------------------------------------------- 1 | .micro-modal { 2 | z-index: 999999; 3 | position: absolute; 4 | width: 280px; 5 | bottom: 20px; 6 | right: 20px; 7 | background: @modalSlate; 8 | border: 0px solid rgba(35,31,32,0.02); 9 | box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.16), 0px 3px 3px 0px rgba(0,0,0,0.23); 10 | border-radius: 5px; 11 | padding: 20px; 12 | color: @white; 13 | 14 | &.hidden { 15 | display: none; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/promo/promo.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | module.exports = React.createClass({ 4 | propTypes: { 5 | logoAlt: React.PropTypes.string.isRequired, 6 | logoSrc: React.PropTypes.string.isRequired, 7 | head: React.PropTypes.string.isRequired, 8 | subhead: React.PropTypes.string.isRequired, 9 | ctaText: React.PropTypes.string.isRequired, 10 | ctaLink: React.PropTypes.string.isRequired 11 | }, 12 | render: function () { 13 | return ( 14 |
15 |
16 | {this.props.logoAlt} 19 |

{this.props.head}

20 |

{this.props.subhead}

21 | {this.props.ctaText} 22 |
23 |
24 | ); 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /src/components/promo/promo.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Promo Banner 3 | */ 4 | .promoMixin(@promoPrimaryColor) { 5 | position: relative; 6 | padding: 50px 0 50px 0; 7 | color: @white; 8 | background-color: @promoPrimaryColor; 9 | text-align: center; 10 | 11 | h3 { 12 | font-size: 2.25rem; 13 | font-weight: 400; 14 | margin: 20px 0 10px 0; 15 | } 16 | 17 | h4 { 18 | font-size: 1.375rem; 19 | line-height: 1.36; 20 | font-weight: 400; 21 | } 22 | 23 | .btn { 24 | background: @white; 25 | border: 1px solid darken(@promoPrimaryColor, 15%); 26 | color: @promoPrimaryColor; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/locales/en-US.yaml: -------------------------------------------------------------------------------- 1 | --- 2 | en-US: 3 | connect_things_you_love: Connect the things you love. 4 | capture_collect_share: Capture, collect, and share with your friends. 5 | lifehackersquote: There's no better way to learn the mechanics and culture of the web than by playing around and hacking it in a safe, fun environment. 6 | local_content: Local Content 7 | use_the_web_different_ways: We all use the web in different ways. Mozilla is dedicated to helping you build a web that’s relevant to your friends, family, business or community. 8 | free_forever: Free Forever 9 | mozilla_open_source: Mozilla is a non-profit organization and these open-source tools are created by a global community. They will always be 100% free — now and forever! 10 | host_maker_party: Host a Maker Party 11 | maker_party_cta: Maker Party is Mozilla's global campaign to teach the Web. Join us between July 15 and 31. 12 | get_started: Get started 13 | legal: Legal 14 | privacy: Privacy 15 | donate: Donate 16 | contact: Contact 17 | twitter: Twitter 18 | thimble_goggles: Thimble & X-Ray Goggles 19 | give_us_a_shout: Give us a shout 20 | give_us_a_shout_sentence: "{GiveUsAShoutLink} if you think there’s something wrong." 21 | or_visit_teach_mozilla_org: "Or visit {LinkToTeachSite}" 22 | page_404: This page doesn't exist! 23 | project_404: No project found at this URL! 24 | return_to_webmaker: Return to Webmaker 25 | project_title_play_page: "{ projectName } by { projectAuthor }" 26 | no_thanks: No, thanks 27 | use_webmaker_app: Use the Webmaker App! 28 | like_it_better: We think you'll like it better. 29 | open_app: Open App 30 | searching: Searching... 31 | close_message: Close this message 32 | thimble_write_web: Write the Web 33 | thimble_cta: Create and publish your own web pages while learning HTML, CSS and Javascript. 34 | thimble_try: Try Thimble 35 | -------------------------------------------------------------------------------- /src/locales/index.js: -------------------------------------------------------------------------------- 1 | // This is essentially bulk require 2 | var req = require.context('./', true, /\.json.*$/); 3 | var exports = {}; 4 | 5 | req.keys().forEach(function (file) { 6 | var locale = file.replace('./', '').replace('.json', ''); 7 | exports[locale] = req(file); 8 | }); 9 | 10 | module.exports = exports; 11 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var {Router, Route, Redirect, IndexRoute} = require('react-router'); 4 | var {IntlProvider} = require('react-intl'); 5 | 6 | var Splash = require('./pages/splash/splash.jsx'); 7 | var Legal = require('./pages/legal/legal.jsx'); 8 | var Thumbnail = require('./pages/thumbnail/thumbnail.jsx'); 9 | var Project = require('./pages/project/project.jsx'); 10 | var ErrorView = require('./pages/error/error.jsx'); 11 | 12 | var intlData = require('./util/i18n').intlData; 13 | 14 | /** 15 | * Create base class 16 | */ 17 | var App = React.createClass({ 18 | render: function () { 19 | return React.cloneElement(this.props.children); 20 | } 21 | }); 22 | 23 | ReactDOM.render(( 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ), document.querySelector('#app'), () => { 38 | window.optimizely = window.optimizely || []; 39 | window.optimizely.push(["activate"]); 40 | }); 41 | -------------------------------------------------------------------------------- /src/main.less: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | /** 4 | * Components 5 | */ 6 | 7 | // webmaker-core extras 8 | @import "../node_modules/webmaker-core/src/variables"; 9 | @import "../node_modules/webmaker-core/src/colors"; 10 | 11 | // webmaker-core components 12 | @import "../node_modules/webmaker-core/src/components/action-menu/action-menu"; 13 | @import "../node_modules/webmaker-core/src/components/alert/alert"; 14 | @import "../node_modules/webmaker-core/src/components/basic-element/basic-element"; 15 | @import "../node_modules/webmaker-core/src/components/button/button"; 16 | @import "../node_modules/webmaker-core/src/components/card/card"; 17 | @import "../node_modules/webmaker-core/src/components/color-group/color-group"; 18 | @import "../node_modules/webmaker-core/src/components/color-spectrum/color-spectrum"; 19 | @import "../node_modules/webmaker-core/src/components/element-group/element-group"; 20 | @import "../node_modules/webmaker-core/src/components/link/link"; 21 | @import "../node_modules/webmaker-core/src/components/loading/loading"; 22 | @import "../node_modules/webmaker-core/src/components/modal-confirm/modal-confirm"; 23 | @import "../node_modules/webmaker-core/src/components/modal-switch/modal-switch"; 24 | @import "../node_modules/webmaker-core/src/components/option-panel/option-panel"; 25 | @import "../node_modules/webmaker-core/src/components/range/range"; 26 | @import "../node_modules/webmaker-core/src/components/select/select"; 27 | @import "../node_modules/webmaker-core/src/components/shim/shim"; 28 | @import "../node_modules/webmaker-core/src/components/snackbar/snackbar"; 29 | @import "../node_modules/webmaker-core/src/components/spindicator/spindicator"; 30 | @import "../node_modules/webmaker-core/src/components/tabs/tabs"; 31 | @import "../node_modules/webmaker-core/src/components/text-input/text-input"; 32 | @import "../node_modules/webmaker-core/src/components/d-pad/d-pad"; 33 | 34 | // webmaker-core pages 35 | @import "../node_modules/webmaker-core/src/pages/project/project"; 36 | 37 | // webmaker-browser specific components 38 | @import "components/promo/promo"; 39 | @import "components/micro-modal/micro-modal"; 40 | @import "components/app-cta/app-cta"; 41 | 42 | /** 43 | * Pages 44 | */ 45 | @import "pages/project/project"; 46 | @import "pages/splash/splash"; 47 | @import "pages/thumbnail/thumbnail"; 48 | @import "pages/legal/legal"; 49 | @import "pages/error/error"; 50 | 51 | /** 52 | * General 53 | */ 54 | *, 55 | *:after, 56 | *:before { 57 | box-sizing: border-box; 58 | -webkit-backface-visibility: hidden; 59 | -webkit-tap-highlight-color: rgba(0,0,0,0); 60 | -webkit-tap-highlight-color: transparent; 61 | } 62 | 63 | html { 64 | font-family: "FiraSans", "Fira Sans", "Fira Sans OT", sans-serif; 65 | font-weight: normal; 66 | min-height: 100%; 67 | background-color: #f0f2f7; 68 | } 69 | 70 | body { 71 | display: block; 72 | min-height: 100%; 73 | margin: 0; 74 | padding: 0; 75 | } 76 | 77 | /** 78 | * Utility Classes 79 | */ 80 | 81 | .centered { 82 | text-align: center; 83 | } 84 | 85 | .sr-only { 86 | position: absolute; 87 | width: 1px; 88 | height: 1px; 89 | padding: 0; 90 | margin: -1px; 91 | overflow: hidden; 92 | clip: rect(0 0 0 0); 93 | border: 0; 94 | } 95 | 96 | .btn-uppercase { 97 | background: @white; 98 | border-radius: 40px; 99 | font-family: 'Fira Sans', sans-serif; 100 | font-weight: 500; 101 | line-height: 15px; 102 | text-transform: uppercase; 103 | margin: 1rem 0; 104 | padding: 20px 50px; 105 | box-shadow: none; 106 | } 107 | -------------------------------------------------------------------------------- /src/pages/error/error.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Footer = require('../../components/footer/footer.jsx'); 3 | var Masthead = require('../../components/masthead/masthead.jsx'); 4 | var {defineMessages, injectIntl, intlShape, FormattedMessage} = require('react-intl'); 5 | 6 | var Error = React.createClass({ 7 | render: function () { 8 | var messages = this.props.intl.messages; 9 | var helpLink = ({messages['give_us_a_shout']}); 10 | var teachSiteLink = (teach.mozilla.org); 11 | var currentPath = this.props.location.pathname; 12 | var errorMessage = messages['page_404']; 13 | 14 | if (currentPath === '/project-not-found') { 15 | errorMessage = messages['project_404']; 16 | } 17 | 18 | return ( 19 |
20 | 21 | 22 |
23 |
24 |

404

25 |

{errorMessage}

26 |

27 | 31 |

32 | {messages['return_to_webmaker']} 33 |

34 | 38 |

39 |
40 |
41 | 42 |
43 |
44 | ); 45 | } 46 | }); 47 | 48 | module.exports = injectIntl(Error); 49 | -------------------------------------------------------------------------------- /src/pages/error/error.less: -------------------------------------------------------------------------------- 1 | #splash.error { 2 | background: linear-gradient(135deg, #4c88ef 0%, #17e4d9 100%); 3 | 4 | #masthead { 5 | background: none; 6 | border-bottom: 0; 7 | } 8 | 9 | #mid { 10 | background: none; 11 | 12 | .inner.legal { 13 | h1, h2, p, a { 14 | color: @white; 15 | } 16 | 17 | h1 { 18 | font-weight: 100; 19 | } 20 | 21 | h2 { 22 | font-weight: 200; 23 | margin-bottom: 0; 24 | } 25 | 26 | a { 27 | &:not(.btn) { 28 | text-decoration: underline; 29 | } 30 | 31 | &.btn { 32 | color: @blue; 33 | margin: 20px 0; 34 | } 35 | } 36 | 37 | margin-bottom: 100px; 38 | } 39 | } 40 | 41 | #footer { 42 | background: #f0f2f7; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/pages/legal/legal.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Footer = require('../../components/footer/footer.jsx'); 3 | var Masthead = require('../../components/masthead/masthead.jsx'); 4 | 5 | module.exports = React.createClass({ 6 | render: function () { 7 | return ( 8 |
9 | 10 | 11 |
12 |

These new terms of use for Webmaker and Mozilla Learning Networks will go into effect August 17, 2015.

13 |

Webmaker & Mozilla Learning Network Terms of Use

14 |

August 17, 2015

15 | 16 |

1. Introduction

17 |

At Mozilla, we promote choice and innovation by helping users realize the full potential of the web. To this end, we created Webmaker and the Mozilla Learning Network (collectively, the “Sites”). Webmaker (webmaker.org) enables users to leverage the web and learn about the underlying practices and technologies that make it open, safe, fun, and powerful. The Mozilla Learning Network (teach.mozilla.org) provides resources for educators and activists who want to teach web literacy and digital skills through making.

18 |

Your use of the Sites is subject to these terms and conditions as well as any other policies linked to in these Terms or elsewhere on the Sites (we will refer to these collectively as the “Terms”).

19 | 20 |

2. Eligibility

21 |

By using the Sites, you agree that you are either (i) at least 18 years old or (ii) are between the ages of 13 and 17 and acting with the consent and supervision of your parent or legal guardian; and that you have full power, capacity, and authority to accept these Terms on behalf of yourself, or if applicable, your employer or other entity that you represent.

22 | 23 |

3. Modifications to the Terms

24 |

We reserve the right to change these Terms at our sole discretion, and if we do make material changes, we will attempt to notify you of those changes prior to those terms coming into effect.

25 | 26 |

4. Privacy

27 |

The Mozilla Websites, Communications & Cookies Privacy Notice describes how we handle information that we receive from you in connection with the Sites, such as contact details that you provide when you register for the Sites. The Privacy Notice also explains, for example, that we place certain cookies on our Websites and how you can opt-out.

28 | 29 |

5. Accounts

30 |

The Sites require you to register for an account in order to access certain features of the Sites such as submission of content. All the content you publish under your account, including all profile information (like your username), will be accessible publicly and may be viewed by others. Your username will also provide you with a subdomain based on that username. You are responsible for all activities under your account.

31 |

You may not impersonate others with your username in a manner that does or is intended to mislead, confuse, or deceive others and we reserve the right to reclaim usernames on behalf of businesses or individuals that hold legal claim or trademark on those usernames. You may not buy or sell usernames or engage in squatting (creating usernames for the purpose of preventing others from using them).

32 | 33 |

6. Content Submissions

34 |

You may upload content, including text and images, as a part of the features of the Sites (“Submissions”). You represent and warrant that your Submissions will comply with these Terms and the Mozilla Conditions of Use. You further understand and agree that Mozilla reserves the right, at its discretion, to review or remove any Submission that it deems objectionable or in violation of the Conditions of Use or these Terms.

35 | 36 |

a. Webmaker Project Submissions

37 |

You agree to license all your Webmaker Project Submissions under a Creative Commons Attribution-ShareAlike 3.0 Unported license, or any later version. You represent and warrant that that you have all necessary rights and permissions to license your Webmaker Project Submissions under a CC BY-SA license and that the uses contemplated on the Sites will not infringe the proprietary or intellectual property rights of any third party.

38 |

Mozilla does not require a direct license grant from you for Webmaker App Project Submissions and will use the terms of the CC BY-SA license in order to provide you with service.

39 | 40 |

b. Thimble and X-Ray Goggles Submissions

41 |

You grant Mozilla a non-exclusive, worldwide, sublicensable, royalty free license to use your Thimble and X-Ray Goggles (the “Tools”) Submissions in connection with the provision and promotion of the Tools and the Sites. You represent and warrant that that you have all necessary rights and permissions to publish your Tools Submissions on the Sites, and that the uses contemplated in the Tools and on the Sites will not infringe the proprietary or intellectual property rights of any third party.

42 |

You acknowledge that as a part of the functionality of Tools, some if not all of your Tools Submissions may be re-used by others. Because of this, you hereby grant every user of the Tools a non-exclusive, worldwide, sublicensable, royalty free license to use your Tools Submissions in connection with the functionality available through the Tools.

43 | 44 |

c. Profiles and other content

45 |

The Sites may provide you with the ability to create user profiles and other content (“Other Content”), and you hereby grant Mozilla a non-exclusive, worldwide, royalty free license to use your Other Content Submissions in connection with the provision and promotion of the Sites. You represent and warrant that that you have all necessary rights and permissions to publish your Other Content Submissions on the Sites, and that the uses contemplated on the Sites will not infringe the proprietary or intellectual property rights of any third party.

46 | 47 |

7. Clubs and Maker Parties

48 |

The Sites provide resources for users who want to arrange physical meetings at various venues, referred to on the Sites as Clubs and Maker Parties. These meetings are organized and managed by volunteers and third parties independently of Mozilla.

49 |

Except where we explicitly state otherwise, you acknowledge that we: (i) do not supervise or control the meetings or interactions between users (even if the Clubs or Maker Parties use the term “Mozilla” or “Moz” in the title or if they include members of the Mozilla community), (ii) are not involved in any way with physical transportation to or from meetings or with the actions of any individuals at those meetings, (iii) do not control users or have the ability to verify the true identity, age, nationality or other information of users, and (iv) do not control the quality, safety, morality, legality, truthfulness or accuracy of meetings or people attending them. We request that you exercise caution and good judgment when attending such meetings.

50 | 51 |

8. Copyright and Trademark Notices

52 |

To report copyright or trademark infringement, please visit https://www.mozilla.org/en-US/about/legal/report-abuse/.

53 | 54 |

9. Termination

55 |

The Terms will continue to apply until terminated by either you or Mozilla.

56 |

You may end your agreement with Mozilla regarding the Sites at any time for any reason by discontinuing your use of the sites and, if applicable, deactivating your account. If you stop using the Sites without deactivating your account, your account may be deactivated due to prolonged inactivity.

57 |

We may suspend or terminate your accounts or cease providing you with all or part of the Sites at any time for any reason, including, but not limited to, if we reasonably believe: (i) you have violated these Terms, (ii) you create risk or possible legal exposure for us; or (iii) our provision of the Sites to you is no longer commercially viable. We will make reasonable efforts to notify you by the email address associated with your account or the next time you attempt to access your account.

58 |

In all such cases, the Terms shall terminate, except that the following sections shall continue to apply: Release and Indemnification, Disclaimer; Limitation of Liability, Governing Law, Miscellaneous.

59 | 60 |

10. General Representation and Warranty

61 |

You represent and warrant that your use of the Sites, including your Submissions, will comply with these Terms, the Mozilla Conditions of Use, and any other applicable policy or terms and conditions.

62 | 63 |

11. Release and Indemnification

64 |

You release Mozilla, its officers, employees, agents and successors from claims, demands and damages of every kind or nature arising out of or related to any disputes with other users, including with respect to any meetings you may wish to attend. You further waive any and all rights and benefits otherwise conferred by any statutory or non-statutory law of any jurisdiction that would purport to limit the scope of a release or waiver.

65 |

You agree to defend, indemnify and hold harmless Mozilla, its contractors and its licensors, and their respective directors, officers, employees and agents, from and against any and all third party claims and expenses, including attorneys' fees, arising out of or related to your use of the Sites, including but not limited to your violation of any representation or warranty contained in these Terms.

66 | 67 |

12. Disclaimer; Limitation of Liability

68 |

EXCEPT AS OTHERWISE EXPRESSLY STATED, INCLUDING BUT NOT LIMITED TO IN A LICENSE OR OTHER AGREEMENT GOVERNING THE USE OF SPECIFIC CONTENT, ALL CONTENT LOCATED AT OR AVAILABLE FROM THE SITES IS PROVIDED "AS IS," AND MOZILLA, ITS CONTRACTORS, AND ITS LICENSORS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, OR NON-INFRINGEMENT OF PROPRIETARY RIGHTS. WITHOUT LIMITING THE FOREGOING, MOZILLA, ITS CONTRACTORS, AND ITS LICENSORS MAKE NO REPRESENTATION OR WARRANTY THAT CONTENT LOCATED ON THE SITES IS FREE FROM ERROR OR SUITABLE FOR ANY PURPOSE; NOR THAT THE USE OF SUCH CONTENT WILL NOT INFRINGE ANY THIRD PARTY COPYRIGHTS, TRADEMARKS, OR OTHER INTELLECTUAL PROPERTY RIGHTS. YOU UNDERSTAND AND AGREE THAT YOU DOWNLOAD OR OTHERWISE OBTAIN CONTENT THROUGH THE SITES AT YOUR OWN DISCRETION AND RISK, AND THAT MOZILLA, ITS CONTRACTORS, AND ITS LICENSORS WILL HAVE NO LIABILITY OR RESPONSIBILITY FOR ANY DAMAGE TO YOUR COMPUTER SYSTEM OR DATA THAT RESULTS FROM THE DOWNLOAD OR USE OF SUCH CONTENT.

69 |

EXCEPT AS OTHERWISE EXPRESSLY STATED, INCLUDING BUT NOT LIMITED TO IN A LICENSE OR OTHER AGREEMENT GOVERNING THE USE OF SPECIFIC CONTENT, IN NO EVENT WILL MOZILLA, ITS CONTRACTORS OR ITS LICENSORS BE LIABLE TO YOU OR ANY OTHER PARTY FOR ANY DIRECT, INDIRECT, SPECIAL, CONSEQUENTIAL OR EXEMPLARY DAMAGES, REGARDLESS OF THE BASIS OR NATURE OF THE CLAIM, RESULTING FROM ANY USE OF THE SITES, OR THE CONTENTS THEREOF OR OF ANY HYPERLINKED WEBSITE, INCLUDING WITHOUT LIMITATION ANY LOST PROFITS, BUSINESS INTERRUPTION, LOSS OF DATA OR OTHERWISE, EVEN IF MOZILLA, ITS CONTRACTORS OR ITS LICENSORS WERE EXPRESSLY ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

70 |

SOME JURISDICTIONS MAY NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES OR THE EXCLUSION OR LIMITATION OF LIABILITY FOR CERTAIN INCIDENTAL OR CONSEQUENTIAL DAMAGES, SO SOME OF THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU.

71 | 72 |

13. Governing Law

73 |

These Terms shall be governed by the laws of the state of California, U.S.A., without regard to conflict of law principles. You agree to submit to the personal and exclusive jurisdiction of the state and federal courts located within Santa Clara County, California, for the purpose of litigating any claims or disputes arising out of the Sites or these Terms.

74 | 75 |

14. Miscellaneous

76 |

These Terms constitute the entire agreement between the parties with respect to the subject matter hereof, and supersede any prior versions of these Terms. These Terms shall not be construed to create a joint venture or partnership between the parties. Neither party shall be deemed to be an employee, agent, partner or legal representative of the other for any purpose and neither shall have any right, power or authority to create any obligation or responsibility on behalf of the other. If any portion of these Terms is held to be invalid or unenforceable, the remaining portions will remain in full force and effect. In the event of a conflict between a translated version of these Terms and the English language version, the English language version shall control.

77 |
78 | 79 |
80 |
81 | ); 82 | } 83 | }); 84 | -------------------------------------------------------------------------------- /src/pages/legal/legal.less: -------------------------------------------------------------------------------- 1 | #splash { 2 | .legal { 3 | display: block !important; 4 | margin: 40px auto; 5 | padding: 0 20px; 6 | 7 | h1, h2, h3, h4 { 8 | color: #6B7B8D; 9 | font-weight: 400; 10 | } 11 | 12 | h1 { 13 | font-size: 2rem; 14 | margin: 20px 0 0 0; 15 | } 16 | 17 | h2 { 18 | font-size: 1.6rem; 19 | margin: 20px 0; 20 | } 21 | 22 | h3 { 23 | font-size: 1.0rem; 24 | } 25 | 26 | h4 { 27 | font-size: 0.8rem; 28 | font-weight: normal; 29 | } 30 | 31 | p, ol, li { 32 | font-size: 1.0rem; 33 | font-weight: 300; 34 | color: #3F505B; 35 | line-height: 28px; 36 | margin-bottom: 1em; 37 | } 38 | 39 | li { 40 | margin-bottom: 0.33em; 41 | } 42 | 43 | a { 44 | color: #669EFF; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/pages/project/project.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var {defineMessages, injectIntl, intlShape, FormattedMessage} = require('react-intl'); 3 | var {parseJSON} = require('webmaker-core/src/lib/jsonUtils'); 4 | var nets = require('nets'); 5 | var config = require('../../config'); 6 | var platform = require('webmaker-core/src/lib/platform'); 7 | 8 | var DPad = require('webmaker-core/src/components/d-pad/d-pad.jsx'); 9 | var AppCta = require('../../components/app-cta/app-cta.jsx'); 10 | 11 | var Project = React.createClass({ 12 | mixins: [ 13 | require('webmaker-core/src/pages/project/transforms'), 14 | require('webmaker-core/src/pages/project/remix'), 15 | require('webmaker-core/src/pages/project/cartzoom'), 16 | require('webmaker-core/src/pages/project/pageadmin'), 17 | require('webmaker-core/src/pages/project/loader'), 18 | require('webmaker-core/src/pages/project/setdestination'), 19 | require('webmaker-core/src/pages/project/renderhelpers'), 20 | require('webmaker-core/src/pages/project/dpad-logic'), 21 | require('webmaker-core/src/pages/project/form-pages')//, 22 | ], 23 | 24 | getInitialState: function () { 25 | return { 26 | loading: true, 27 | selectedEl: '', 28 | pages: [], 29 | matrix: [this.DEFAULT_ZOOM, 0, 0, this.DEFAULT_ZOOM, 0, 0 ], 30 | isPageZoomed: false, 31 | isFirstLoad: true, 32 | params: { 33 | user: this.props.location.query.user, 34 | project: this.props.location.query.project, 35 | mode: 'play' 36 | }, 37 | projectName: 'Untitled', 38 | projectAuthor: 'Anonymous' 39 | }; 40 | }, 41 | 42 | componentWillMount: function () { 43 | this.load(); 44 | 45 | // Add CSS hook 46 | document.querySelector('html').setAttribute('id', 'project-player'); 47 | 48 | // Retrieve project metadata: project name & author 49 | var options = { 50 | method: 'GET', 51 | uri: config.API_URI + 52 | '/users/' + this.props.location.query.user + 53 | '/projects/' + this.props.location.query.project, 54 | json: {} 55 | }; 56 | 57 | nets(options, (err, res, body) => { 58 | if (res.statusCode === 404) { 59 | return this.replaceWith('/project-not-found?user=' + this.props.location.query.user + '&project=' + this.props.location.query.project); 60 | } 61 | 62 | if (err || res.statusCode !== 200) { 63 | return console.error('Could not fetch the page'); 64 | } 65 | 66 | platform.trackEvent('Browser Player', 'Open Project Success', options.uri); 67 | 68 | this.setState({ 69 | projectAuthor: body.project.author.username, 70 | projectName: body.project.title 71 | }); 72 | }); 73 | }, 74 | 75 | componentDidUpdate: function (prevProps) { 76 | if (this.props.isVisible && !prevProps.isVisible) { 77 | this.load(); 78 | } 79 | 80 | if (window.Platform) { 81 | window.Platform.setMemStorage('state', JSON.stringify(this.state)); 82 | } 83 | }, 84 | 85 | componentDidMount: function () { 86 | if (window.Platform) { 87 | var state = window.Platform.getMemStorage('state'); 88 | if (this.state.params.mode === 'edit') { 89 | state = parseJSON(state); 90 | if (state.params && state.params.project === this.state.params.project) { 91 | this.setState({ 92 | selectedEl: state.selectedEl, 93 | matrix: state.matrix 94 | }); 95 | } 96 | } 97 | } 98 | 99 | }, 100 | 101 | dismissCTA: function () { 102 | this.refs.androidModal.hide(); 103 | }, 104 | 105 | render: function () { 106 | // FIXME: TODO: this should be handled with a touch preventDefault, 107 | // not by reaching into a DOM element. 108 | // 109 | // Prevent pull to refresh 110 | // FIXME: TODO: This should be done by preventDefaulting the touch event, not via CSS. 111 | // FIXME: TODO: Add component after localization is initialized 112 | document.body.style.overflowY = 'hidden'; 113 | var messages = this.props.intl.messages; 114 | var mode = this.state.params.mode; 115 | var isPlayOnly = (mode === 'play' || mode === 'link'); 116 | return ( 117 |
118 |
119 | 120 |

121 | 128 |

129 |
130 | 131 |
132 | 136 | 137 | 138 |
139 |
140 | { this.formPages() } 141 | { this.generateAddContainers(isPlayOnly) } 142 |
143 |
144 |
145 | 146 |
147 | ); 148 | } 149 | }); 150 | 151 | module.exports = injectIntl(Project); 152 | -------------------------------------------------------------------------------- /src/pages/project/project.less: -------------------------------------------------------------------------------- 1 | #project-player { 2 | height: 100%; 3 | 4 | body { 5 | height: 100%; 6 | } 7 | 8 | #app { 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | #player-body { 14 | height: 100%; 15 | display: flex; 16 | flex-direction: column; 17 | } 18 | 19 | .btn.meta-button { 20 | display: none; 21 | } 22 | 23 | .primary-btn:focus { 24 | outline: 0; 25 | } 26 | 27 | header.main { 28 | background: @blue; 29 | color: @white; 30 | padding: 10px; 31 | display: flex; 32 | align-items: center; 33 | 34 | a { 35 | flex-shrink: 0; 36 | } 37 | 38 | img { 39 | display: block; 40 | width: 40px; 41 | height: 40px; 42 | margin-right: 10px; 43 | } 44 | 45 | h1 { 46 | flex-grow: 1; 47 | font-weight: 400; 48 | margin: 0; 49 | font-size: 20px; 50 | color: #FCFCFC; 51 | line-height: 1.1; 52 | } 53 | } 54 | 55 | 56 | .micro-modal { 57 | display: none; 58 | 59 | @media (min-width: 960px) { 60 | display: block; 61 | 62 | &.hidden { 63 | display: none; 64 | } 65 | } 66 | 67 | p { 68 | margin: 0 0 1em 0; 69 | font-size: 14px; 70 | } 71 | 72 | .buttons { 73 | display: flex; 74 | align-items: center; 75 | 76 | a { 77 | display: block; 78 | margin-right: 10px; 79 | line-height: 0; 80 | flex-shrink: 0; 81 | } 82 | 83 | img { 84 | width: 140px; 85 | } 86 | 87 | .column { 88 | flex-grow: 1; 89 | } 90 | 91 | button { 92 | background: darken(@modalSlate, 10%); 93 | border: 0; 94 | padding: 5px 10px; 95 | width: 100%; 96 | border-radius: 4px; 97 | font-size: 14px; 98 | } 99 | } 100 | } 101 | 102 | .dPad button { 103 | background-image: url(../img/nub.svg); 104 | 105 | &:active, 106 | &:focus { 107 | outline: 0; 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/pages/splash/splash.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Promo = require('../../components/promo/promo.jsx'); 3 | var Footer = require('../../components/footer/footer.jsx'); 4 | var Masthead = require('../../components/masthead/masthead.jsx'); 5 | var {defineMessages, injectIntl, intlShape, FormattedMessage} = require('react-intl'); 6 | 7 | var Splash = React.createClass({ 8 | render: function () { 9 | var messages = this.props.intl.messages; 10 | 11 | return ( 12 |
13 | 14 |
15 |

{messages['connect_things_you_love']}

16 |

{messages['capture_collect_share']}

17 |
18 | 19 | Get it on Google Play 21 | 22 |
23 |
24 | 25 |
26 | The Mozilla Webmaker for Android App 27 |
28 |
29 | 30 |
31 |
32 |
33 |

"{messages['lifehackersquote']}" – Lifehacker

34 |
35 | 36 |
37 |

{messages['local_content']}

38 |

{messages['use_the_web_different_ways']}

39 |
40 | 41 |
42 |

{messages['free_forever']}

43 |

{messages['mozilla_open_source']}

44 |
45 |
46 |
47 | 48 |
49 | 57 |
58 | 59 |
60 |
61 | ); 62 | } 63 | }); 64 | 65 | module.exports = injectIntl(Splash); 66 | -------------------------------------------------------------------------------- /src/pages/splash/splash.less: -------------------------------------------------------------------------------- 1 | #splash { 2 | h1 { 3 | margin: 0; 4 | font-size: 2.6rem; 5 | line-height: 1.28; 6 | font-weight: 400; 7 | text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | h2 { 11 | margin: 0 0 1.4rem 0; 12 | font-size: 1.48rem; 13 | line-height: 2rem; 14 | font-weight: 200; 15 | } 16 | 17 | h4 { 18 | margin: 0; 19 | font-size: 1.3rem; 20 | font-weight: 500; 21 | } 22 | 23 | p { 24 | margin: 0; 25 | } 26 | 27 | button { 28 | display: inline-block; 29 | width: 88px; 30 | height: 48px; 31 | margin-left: 10px; 32 | line-height:1em; 33 | border: none; 34 | outline: none; 35 | background: none; 36 | 37 | color: #4D95DF; 38 | border-radius: 50px; 39 | background-color: rgba(255, 255, 255, 0.85); 40 | text-transform: uppercase; 41 | 42 | -webkit-transition: background-color 0.3s ease-out; 43 | transition: background-color 0.3s ease-out; 44 | } 45 | 46 | button:hover { 47 | background-color: rgba(255, 255, 255, 1); 48 | } 49 | 50 | input[type="text"] { 51 | display: inline-block; 52 | width: 244px; 53 | height: 40px; 54 | 55 | border: none; 56 | outline: none; 57 | background: none; 58 | 59 | border-bottom: 2px solid rgba(255, 255, 255, 0.7); 60 | } 61 | 62 | input[type="checkbox"] { 63 | display: inline-block; 64 | width: 22px; 65 | height: 22px; 66 | 67 | border: none; 68 | outline: none; 69 | background: none; 70 | 71 | vertical-align: middle; 72 | cursor: pointer; 73 | } 74 | 75 | label { 76 | font-size: 0.8rem; 77 | } 78 | 79 | form { 80 | margin-top: 25px; 81 | } 82 | 83 | a:link { 84 | color: inherit; 85 | text-decoration: none; 86 | } 87 | 88 | a(:not(.btn)):hover { 89 | text-decoration: underline; 90 | } 91 | 92 | a:active { 93 | color: inherit; 94 | } 95 | 96 | a:visited { 97 | color: inherit; 98 | } 99 | 100 | /** 101 | * Masthead 102 | */ 103 | #masthead { 104 | padding: 20px 0; 105 | 106 | color: white; 107 | border-bottom: 1px solid #4b80b7; 108 | 109 | background: #4c88ef; 110 | background: -moz-linear-gradient(-45deg, #4c88ef 0%, #17e4d9 100%); 111 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4c88ef), color-stop(100%,#17e4d9)); 112 | background: -webkit-linear-gradient(-45deg, #4c88ef 0%,#17e4d9 100%); 113 | background: -o-linear-gradient(-45deg, #4c88ef 0%,#17e4d9 100%); 114 | background: -ms-linear-gradient(-45deg, #4c88ef 0%,#17e4d9 100%); 115 | background: linear-gradient(135deg, #4c88ef 0%,#17e4d9 100%); 116 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c88ef', endColorstr='#17e4d9',GradientType=1 ); 117 | } 118 | 119 | #masthead a:link { 120 | color: white; 121 | font-weight: 500; 122 | } 123 | 124 | #masthead #header { 125 | position: relative; 126 | img { 127 | margin-left: -6px; 128 | } 129 | } 130 | 131 | #masthead #signup { 132 | position: relative; 133 | margin: 150px 0px 160px; 134 | } 135 | 136 | #masthead #signup #optin { 137 | margin-top: 10px; 138 | } 139 | 140 | #masthead #signup form.hide { 141 | display: none; 142 | } 143 | 144 | #masthead #signup #thanks { 145 | display: none; 146 | margin-top: 82px; 147 | } 148 | 149 | #masthead #signup #thanks.show { 150 | display: block; 151 | } 152 | 153 | #masthead #hero { 154 | position: absolute; 155 | top: 90px; 156 | left: calc(~"100% - 300px"); 157 | transition: transform 0.7s ease-out; 158 | } 159 | 160 | #hero:hover { 161 | transform: translateY(-10px); 162 | } 163 | 164 | .google-play img { 165 | // This is determined by the image dimensions 166 | width: 150px; 167 | } 168 | 169 | #signup .tooltip.email, #signup .tooltip.optin { 170 | position: relative; 171 | z-index: 98; 172 | width: 230px; 173 | left: 0; 174 | color: #3f505b; 175 | border-radius: 3px; 176 | background-color: rgba(255, 255, 255, 0.85); 177 | padding: 8px; 178 | font-size: .7em; 179 | margin-top: 10px; 180 | text-align: center; 181 | font-weight: 500; 182 | display: none; 183 | } 184 | 185 | #signup .tooltip.email:before, #signup .tooltip.optin:before { 186 | border: solid; 187 | border-color: rgba(255, 255, 255, 0.85) transparent; 188 | border-width: 0px 6px 6px 6px; 189 | content: ""; 190 | top: -6px; 191 | left: 50%; 192 | margin-left: -3px; 193 | position: absolute; 194 | z-index: 99; 195 | } 196 | 197 | #signup .tooltip.optin:before { 198 | left: 6px; 199 | } 200 | 201 | #signup form[data-errors*="email"] .tooltip.email { 202 | display: block; 203 | } 204 | 205 | #signup form[data-errors*="optin"] .tooltip.optin { 206 | display: block; 207 | } 208 | 209 | /** 210 | * Mid 211 | */ 212 | #mid { 213 | padding: 100px 0 100px 0; 214 | background-color: white; 215 | } 216 | 217 | #mid .inner { 218 | display: flex; 219 | justify-content: space-between; 220 | align-items: flex-start; 221 | } 222 | 223 | #mid .segment { 224 | display: inline-block; 225 | width: 296px; 226 | height: auto; 227 | color: #707c8c; 228 | } 229 | 230 | #mid .quote { 231 | font-size: 1.3rem; 232 | } 233 | 234 | #mid .quote .signature { 235 | display: block; 236 | font-size: 0.9rem; 237 | margin-top: 4px; 238 | } 239 | 240 | #mid .feature h4 { 241 | color: #3f505b; 242 | } 243 | 244 | #mid .feature p { 245 | font-size: 1.0rem; 246 | line-height: 1.65rem; 247 | margin-top: 6px; 248 | } 249 | 250 | /** 251 | * Maker Party Promo 252 | */ 253 | #mp-promo { 254 | .promo { 255 | .promoMixin(@vikingYellow); 256 | background-image: url('../img/maker-party-pattern-tile@2x.png'); 257 | background-repeat: repeat repeat; 258 | background-size: 171px 121.5px; 259 | } 260 | } 261 | 262 | #thimble-promo { 263 | .promo { 264 | .promoMixin(@thimbleGreen); 265 | background-image: url('../img/thimble-pattern@2x.png'); 266 | background-repeat: repeat repeat; 267 | background-size: 200px; 268 | } 269 | } 270 | 271 | /** 272 | * Footer 273 | */ 274 | #footer { 275 | display: block; 276 | text-align: center; 277 | border-top: 1px solid #d7d9de; 278 | h2 { 279 | margin: 30px 0 0 0; 280 | color: darken(#AAAFBD, 20%); 281 | } 282 | img { 283 | margin-bottom: 30px; 284 | } 285 | .icon { 286 | margin: 0 4px 0 0; 287 | } 288 | ul { 289 | display: flex; 290 | justify-content: center; 291 | align-items: center; 292 | max-width: 500px; 293 | margin: 30px auto; 294 | padding: 0; 295 | list-style: none; 296 | @media (max-width: 980px) { 297 | display: block; 298 | text-align: left; 299 | } 300 | li { 301 | width: auto; 302 | display: block; 303 | text-align: center; 304 | @media (min-width: 410px) { 305 | width: 33%; 306 | display: inline-flex; 307 | justify-content: center; 308 | align-items: center; 309 | a { 310 | padding: 10px; 311 | } 312 | } 313 | font-size: 0.9em; 314 | color: #aaafbd; 315 | a { 316 | white-space: nowrap; 317 | padding: 10px 20px; 318 | display: block; 319 | &.tools { 320 | background: @legacyGreen; 321 | padding: 4px 10px; 322 | border-radius: 4px; 323 | font-size: 11px; 324 | line-height: 19px; 325 | width: 170px; 326 | color: white; 327 | margin: 10px auto 0 auto; 328 | text-align: center; 329 | transition: background 0.3s ease-out; 330 | @media (min-width: 410px) { 331 | margin: 0 0 0 20px; 332 | text-align: center; 333 | width: auto; 334 | display: inline-table; 335 | } 336 | &:hover { 337 | text-decoration: none; 338 | background: lighten(@legacyGreen, 3%) 339 | } 340 | } 341 | } 342 | } 343 | } 344 | } 345 | 346 | /* ----------------------------- */ 347 | 348 | /** 349 | * Utility 350 | */ 351 | .inner { 352 | position: relative; 353 | width: 966px; 354 | margin: 0 auto; 355 | } 356 | 357 | ::-webkit-input-placeholder { 358 | color: white; 359 | opacity: 0.6; 360 | } 361 | :-moz-placeholder { 362 | color: white; 363 | opacity: 0.6; 364 | } 365 | ::-moz-placeholder { 366 | color: white; 367 | opacity: 0.6; 368 | } 369 | :-ms-input-placeholder { 370 | color: white; 371 | opacity: 0.6; 372 | } 373 | 374 | /* ----------------------------- */ 375 | 376 | /** 377 | * Responsive 378 | */ 379 | @media (max-width: 980px) { 380 | h1 { 381 | font-size: 2.4rem; 382 | } 383 | 384 | h2 { 385 | margin-bottom: 1.5rem; 386 | } 387 | 388 | input[type="text"] { 389 | font-size: 1rem; 390 | width: 200px; 391 | } 392 | 393 | button { 394 | height: 40px; 395 | width: 70px; 396 | } 397 | 398 | .inner { 399 | width: 600px; 400 | margin: 0 auto; 401 | } 402 | 403 | #masthead #signup { 404 | margin: 60px 0 60px 0; 405 | } 406 | 407 | #masthead #signup #optin { 408 | display: flex; 409 | width: 260px; 410 | } 411 | 412 | #hero { 413 | display: none; 414 | } 415 | 416 | #optin label { 417 | margin-left: .5em; 418 | } 419 | 420 | #mid { 421 | padding: 40px 0 10px; 422 | } 423 | 424 | #mid .inner { 425 | display: block; 426 | } 427 | 428 | #mid .segment { 429 | width: 100%; 430 | margin-bottom: 2em; 431 | } 432 | 433 | } 434 | 435 | @media (max-width: 768px) { 436 | .inner { 437 | width: auto; 438 | margin: 0 1rem; 439 | } 440 | h1 { 441 | font-size: 2rem; 442 | line-height: 1.2; 443 | margin: 0; 444 | } 445 | h2 { 446 | font-size: 1.38rem; 447 | } 448 | #mid .quote { 449 | font-size: 1.2rem; 450 | } 451 | } 452 | } 453 | -------------------------------------------------------------------------------- /src/pages/thumbnail/thumbnail.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var nets = require('nets'); 3 | 4 | var ElementGroup = require('../../../node_modules/webmaker-core/src/components/element-group/element-group.jsx'); 5 | var types = require('../../../node_modules/webmaker-core/src/components/basic-element/basic-element.jsx').types; 6 | 7 | var config = require('../../config'); 8 | 9 | module.exports = React.createClass({ 10 | getInitialState: function () { 11 | return { 12 | isLoading: true, 13 | elements: {} 14 | }; 15 | }, 16 | componentWillMount: function () { 17 | var options = { 18 | method: 'GET', 19 | uri: config.API_URI + 20 | '/users/' + this.props.location.query.user + 21 | '/projects/' + this.props.location.query.project + 22 | '/pages/' + this.props.location.query.page, 23 | json: {} 24 | }; 25 | 26 | nets(options, (err, res, body) => { 27 | this.setState({isLoading: false}); 28 | 29 | if (err || res.statusCode !== 200) { 30 | return console.error('Could not fetch the page'); 31 | } 32 | 33 | this.setState({ 34 | elements: this.flatten(body.page.elements), 35 | background: body.page.styles.backgroundColor || "#F2F6FC" 36 | }); 37 | }); 38 | }, 39 | render: function () { 40 | return ( 41 |
42 |
43 |
44 | 48 |
49 |
50 |
51 | ); 52 | }, 53 | 54 | /** 55 | * Converts an array of elements into a flattened hash. 56 | * 57 | * @param {array} elements Array of objects from API 58 | * 59 | * @return {object} 60 | */ 61 | flatten: function (elements) { 62 | var result = {}; 63 | elements.forEach(element => { 64 | var obj = types[element.type].spec.flatten(element); 65 | if (obj) { 66 | result[element.id] = obj; 67 | } 68 | }); 69 | 70 | return result; 71 | } 72 | }); 73 | -------------------------------------------------------------------------------- /src/pages/thumbnail/thumbnail.less: -------------------------------------------------------------------------------- 1 | #thumbnail { 2 | @_gutter: 10px; 3 | @_baseWidth: 320px; 4 | @_baseHeight: 440px; 5 | 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100%; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | background-color: @lightGrey; 15 | 16 | .container { 17 | position: relative; 18 | width: @_baseWidth; 19 | height: @_baseHeight; 20 | 21 | .inner { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | } 28 | } 29 | 30 | .meta-button { 31 | display: none; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/util/color.js: -------------------------------------------------------------------------------- 1 | var Color = require('color'); 2 | var minimumContrast = 2; 3 | 4 | module.exports = { 5 | getContrastingColor: (function() { 6 | var white = Color().rgb(255, 255, 255), 7 | whiteCSS = white.rgbString(), 8 | black = Color().rgb(0, 0, 0), 9 | blackCSS = black.rgbString(); 10 | return function(input) { 11 | var c = Color(input), 12 | wc = white.contrast(c), 13 | bc = black.contrast(c); 14 | return (wc < bc && wc >= minimumContrast) ? whiteCSS : blackCSS; 15 | }; 16 | }()) 17 | }; 18 | -------------------------------------------------------------------------------- /src/util/i18n.js: -------------------------------------------------------------------------------- 1 | var assign = require ('react/lib/Object.assign'); 2 | var messages = require ('../locales'); 3 | 4 | var locale = navigator.language.split('-'); 5 | locale = locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : navigator.language; 6 | 7 | var strings = messages[locale] ? messages[locale] : messages['en-US']; 8 | module.exports = { 9 | intlData: { 10 | locales : ['en-US'], 11 | // Sometimes we will include a language with partial translation 12 | // and we need to make sure the object that we pass to `intlData` 13 | // contains all keys based on the `en-US` messages. 14 | messages: assign(messages['en-US'], strings), 15 | }, 16 | defaultLang: 'en-US', 17 | currentLanguage: locale, 18 | isSupportedLanguage: function(lang) { 19 | return !!messages[lang]; 20 | }, 21 | intlDataFor: function(lang) { 22 | // we need to make sure we transform the given locale to the right format first 23 | // so we can access the right locale in our dictionary for example: pt-br should be transformed to pt-BR 24 | var locale = lang.split('-'); 25 | locale = locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : lang; 26 | var strings = messages[locale] ? messages[locale] : messages['en-US']; 27 | 28 | return {locales: [locale], messages: assign(messages['en-US'], strings)}; 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/util/spec.js: -------------------------------------------------------------------------------- 1 | var React = require('react/addons'); 2 | 3 | function getValidationErrors(spec) { 4 | var result = null; 5 | var VALID_KEYS = ['category', 'default', 'validation', 'editor']; 6 | var VALID_CATEGORIES = ['styles', 'attributes']; 7 | 8 | var keys = Object.keys(spec); 9 | 10 | if (!keys.length) { 11 | result = 'Spec must have at least one prop'; 12 | } 13 | 14 | keys.forEach(key => { 15 | var prop = spec[key]; 16 | Object.keys(prop).forEach(propKey => { 17 | if (VALID_KEYS.indexOf(propKey) <= -1) { 18 | result = key + ' is not a valid key'; 19 | } 20 | }); 21 | if (VALID_CATEGORIES.indexOf(prop.category) <= -1) { 22 | result = prop.category + ' is not a valid category definition for ' + key; 23 | } 24 | }); 25 | 26 | return result; 27 | } 28 | 29 | function Spec(type, spec) { 30 | if (typeof type !== 'string' || typeof spec !== 'object') { 31 | throw new Error('Spec takes two params: type (String) and spec (Object)'); 32 | } 33 | 34 | var error = getValidationErrors(spec); 35 | if (error) { 36 | throw new Error(error); 37 | } 38 | 39 | this.type = type; 40 | this.spec = spec; 41 | } 42 | 43 | Spec.getValidationErrors = getValidationErrors; 44 | 45 | Spec.getPositionProps = function () { 46 | return { 47 | angle: { 48 | category: 'styles', 49 | validation: React.PropTypes.number, 50 | default: 0 51 | }, 52 | scale: { 53 | category: 'styles', 54 | validation: React.PropTypes.number, 55 | default: 1 56 | }, 57 | x: { 58 | category: 'styles', 59 | validation: React.PropTypes.number, 60 | default: 0 61 | }, 62 | y: { 63 | category: 'styles', 64 | validation: React.PropTypes.number, 65 | default: 0 66 | }, 67 | zIndex: { 68 | category: 'styles', 69 | validation: React.PropTypes.number, 70 | default: 0 71 | } 72 | }; 73 | }; 74 | 75 | Spec.propsToPosition = function (props) { 76 | return { 77 | transform: [ 78 | `translate(${props.x}px, ${props.y}px)`, 79 | `rotate(${props.angle * 180/Math.PI}deg)`, 80 | `scale(${props.scale})` 81 | ].join(' '), 82 | '-webkit-transform': [ 83 | `translate(${props.x}px, ${props.y}px)`, 84 | `rotate(${props.angle * 180/Math.PI}deg)`, 85 | `scale(${props.scale})` 86 | ].join(' '), 87 | transformOrigin: 'center', 88 | zIndex: props.zIndex 89 | }; 90 | }; 91 | 92 | Spec.prototype.getDefaultProps = function () { 93 | var props = this.spec; 94 | var result = {}; 95 | Object.keys(props).forEach(prop => { 96 | if (typeof props[prop].default === 'function') { 97 | result[prop] = props[prop].default(); 98 | } else if (typeof props[prop].default !== 'undefined') { 99 | result[prop] = props[prop].default; 100 | } 101 | }); 102 | return result; 103 | }; 104 | 105 | Spec.prototype.getPropTypes = function () { 106 | var props = this.spec; 107 | var result = {}; 108 | Object.keys(props).forEach(prop => { 109 | if (typeof props[prop].validation !== 'undefined') { 110 | result[prop] = props[prop].validation; 111 | } 112 | }); 113 | return result; 114 | }; 115 | 116 | Spec.prototype.flatten = function (props, options) { 117 | options = options || {}; 118 | props = props || {}; 119 | var element = JSON.parse(JSON.stringify(props)); 120 | 121 | var defaults = this.getDefaultProps(); 122 | 123 | Object.keys(this.spec).forEach(key => { 124 | var category = this.spec[key].category; 125 | if (!element[category]) { 126 | element[category] = {}; 127 | } 128 | 129 | if (typeof element[category][key] !== 'undefined') { 130 | element[key] = element[category][key]; 131 | } else if (options.defaults) { 132 | if (typeof defaults[key] !== 'undefined') { 133 | element[key] = defaults[key]; 134 | } 135 | } 136 | }); 137 | 138 | delete element.styles; 139 | delete element.attributes; 140 | 141 | return element; 142 | }; 143 | 144 | Spec.prototype.expand = function (props, options) { 145 | options = options || {}; 146 | props = props || {}; 147 | var element = JSON.parse(JSON.stringify(props)); 148 | 149 | var defaults = this.getDefaultProps(); 150 | 151 | Object.keys(this.spec).forEach(key => { 152 | var category = this.spec[key].category; 153 | if (!element[category]) { 154 | element[category] = {}; 155 | } 156 | 157 | if (typeof element[key] !== 'undefined') { 158 | element[category][key] = element[key]; 159 | delete element[key]; 160 | } else if (options.defaults) { 161 | if (typeof defaults[key] !== 'undefined') { 162 | element[category][key] = defaults[key]; 163 | } 164 | } 165 | }); 166 | 167 | return element; 168 | }; 169 | 170 | Spec.prototype.generate = function (props) { 171 | props = props || {}; 172 | props.type = this.type; 173 | var result = this.expand(props || {}, {defaults: true}); 174 | return result; 175 | }; 176 | 177 | Spec.prototype.isStyleOrAttribute = function (name) { 178 | var category; 179 | Object.keys(this.spec).forEach((key) => { 180 | if (key === name) { 181 | category = this.spec[key].category; 182 | } 183 | }); 184 | return category; 185 | }; 186 | 187 | module.exports = Spec; 188 | -------------------------------------------------------------------------------- /src/util/touchhandler.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | 4 | function copy(obj) { 5 | return JSON.parse(JSON.stringify(obj)); 6 | } 7 | 8 | function resetTransform() { 9 | return { 10 | x1: false, 11 | y1: false, 12 | x2: false, 13 | y2: false, 14 | distance: 0, 15 | angle: 0 16 | }; 17 | } 18 | 19 | function generator(positionable) { 20 | var transform = resetTransform(); 21 | var mark = copy(positionable.state); 22 | var handlers = { 23 | /** 24 | * mark the first touch event so we can perform computation 25 | * relative to that coordinate. 26 | */ 27 | startmark: function(evt) { 28 | evt.preventDefault(); 29 | evt.stopPropagation(); 30 | if(!evt.touches || evt.touches.length === 1) { 31 | mark = copy(positionable.state); 32 | transform.x1 = evt.clientX || evt.touches[0].pageX; 33 | transform.y1 = evt.clientY || evt.touches[0].pageY; 34 | positionable.setState({ touchactive: true }); 35 | } else { handlers.secondFinger(evt); } 36 | }, 37 | 38 | /** 39 | * pan/move functionality relies on a single touch event being active. 40 | */ 41 | panmove: function(evt) { 42 | evt.preventDefault(); 43 | evt.stopPropagation(); 44 | if (!transform.x1 && !transform.y1) { 45 | return; 46 | } 47 | if (evt.touches && evt.touches.length > 1) { 48 | return handlers.handleTouchRepositioning(evt); 49 | } 50 | var x = evt.clientX || evt.touches[0].pageX, 51 | y = evt.clientY || evt.touches[0].pageY; 52 | positionable.handleTranslation(x - transform.x1 + mark.x, y - transform.y1 + mark.y); 53 | }, 54 | 55 | /** 56 | * When all fingers are off the device, stop being in "touch mode" 57 | */ 58 | endmark: function(evt) { 59 | if(evt.touches && evt.touches.length > 0) { 60 | return handlers.endSecondFinger(evt); 61 | } 62 | mark = copy(positionable.state); 63 | transform = resetTransform(); 64 | positionable.setState({ touchactive: false }); 65 | if (positionable.onTouchEnd) { 66 | positionable.onTouchEnd(); 67 | } 68 | }, 69 | 70 | /** 71 | * A second finger means we need to start tracking another 72 | * event coordinate, which may lead to rotation and scaling 73 | * updates for the element we're working for. 74 | */ 75 | secondFinger: function(evt) { 76 | evt.preventDefault(); 77 | evt.stopPropagation(); 78 | if (evt.touches.length < 2) { 79 | return; 80 | } 81 | // we need to rebind finger 1, because it may have moved! 82 | transform.x1 = evt.touches[0].pageX; 83 | transform.y1 = evt.touches[0].pageY; 84 | transform.x2 = evt.touches[1].pageX; 85 | transform.y2 = evt.touches[1].pageY; 86 | var x1 = transform.x1, 87 | y1 = transform.y1, 88 | x2 = transform.x2, 89 | y2 = transform.y2, 90 | dx = x2 - x1, 91 | dy = y2 - y1, 92 | d = Math.sqrt(dx*dx + dy*dy), 93 | a = Math.atan2(dy,dx); 94 | transform.distance = d; 95 | transform.angle = a; 96 | }, 97 | 98 | /** 99 | * Processing coordinates for rotation/scaling 100 | */ 101 | handleTouchRepositioning: function(evt) { 102 | evt.preventDefault(); 103 | evt.stopPropagation(); 104 | if (evt.touches.length < 2) { 105 | return; 106 | } 107 | var x1 = evt.touches[0].pageX, 108 | y1 = evt.touches[0].pageY, 109 | x2 = evt.touches[1].pageX, 110 | y2 = evt.touches[1].pageY, 111 | dx = x2 - x1, 112 | dy = y2 - y1, 113 | d = Math.sqrt(dx*dx + dy*dy), 114 | a = Math.atan2(dy,dx), 115 | da = a - transform.angle + mark.angle, 116 | s = d/transform.distance * mark.scale; 117 | positionable.handleRotationAndScale(da, s); 118 | }, 119 | 120 | /** 121 | * When the second touch event ends, we might still need to 122 | * keep processing plain single touch updates. 123 | */ 124 | endSecondFinger: function(evt) { 125 | evt.preventDefault(); 126 | evt.stopPropagation(); 127 | if (evt.touches.length !== 1) { 128 | return; 129 | } 130 | handlers.startmark(evt); 131 | } 132 | }; 133 | 134 | return handlers; 135 | } 136 | 137 | module.exports = generator; 138 | }()); 139 | -------------------------------------------------------------------------------- /static/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 3 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/favicon.ico -------------------------------------------------------------------------------- /static/img/default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Thumbnail 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /static/img/google-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/img/google-play.png -------------------------------------------------------------------------------- /static/img/hero@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/img/hero@2x.png -------------------------------------------------------------------------------- /static/img/icon-close.svg: -------------------------------------------------------------------------------- 1 | CloseClose -------------------------------------------------------------------------------- /static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/img/logo.png -------------------------------------------------------------------------------- /static/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 24 | 26 | 28 | 31 | 34 | 38 | 41 | 45 | 47 | 50 | 52 | 53 | -------------------------------------------------------------------------------- /static/img/maker-party-pattern-tile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/img/maker-party-pattern-tile@2x.png -------------------------------------------------------------------------------- /static/img/maker-party@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/img/maker-party@2x.png -------------------------------------------------------------------------------- /static/img/mozilla.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/newlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/img/newlogo.png -------------------------------------------------------------------------------- /static/img/nub.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /static/img/thimble-pattern@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-browser/05d134f6489ac5cdd65b0d1a055cfcb6cb31810d/static/img/thimble-pattern@2x.png -------------------------------------------------------------------------------- /static/img/thimble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 15 | 22 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /static/img/toucan.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /static/img/twitter.svg: -------------------------------------------------------------------------------- 1 | Created with Sketch. -------------------------------------------------------------------------------- /static/img/zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Webmaker 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /static/js/lib/react-dom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ReactDOM v0.14.0 3 | * 4 | * Copyright 2013-2015, Facebook, Inc. 5 | * All rights reserved. 6 | * 7 | * This source code is licensed under the BSD-style license found in the 8 | * LICENSE file in the root directory of this source tree. An additional grant 9 | * of patent rights can be found in the PATENTS file in the same directory. 10 | * 11 | */ 12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js 13 | ;(function(f) { 14 | // CommonJS 15 | if (typeof exports === "object" && typeof module !== "undefined") { 16 | module.exports = f(require('react')); 17 | 18 | // RequireJS 19 | } else if (typeof define === "function" && define.amd) { 20 | define(['react'], f); 21 | 22 | // 5 | 6 | 7 | 8 | 9 | 10 | Webmaker 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var WEBMAKER_CORE_DIR = require('./npm_tasks/build-core').WEBMAKER_CORE_DIR; 4 | 5 | module.exports = { 6 | entry: __dirname + '/src/main.jsx', 7 | output: { 8 | path: __dirname + '/build/js', 9 | filename: '[name].bundle.js' 10 | }, 11 | externals: { 12 | 'react': 'React', 13 | 'react-dom': 'ReactDOM' 14 | }, 15 | devtool: 'source-map', 16 | fallback: path.join(__dirname, "node_modules"), 17 | module: { 18 | loaders: [ 19 | { 20 | test: /\.js$/, 21 | loaders: ['babel-loader'], 22 | include: [ 23 | WEBMAKER_CORE_DIR, 24 | path.resolve(__dirname, 'src') 25 | ] 26 | }, 27 | { 28 | test: /\.jsx$/, 29 | loaders: ['babel-loader', 'jsx-loader'], 30 | include: [ 31 | WEBMAKER_CORE_DIR, 32 | path.resolve(__dirname, 'src') 33 | ] 34 | }, 35 | { 36 | test: /\.json$/, 37 | loaders: ['json-loader'], 38 | include: [ 39 | WEBMAKER_CORE_DIR, 40 | path.resolve(__dirname, 'www_src'), 41 | path.resolve(__dirname, 'src/locales'), 42 | path.resolve(__dirname, 'node_modules') 43 | ] 44 | } 45 | ] 46 | } 47 | }; 48 | --------------------------------------------------------------------------------