Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Image selector #123

Closed
wants to merge 8 commits into from

2 participants

@Pomax
Owner

update for the image selecting component

@toolness toolness commented on the diff
js/fc/ui/preview-to-editor-mapping.js
@@ -55,9 +56,15 @@ define(["jquery", "./mark-tracker"], function($, MarkTracker) {
return result;
}
- function PreviewToEditorMapping(livePreview, codeMirrorAreas) {
- var codeMirror = livePreview.codeMirror;
- var marks = MarkTracker(codeMirror);
+ function PreviewToEditorMapping(options) {
+ var livePreview = options.livePreview,
+ codeMirrorAreas = options.codeMirrorAreas,
+ codeMirror = livePreview.codeMirror,
+ marks = MarkTracker(codeMirror);
+
+ var self = {};
@toolness
toolness added a note

You mentioned on IRC that you weren't a fan of this, but I don't mind it--the PreviewToEditorMapping function was designed to be a constructor that returned an object like all the other CamelCased functions in Thimble, we just didn't have any methods/properties to put on it until now, since all its functionality was activated by attaching events to its dependencies.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@Pomax Pomax closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 20, 2012
  1. @Pomax
Commits on Jul 23, 2012
  1. @Pomax
Commits on Jul 31, 2012
  1. @Pomax

    intermediate commit

    Pomax authored
  2. @Pomax

    close to done

    Pomax authored
Commits on Aug 1, 2012
  1. @Pomax

    fixed up some more

    Pomax authored
  2. @Pomax

    typo fix

    Pomax authored
  3. @Pomax

    updated slowparse version

    Pomax authored
  4. @Pomax
This page is out of date. Refresh to see the latest.
View
3  .gitmodules 100755 → 100644
@@ -1,3 +1,6 @@
[submodule "slowparse"]
path = slowparse
url = git://github.com/toolness/slowparse.git
+[submodule "js/fc/ui/flickrfindr"]
+ path = js/fc/ui/flickrfindr
+ url = git@github.com:Pomax/FlickrFindr.git
View
61 css/flickrfindr.css
@@ -0,0 +1,61 @@
+#FlickrFindrPane {
+ height: 500px;
+ width: 500px;
+ background-color: white;
+ margin: auto;
+ border: 6px solid #CCC;
+ box-shadow: 8px 8px 12px 0px rgba(0, 0, 0, 0.5);
+ border-radius: 7px;
+ padding: 2px;
+
+ position: absolute;
+ top: 20%;
+ left: 50%;
+ margin-left: -250px;
+ z-index: 9999999;
+}
+
+#FlickrFindrPane div.title {
+ background-color: rgb(180,210,250);
+ text-align: center;
+}
+
+#FlickrFindrPane span.close {
+ display: block;
+ float: right;
+ text-align: right;
+ border: 1px solid black;
+ padding: 2px;
+ margin: 2px;
+ line-height: 10px;
+ font-size: 10px;
+ background-color: white;
+}
+
+#FlickrFindrPane input.tags {
+ width: 14em;
+ text-align: left;
+}
+
+#FlickrFindrPane div.images {
+ overflow: auto;
+ height: 400px;
+ width: 100%;
+ text-align: center;
+}
+
+#FlickrFindrPane div.imgCode {
+ margin: 5px;
+ background-color: #DDD;
+}
+
+#FlickrFindrPane div.imgCode label {
+ font-weight: bold;
+ text-align: center;
+}
+
+#FlickrFindrPane div.imgCode div {
+ color: #00C;
+ font-family: monospace;
+ font-size: 90%;
+}
View
8 css/show-broken-img.css
@@ -0,0 +1,8 @@
+/**
+ ensure broken image icons show in FireFox
+**/
+img:-moz-broken {
+ -moz-force-broken-image-icon: 1;
+ width: 24px;
+ height: 24px;
+}
View
1  index.html
@@ -21,6 +21,7 @@
<link rel="stylesheet" href="css/editor.css">
<link rel="stylesheet" href="css/errorhelp.css">
<link rel="stylesheet" href="css/modals.css">
+ <link rel="stylesheet" href="css/flickrfindr.css">
</head>
<body class="loading">
<a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>
View
72 js/fc/ui/flickr-image-picker.js
@@ -0,0 +1,72 @@
+"use strict";
+
+/**
+ * Flickr searching of CC-at(-sa/-nc/-nd) photo content.
+ */
+define(["jquery"], function($) {
+
+ return function FlickrImagePicker(options, undef)
+ {
+ var flickrFinder = options.flickrFinder,
+ previewMapper = options.previewMapper,
+ codeMirror = options.codeMirror,
+ interval = undef;
+
+ var showResults = function(finder) {
+
+ // this does not seem the best way to inject?
+ if(finder.template.parentNode !== document.body) {
+ document.body.appendChild(finder.template);
+ }
+
+ var contentPane = $("div.images", finder.template),
+ entry, href, link, i, last;
+ for(i=finder.lastCount, last=finder.entries.length; i<last; i++) {
+ entry = finder.entries[i];
+
+ link = document.createElement("span");
+ link.appendChild(entry.img);
+ link.title = entry.title;
+ link.onclick = (function(i,h,interval) {
+ return function() {
+ // make protocol-agnostic when not running from file
+ if (window.location.toString().indexOf("file:///") === -1) {
+ i = i.replace("http://","//");
+ }
+
+ var imgHTML = "&lt;img src=\"<a href='"+i+"'>"+i+"</a>\" alt=\"Found on: <a href='"+h+"'>"+h+"</a>\"&gt;",
+ imageDiv = $("div.imgCode div", finder.template),
+ start = codeMirror.posFromIndex(interval.start),
+ end = codeMirror.posFromIndex(interval.end);
+
+ imageDiv.html(imgHTML);
+
+ // modify codemirror side of things
+ codeMirror.setSelection(start, end);
+ var originalCode = codeMirror.getSelection();
+ codeMirror.replaceSelection(imageDiv.text());
+
+ // update "end" marker for the image interval
+ interval.end = interval.start + imageDiv.text().length;
+ };
+ }(entry.dataUrlB, entry.href, interval));
+ contentPane.append(link);
+ }
+ finder.moreOnScroll = true;
+ };
+
+ /**
+ * callback handler for "more results" retrieval
+ */
+ flickrFinder.setCallback(showResults);
+
+ // tricker whenever the mapper signals a refresh
+ previewMapper.on("PreviewToEditorMapping:refresh", function(e) {
+ var tagName = e.tagName;
+ if (tagName !== "img") return;
+ interval = e.interval;
+ showResults(flickrFinder);
+ });
+
+ }
+});
1  js/fc/ui/flickrfindr
@@ -0,0 +1 @@
+Subproject commit 9038bce76d347668b72806b29323d4109921d9b0
View
27 js/fc/ui/preview-to-editor-mapping.js
@@ -1,6 +1,7 @@
"use strict";
-define(["jquery", "./mark-tracker"], function($, MarkTracker) {
+define(["underscore", "jquery", "backbone", "./mark-tracker"], function(_, $, Backbone, MarkTracker) {
+
// Given a descendant of the given root element, returns a CSS
// selector that uniquely selects only the descendant from the
// root element.
@@ -55,9 +56,15 @@ define(["jquery", "./mark-tracker"], function($, MarkTracker) {
return result;
}
- function PreviewToEditorMapping(livePreview, codeMirrorAreas) {
- var codeMirror = livePreview.codeMirror;
- var marks = MarkTracker(codeMirror);
+ function PreviewToEditorMapping(options) {
+ var livePreview = options.livePreview,
+ codeMirrorAreas = options.codeMirrorAreas,
+ codeMirror = livePreview.codeMirror,
+ marks = MarkTracker(codeMirror);
+
+ var self = {};
@toolness
toolness added a note

You mentioned on IRC that you weren't a fan of this, but I don't mind it--the PreviewToEditorMapping function was designed to be a constructor that returned an object like all the other CamelCased functions in Thimble, we just didn't have any methods/properties to put on it until now, since all its functionality was activated by attaching events to its dependencies.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ _.extend(self, Backbone.Events);
+
codeMirrorAreas.on("mouseup", marks.clear);
livePreview.on("refresh", function(event) {
var docFrag = event.documentFragment;
@@ -79,13 +86,23 @@ define(["jquery", "./mark-tracker"], function($, MarkTracker) {
codeMirror.focus();
event.preventDefault();
event.stopPropagation();
+
+ // trigger an event for further components
+ self.trigger("PreviewToEditorMapping:refresh", {
+ tagName: tagName,
+ interval: interval,
+ codeMirror: codeMirror
+ });
}
});
});
+ _.extend(livePreview, Backbone.Events);
+
+ return self;
}
PreviewToEditorMapping._pathTo = pathTo;
PreviewToEditorMapping._nodeToCode = nodeToCode;
-
+
return PreviewToEditorMapping;
});
View
4 js/fc/ui/relocator.js
@@ -5,7 +5,7 @@ define(["jquery"], function($) {
return function Relocator(codeMirror) {
var lastPos = null;
var lastElement = null;
-
+
function flipElementIfNeeded() {
var coords = codeMirror.charCoords(lastPos, "local");
var bottomChar = {line: codeMirror.lineCount(), ch: 0};
@@ -16,7 +16,7 @@ define(["jquery"], function($) {
var isPointingDown = coords.yBot + height > bottom;
lastElement.toggleClass("flipped", isPointingDown);
}
-
+
var relocator = {
// clear old markings
cleanup: function() {
View
22 js/main.js
@@ -20,6 +20,9 @@ define("main", function(require) {
Relocator = require("fc/ui/relocator"),
HelpTemplate = require("template!help"),
ErrorTemplate = require("template!error"),
+ FlickrFindr = require("fc/ui/flickrfindr/flickrfindr"),
+ FlickrFindrTemplate = require("template!flickrfindr"),
+ FlickrImagePicker = require("fc/ui/flickr-image-picker"),
publishURL = $("meta[name='publish-url']").attr("content"),
pageToLoad = $("meta[name='remix-url']").attr("content"),
deploymentType = $("meta[name='deployment-type']").attr("content"),
@@ -83,7 +86,24 @@ define("main", function(require) {
ignoreErrors: true,
previewArea: $("#preview-holder")
});
- var previewToEditorMapping = PreviewToEditorMapping(preview, $(".CodeMirror-lines"));
+ var previewToEditorMapping = PreviewToEditorMapping({
+ livePreview: preview,
+ codeMirrorAreas: $(".CodeMirror-lines")
+ });
+ var flickrFindr = FlickrFindr({
+ api_key: "b939e5bd8aa696db965888a31b2f1964",
+ template: $(FlickrFindrTemplate())[0],
+ filters: {
+ license: "1,2,3,4,5,6",
+ content_type: 1,
+ media: "photos"
+ }
+ });
+ var flickrImagePicker = FlickrImagePicker({
+ flickrFinder: flickrFindr,
+ previewMapper: previewToEditorMapping,
+ codeMirror: codeMirror
+ });
var publisher = Publisher(publishURL);
var historyUI = HistoryUI({
codeMirror: codeMirror,
2  slowparse
@@ -1 +1 @@
-Subproject commit 541d71ad6cfaceceb69b73b1cc473941eb5feded
+Subproject commit c6a7104115838698ecbe07a688138b7f1104a7ee
View
15 templates/flickrfindr.html
@@ -0,0 +1,15 @@
+<div id='FlickrFindrPane'>
+ <div class='title'>
+ Search <a href='//flickr.com'>Flickr</a> for pictures: <input class='tags' type='search' placeholder='by typing keywords here'>
+ <span class='close'>X</span>
+ </div>
+ <div class='images'>
+ <!-- this will contain the list of found images -->
+ </div>
+ <div class='imgCode'>
+ <label>HTML code for the selected image:</label>
+ <div>
+ <!-- this will contain the html code for a selected image -->
+ </div>
+ </div>
+</div>
Something went wrong with that request. Please try again.